memorandum
thinking about creation

Google画像検索のような詳細情報表示を実現する、オリジナルjQueryプラグイン―jquery.liquidbox

Entry Date _ 2016.05.12
/
ModifiedDate _ 2016.07.04

他にも似たようなものはいくつかあると思うのですが、勉強もかねてjQueryプラグインを自作してみました。Google画像検索のインターフェイスのように、並べられたボックスの下に詳細情報を、コンテンツ幅(またはウィンドウ幅)いっぱいに表示することを実現するプラグインです。また、リキッド・レイアウト(グリッドデザイン)を実現するものでもあります。Masonryのようなアニメーションして並べ替える機能はありませんが、ボックスの高さがそれぞれ違っていても、横列ごとにボックスの高さを揃えて並べてくれるという特徴があります。

このような説明ではよくわからないと思うので、まずはデモをご覧ください。

まだ、ベータ版なのでお使いになられる場合はそのつもりでお使いください。バージョンは0.2.7b。ライセンスはMITです。

■設置方法

まず、ココからファイルをダウンロードしてください。
HTMLヘッダー内に、jQueryを読み込んだ後、liquidboxのcssとjsファイルを読み込みます。



■設定

設定は以下のようになります。
「fukidashi」は、正しくはなんと呼ぶのか知らないのですがフキダシの引き出し部分の画像です。横列の最大ボックス数を指定する「max_cols」を省略するとコンテンツ幅いっぱいにボックスが並びます。「wide」は詳細部分をウィンドウ幅いっぱいに広げるか(true)コンテンツ幅にとどめるか(false)です。


■コンテンツ

コンテンツ部分は、<ul>にliquidboxのセレクタを設定します。この<ul>内がliquidboxが適用される部分になり、<li>がliquidboxのボックスになります。<li>の中には詳細を表示させるボタン「.lqdbox-btn」と、詳細部分「.lqdbox-detail-data」が必要になります。

jquery.liquidbox.cssには現在、「#lqdboxs」と「#lqdboxs2」が設定されていますので、違うものを使う場合はcssを含めて改変する必要があります。わからない場合は「#lqdboxs」を設定してください。

ボックスに画像を含める場合は、ネットワークの状況により高さの取得を取りこぼすことがあるので、IMGタグなりCSSなりで設定しておくことをおすすめします。

  • 詳細表示ボタン
    詳細情報
  • 詳細表示ボタン
    詳細情報
  • ...

複数設置する場合は、セレクタの違う上記のセットと設定を増やしていくことで実現できます。

あとは梱包してあるデモをみて色々変えて試してみてください。繰り返しになりますが、まだベータ版なのでテストも十分ではありません。その点は十分ご留意ください。

Category

memorandum index