今回は2つのツールを紹介します。
Lightbox
ダウンロード
下記GitHubからツールをダウンロード
使い方
zipファイル解凍後、いろいろなファイルが有りますが、使用するのは「dist」フォルダの中身だけです。
必要なファイルを自分の環境においてください。
※jQueryを必要とするツールになります。

■cssフォルダの中身
lightbox.css :ノーマルcss(編集するのに楽)
lightbox.min.css :圧縮css(圧縮版なのでノーマルより軽い)
※使用する画像の指定を自分の環境に編集する必要があります。
■imagesフォルダの中身
使用する画像が入っている
■jsフォルダの中身
lightbox.js :ノーマルJavaScript
lightbox.min.js :圧縮JavaScript
lightbox-plus-jquery.js :jQueryが導入されたJavaScript
lightbox-plus-jquery.min.js :jQueryが導入された圧縮JavaScript
後はHTMLファイルを少し編集するだけでOKです。
cssを<head>タグ内に読み込む
<link rel="stylesheet" href="css/lightbox.css">
JavaScriptを</body>直前に読み込む
<script src="js/lightbox-plus-jquery.js"></script>
ポップアップしたい画像の編集
<a href="images/test.png" data-lightbox="test" data-title="キャプション"><image src="images/test.png" alt=""></a>
グループ化
data-lightbox の値を同じにすることで複数の画像をスライドで表示可能にします。
オプション
</body>直前にオプションを付ける事も可能です。
<script>
lightbox.option({
'alwaysShowNavOnTouchDevices': false, //trueにするとスマホでスライドの矢印を常に表示
'albumLabel': "Image %1 of %2", //スライドの画像番号のテキストを変更できる
'disableScrolling': false, //trueにするとLightboxが開いている時はスクロール禁止
'fadeDuration': 600, //Lightboxのフェードイン、フェードアウトの時間を指定
'fitImagesInViewport': true, //trueにするとLightbox画像が画面に収まるように縮小される
'imageFadeDuration': 600, //読み込まれてから画像がフェードインするまでの時間を設定
'maxWidth': 900, //画像の最大幅を設定
'maxHeight' 900, //画像の最大高さを設定
'positionFromTop': 50, //Lightboxコンテナの表示領域上からの位置を設定
'resizeDuration': 700, //異なるサイズの画像を表示する際のアニメーションの時間を設定
'showImageNumberLabel': true, //falseにすると画像番号が非表示になる
'wrapAround': false, //trueにすると最後のスライド画像の後に最初のスライド画像に戻る
})
</script>
公式サイト

Luminous
ダウンロード
下記GitHubからツールをダウンロード
使い方
zipファイル解凍後、いろいろなファイルが有りますが、使用するのは「dist」フォルダの中身だけです。
必要なファイルを自分の環境においてください。
■フォルダの中身
luminous.js :ノーマルJavaScript
luminous.min.js :圧縮JavaScript
luminous-basic.css :ノーマルcss
luminous-basic.min.css :圧縮css
後はHTMLファイルを少し編集するだけでOKです。
cssを<head>タグ内に読み込む
<link rel="stylesheet" href="css/luminous-basic.min.css">
JavaScriptを</body>直前に読み込む
※赤字はclassで指定する名前なので任意に変更可能
<script src="Luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('.luminous'));
</script>
ポップアップしたい画像の編集
<a class="luminous" href="images/test.png"><image src="images/test.png" alt=""></a>
公式サイト

コメント