MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > Java script > 写真をレンガ状に敷き詰めるjqueryプラグイン「Wookmark jQuery plugin」の使い方


写真をレンガ状に敷き詰めるjqueryプラグイン「Wookmark jQuery plugin」の使い方

 2012年12月15日   タグ: , ,

写真をレンガ状に敷き詰めるjqueryプラグイン「Wookmark jQuery plugin」の使い方
サイズの違う写真をレンガ状に敷き詰めた、ポートフォリオサイトなどは写真を見せるコンテンツでよく見かけますが、そんなレイアウトを簡単に実現できるjqueryプラグイン「Wookmark jQuery plugin」の使い方を紹介します。

「Wookmark jQuery plugin」をダウンロード

「Wookmark jQuery plugin」のダウンロードはコチラ
「Wookmark jQuery plugin」のオフィシャルサイト

jquery.jsとwookmark.jsを読み込む

ダウンロードした「Wookmark jQuery plugin」と「jquery」を外部ファイルとして読み込みます。

注意事項

下記のコードは、閉じbodyタグの直前に記述しないとうまく動かないことがあります。

<!-- include jQuery -->
<script src="js/jquery-1.7.1.min.js"></script>

<!-- Include the plug-in -->
<script src="js/jquery.wookmark.js"></script>

<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
  $(document).ready(new function() {
    var options = {
      autoResize: true, // ブラウザの拡大縮小に合わせて要素を自動でリサイズするかどうか
      container: $('#main'), // CSSを適用している要素を指定
      offset: 2, // 要素間の隙間を指定
      itemWidth: 210 // 各要素の幅を指定 
    };

    var handler = $('#tiles li'); // レンガ状にする要素を指定
      
    handler.wookmark(options); // wookmarkをオプション付きで実行
});
</script>

オプション項目

container:CSSを適用している要素を指定

offset:要素間の隙間を指定

itemWidth:各要素の幅を指定

HTMLファイルを記述する

<div id="main" role="main">
  <ul id="tiles">
    <!-- li部分が繰りかされる -->
    <li><img src="images/image_1.jpg" width="200" height="291"><p>1</p></li>
  </ul>
</div>

ほとんど公式サイトのデモコピー&ペーストしただけですが、簡単にデモを作成してみました。無事に動いているみたいです。

デモページはこちら

公式サイトのデモはコチラ

このエントリーをはてなブックマークに追加

  |  Blog TOP   |