※ 本記事は広告を利用しています
WEBサイトでよく使われるLightboxの表現ですが、プラグインによってはレスポンシブ対応されているものとされていないものがあります。
本日は、レスポンシブサイトでも簡単に実装できて、かつオシャレで高機能なLightboxプラグイン「Lightcase.js」をご紹介いたします。
目次
Lightcase.jsについて
「Lightcase.js」は、美しくて柔軟かつ反応の良いLightboxプラグインです。画像の拡大表示だけでなく、Youtube、videoなどの動画、自由なコンテンツをLightbox表現にすることができます。
実装方法（lightcase-2.5.0）
実装方法は他のプラグインと同様で比較的簡単に実装ができますので、簡単な流れをご紹介します。
またこの記事は、2017年7月29日時点で作成しており、Lightcase.jsのバージョンは「lightcase-2.5.0」になります。
まずは公式サイトからダウンロードしてください。
公式サイト：https://cornel.bopp-art.com/lightcase/
ダウンロードしたら、「lightcase-2.5.0/src」の階層をそのまま利用します。
読み込むデータ
ダウンロードしたデータの中から読み込むのはjs、cssの2ファイルのみです。それとは別にjQueryを読み込む必要がある点にはご注意ください。
<link rel="stylesheet" type="text/css" href="path/to/lightcase.css"> <script type="text/javascript" src="path/to/lightcase.js"></script>
これが読み込めたら次はlightcaseを使うための記述をしてください。
使用するための記述
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[data-rel^=lightcase]').lightcase();
});
</script>
あとは拡大表示したいものを記述するたけです。
<a href="path/to/media.jpg" data-rel="lightcase">画像もしくはテキストなど</a>
その他にも他のLightboxプラグインにみられるものと同様に、拡大表示時にタイトルやキャプションもつけることができます。
DEMO
まとめ
レスポンシブ対応されているLIghtboxプラグインの中でも、簡単に実装できてオシャレな「Lightcase.js」をご紹介させていただきました。
今回紹介したのはLightcase.jsの基礎中の基礎です。他にもグループ表示、自動再生など様々な機能もありますので、ぜひ公式サイトものぞいてみてください。
