googleの画像検索のようなギャラリーをつくる

2015.01.26　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。

第8回目となる2015年最初の技術メモでは、ギャラリーに使えるjavascriptを紹介したいと思います。

ギャラリーと言えば、lightboxを使って、画面の上に大きな画像が表示されるようなものをよく見かけますが、今回は誰もが見慣れたgoogleの画像検索画面のようなギャラリーを作成したいと思います。

モデルとなる本物のgoogle画像検索画面はこちら。

今年の干支、羊の検索結果です。

まずはこちらのサイトから今回使用するjavascriptなどのファイルをダウンロードし、htmlのhead内にcssとjavascriptを読み込ませます。default.cssは好みに応じて変更、削除して構いません。

<head>
<link rel="stylesheet" href="conponent.css" />
<link rel="stylesheet" href="default.css" />
<script src="modernizr.custom.js"></script>
<script src="grid.js"></script>
<script>
     $(function() {
          Grid.init();
     });
</script>
</head>

<head>

$(function() {

Grid.init();

});

</script>

</head>

htmlには下記のようにリストを使って記述しましょう。

画像はサムネイル用に小さい画像と、オリジナルの大きな画像を用意しています。

<ul id="og-grid" class="og-grid">
    <li>
        <a href="https://www.weblab.co.jp" data-largesrc="images/1.jpg" data-title="ひつじ1" data-description="ひつじ1の説明文が入ります。">
        <img src="images/thumbs/1.jpg" alt="img01"/>
        </a>
    </li>
    <li>
        <a href="https://www.weblab.co.jp" data-largesrc="images/2.jpg" data-title="ひつじ2" data-description="ひつじ2の説明文が入ります。">
        <img src="images/thumbs/2.jpg" alt="img02"/>
        </a>
    </li>
    <li>
        <a href="https://www.weblab.co.jp" data-largesrc="images/3.jpg" data-title="ひつじ3" data-description="ひつじ3の説明文が入ります。">
        <img src="images/thumbs/3.jpg" alt="img03"/>
        </a>
     </li>
・
・
・