画像ポップアップで拡大する方法

スポンサーリンク
IT技術

今回は2つのツールを紹介します。

Lightbox

ダウンロード

下記GitHubからツールをダウンロード

Releases · lokesh/lightbox2
THE original Lightbox script (v2). Contribute to lokesh/lightbox2 development by creating an account on 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>

公式サイト

Lightbox2
Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Luminous

ダウンロード

下記GitHubからツールをダウンロード

Releases · imgix/luminous
A simple, lightweight, no-dependencies JavaScript lightbox - imgix/luminous

使い方

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>

公式サイト

GitHub - imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox
A simple, lightweight, no-dependencies JavaScript lightbox - GitHub - imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox

コメント

タイトルとURLをコピーしました