軽くてレスポンシブな Simple Lightboxの使い方

このプラグインは、wordpress用でよく使われているsimpleLightboxとは別物です。とても軽量でレスポンシブなところが気に入っています。

それとスワイプで画像を切り替えることもできるのでスマフォやタブレットからでも使用できます。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリック 公式ページのデモは、こちらをクリック

2.ダウンロード

公式ページに行って、ダウンロードしてください。
ダウンロード完了し解凍すると「simplelightbox-master」フォルダーができます。

3.必要なファイル

distフォルダーの中身を自分のフォルダーにコピーします。
simplelightbox.min.css
simple-lightbox.min.js

4.CSSの編集

画像の下にテキストも表示できるので、色を設定した方が良いです。

.gallery {
	color:	#fff;
}

5.HTMLの編集

headタグ内で、simplelightbox.min.css、jquery.jsを読み込みます。

<link href="./css/simplelightbox.min.css" rel="stylesheet" media="all" type="text/css" />
<script src="./js/jquery-1.11.3.min.js" ></script>

</head>

bodyタグ内で、画像を追加していきます。

	<div id="container">
		<div class="gallery">
			<a href="./images/s001.jpg"><img src="./images/thumbs/thumb01.jpg" alt="s001"/></a>
			<a href="./images/s002.jpg"><img src="./images/thumbs/thumb02.jpg" alt="s002"/></a>
			<a href="./images/s003.jpg"><img src="./images/thumbs/thumb03.jpg" alt="s003"/></a>

		</div>

bodyタグの最後の方でプラグインを読み込み実行します。

<script type="text/javascript"></script>
<script src="./js/simple-lightbox.min.js" type="text/javascript"></script>

<script>
	$(document).ready(function() {
		$('.gallery a').simpleLightbox({
			captionsData	: "alt"
		});
	});
</script>
</body>

6.オプションの説明

オプションはいっぱいあり、お好みでいろいろ変えられます。