写真画像を拡大して見せるギャラリーについて、どのような物をお使いですか？
今回はlightboxに似たギャラリーで、レスポンシブ対応の動作が軽いlightcase.jsの使い方について紹介していきます。
実装がとても簡単なので、lightcase.jsを導入する参考にしていただければと思います。
lightcaseの使い方
それではlightcase.jsの使い方を紹介していきます。
まずは配布元のサイトを紹介します。
基本的なlightcaseの実装方法
まずは基本的な実装をお伝えします。
head内に下記コードを設置してください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/lightcase.css">
<script type="text/javascript" src="path/to/lightcase.js"></script>JQueryに関しては、もう少し古いバージョンや新しいバージョンでも動作しているようです。
次にhead内にlightcase.jsを記述した下に下記を記載してください。
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[data-rel^=lightcase]').lightcase();
});
</script>次にギャラリーを適用したい画像に対して、下記のように変更してください。
<a href="path/to/media.jpg" data-rel="lightcase">画像</a>重要なポイントはhref属性には、拡大表示される画像を指定していることです。
またlightcaseを適用したい箇所には、data-rel部分を記述してギャラリーを適用します。
この設定で画像をクリックすると、ギャラリーが適用されていたら実装が完了です。
シンプルな状態なので、モーダルウィンドウに近いような感じです。
スライドショー形式の実装方法
次にスライドショー形式の適用方法をお伝えします。
スライドショー形式を適用すると、前の画像・次の画像のような矢印が表示され、クリックするとその方向へスライドが実行されるようになります。また再生ボタンも追加されます。
head内に記述するJSとCSSは基本的に同じです。
スライドショー形式を適用するには、画像に対して下記コードを記述します。
<a href="path/to/media.jpg" data-rel="lightcase:myCollection:slideshow" title="Your title">画像</a>異なるところは、data-relの部分となります。
ですから基本的な実装の仕方から、少し変更するだけでスライドショー形式に切り替えすることができるのです。
lightcaseの使い方まとめ
lightcase.jsの使い方について紹介してきました。
実に簡単に実装できるので、ギャラリーに迷ったらlightcase.jsを使ってみるのもいいかもしれないですね。
