こんにちは、ウェブラボ技術メモです。
htmlには下記のようにリストを使って記述しましょう。
第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>htmlには下記のようにリストを使って記述しましょう。
画像はサムネイル用に小さい画像と、オリジナルの大きな画像を用意しています。
<ul id="og-grid" class="og-grid">
<li>
<a href="http://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="http://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="http://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>
・
・
・
aタグの中、data-largesrcにオリジナル画像のパス、data-titleには画像のタイトル、data-descriptionに説明文を入力すればギャラリーの完成です。
作成したデモページはこちら。
いかがでしょうか。lightboxとは少し違った見せ方ができ、ギャラリーの選択肢が広がると思います。
注意点としては、古いブラウザ（主にIE）には対応していません。
検証してみたところ、IE8以下ではscriptが正常に動作せず、IE7以下では表示崩れが発生しました。
その他のモダンブラウザでは問題なく見れますので、IE8以下は切り捨てても良い！という場合は使ってみても良いのではないでしょうか。