JQuery ライトボックス

リンク画像等をその場で表示する


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
</head>

<body>
	<ul class="lightboxIMG">
		<li><a href="/Path/To/Image/img01.png" data-lightbox="group1" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
			<img src="/Path/To/Image/img01.png" alt=""></a></li>
		<li><a href="/Path/To/Image/img02.png" data-lightbox="group2" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
			<img src="/Path/To/Image/img02.png" alt=""></a></li>
		<li><a href="/Path/To/Image/img03.png" data-lightbox="group3" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
			<img src="/Path/To/Image/img03.png" alt=""></a></li>
		<li><a href="/Path/To/Image/img04.png" data-lightbox="group4" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
			<img src="/Path/To/Image/img04.png" alt=""></a></li>
	</ul>
</body>


.lightboxIMG {
	display: flex;
	flex-align: center;
	}
.lightboxIMG li {text-align: center;}
.lightboxIMG img {width: 70%;}

グループのスライドショーをループにする


	<script>   //HEADに以下を追加する
	    lightbox.option({
	      'wrapAround': true,
	    })
	</script>


<ul class="lightboxIMG">
	<li><a href="/Path/To/Image/img01.png" data-lightbox="group5" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
		<img src="/Path/To/Image/img01.png" alt=""></a></li>
	<li><a href="/Path/To/Image/img02.png" data-lightbox="group5" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
		<img src="/Path/To/Image/img02.png" alt=""></a></li>
	<li><a href="/Path/To/Image/img03.png" data-lightbox="group5" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
		<img src="/Path/To/Image/img03.png" alt=""></a></li>
	<li><a href="/Path/To/Image/img04.png" data-lightbox="group5" data-title="画像のキャプション" data-alt="リンクされた画像のalt属性">
		<img src="/Path/To/Image/img04.png" alt=""></a></li>
</ul>

Lightboxのオプション

data-lightbox
グルーピング
data-title
キャプション
data-alt
リンクされた画像のalt属性
alwaysShowNavOnTouchDevices
trueで左右のナビ矢印が常に表示される
albumLabel
キャプションの下に表示されるテキスト… “Image %1 of %2”
showImageNumberLabel
falseの場合キャプションの下に表示されるテキストは非表示になる
fadeDuration
フェードインおよびフェードアウトするのにかかる時間… 例：600（ミリ秒単位）
imageFadeDuration
ロードされたイメージがフェードインするのにかかる時間… 例：600（ミリ秒単位）
fitImagesInViewport
trueでビューポートの外側に広がる画像のサイズを変更して、ビューポートの内側にきちんと収まるようにする
maxWidth
maxHeight
画像の幅、高さはこの数値に制限されます（px）。アスペクト比は維持されない
wrapAround
trueの場合、セットの最後の画像に到達すると、右のナビ矢印が表示され、前進を続けてセットの最初の画像に戻る

※すべて a タグに記述。

※最新ver. ⇒ Lightbox2


TOP