こんにちは、ウェブラボ技術メモです。
今回は、一味違ったギャラリーを実装できる「Photopile JS」を実装してみたいと思います。
まずはどんなものなのか作成したDEMOをご覧ください。
写真をちりばめたような変わったもので、ドラッグ＆ドロップで見たい画像を探すような感じですね。
しかもリロードするたびにランダムで画像が配置されます。一見すると導入が大変そうに思えますが、とっても簡単です。
では実装まで解説していきます。
下記URLからファイル一式をダウンロードしてきてください。
https://github.com/bigbhowell/Photopile-JSまずはダウンロードしたCSSと、jquery、jquery-ui.jsをHTMLのhead内で読み込ませます。
■HTML head内
<link rel="stylesheet" href="css/photopile.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
次に</body>の上にダウンロードしたJS読み込ませます。
■HTML </body>の上
<script src="js/photopile.js"></script>
あとは以下のようにギャラリー部分を記述するだけです。
■HTML ギャラリー部分
<div class="photopile-wrapper"> <ul class="photopile"> <li> <a href="img/img01.jpg"><img src="img/img01.jpg" width="150" height="100" alt=""></a> </li> ・ ・ <!-- ここに自由に画像を追加 --> ・ ・ </ul> </div>
たったこれだけで実装できてしまいます。
photopile.jsの中身を見てみると、コメントアウトで記述してあるPHOTOPILE SETTINGS内の値を変えてあげれば、ボーダーの太さや色、オートプレイの有無など他にも色々と自分好みにカスタマイズできるようになっています。非常に使いやすいですね。
確認した感じだと対応ブラウザはモダンブラウザはもちろんのこと、IEは9から大丈夫そうです。
一応レスポンシブ対応しているみたいですが、スマートフォンではドラッグ＆ドロップができなく、下の方に埋もれている画像とかが見れないので、PCのみの利用にするか何かしらの対応を行わなければなりませんね。。。
いかがでしたでしょうか、スライドショーやただ画像を並べただけじゃ物足りない！他のサイトと違ったギャラリーを実装したい！！と言う人は導入してみてはいかがでしょうか？
以上、技術メモでした。