Modula PROで、サムネイル付ライトボックスを作成

  • Plugin

    • 前回はModula PROで、ホバーアクションのあるギャラリーを作成しました。今回は、ライトボックスにサムネイルを表示する方法を紹介します。

     出典 : Modula Image Gallery

    今回のDEMOは、縦サムネイル、横サムネイル、2種類作成しました。今回もフランス旅行の写真を使用しました。

    MODULA THUMBNAIL LIGHTBOX

    GALLERY

    縦サムネイルでは、PCでは2列、SPでは1列で表示されます。縦サムネイルはフェード、横サムネイルは拡大縮小のエフェクトをライトボックスに設定しています。

    General

    前回と同じCustom Gridでギャラリーを作成しました。縦サムネイル、横サムネイル同じ設定になります。

    項目設定値
    Gallery TypeCreative Gallery
    Gutter0
    Width100%
    Image SizeMedium
    HeightPC : 1000px
    タブレット : 1000px
    SP : 1500px
    Random factor50
    Shuffle imagesチェック有

    Lightbox & Links

    まず、サムネイルを有効化するために、Auto start thumbnailsにチェックを入れます。これによりライトボックスを開くと、最初からサムネイルが表示されます。

    次に縦サムネイル、横サムネイルで、デザインを分けます。横サムネイルは、Thumbnails at bottomにチェックを入れ、Thumb axisをHorizontal scrollingに変更します。縦サムネイルは、どちらの設定もデフォルトのままです。これで、サムネイルの基本的な設定は終了です。残りの設定で細かいデザインを設定していきます。

    ライトボックスを開く時と、画像が入れ替わる時のアニメーションを縦サムネイル、横サムネイルで変えました。縦サムネイルは、フェードにするため、Open/Close animation、Transition effectを共にFadeに設定しました。横サムネイルは、拡大縮小するアニメーションにするため、Open/Close animation、Transition effectを共にZoom-in-outに設定しました。

    ライトボックスの背景色も、縦サムネイル、横サムネイルで変更しました。縦サムネイルでは、白バックのデザインにしたいので、Lightbox background colorをrgba(255,255,255,0.9)に設定しました。横サムネイルは、デフォルトのままダークグレーにしています。

    有効状態のサムネイルには、枠線が表示されます。縦サムネイル、横サムネイル共に、色を白の透過0.5にするため、Lightbox active colorをrgba(255,255,255,0.5)に変更しました。

    項目設定値
    Open / Close animation縦サムネイル：Fade
    横サムネイル：Zoom-in-out
    Open / Close animation speed500
    Transition effect縦サムネイル：Fade
    横サムネイル：Zoom-in-out
    Transition speed500
    Auto start thumbnailsチェック有
    Thumb axis縦サムネイル：Vertical scrolling
    横サムネイル：Horizontal scrolling
    Thumbnails at bottom縦サムネイル：チェック無
    横サムネイル：チェック有
    Lightbox background color縦サムネイル：rgba(255,255,255,0.9)
    横サムネイル：rgba(30,30,30,0.9)
    Lightbox active colorrgba(255,255,255,0.5)

    その他の設定です。

    今回は、矢印を取るため、Navigation arrowのチェックを外しました。その代わり、スワイプやマウスホイールでも、ライトボックスの写真変更ができるようにするため、Mousewhoeel navigation、Allow swipingにチェックを入れました。

    また、サムネイルボタンを設置し、表示非表示を切り替えできるようにするため、Thumbnails buttonにチェックを入れましました。

    項目設定値
    Navigation arrowsチェック無
    Loop navigationチェック有
    Show image titleチェック有
    Title & caption positionLeft
    Mousewhoeel navigationチェック有
    Tool barチェック有
    Close buttonチェック有
    Thumbnails buttonチェック有
    Close on slide clickチェック有
    Allow swipingチェック有

    Captions

    タイトルのみ表示します。タイトルの色は白(#ffffff)、フォントはデフォルトに設定しました。縦サムネイル、横サムネイル同じ設定になります。

    項目設定値
    Show Gallery Titleチェック無
    Hide Titleチェック無
    Title Color#ffffff
    Title Font Size20px
    Mobile Title Font Size15px
    Title FontDefault
    Title Font WeightRegular
    Hide Captionチェック有

    Hover effects

    縦サムネイルは、27. Milo、横サムネイルは、36. Jazzに設定しました。Hover Opacityは、共に0に設定しました。

    項目設定値
    Hover Opacity0
    Hover effect縦サムネイル：27. Milo
    横サムネイル：36. Jazz

    以上で、今回の説明は終了です。サムネイルが表示されるとライトボックスの印象が変わりますね。また、今回のDEMOは矢印を表示していないので、写真の上に何も乗らないので、綺麗に見えます。

    ライトボックスの設定項目Lightbox & Linksは、項目が多くて複雑ですが、UIの設定もできるので、サイトに合わせてデザインを変更できます。

    Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。

    You may also like