Modula PROで、無限スクロールギャラリーを作成

  • Plugin

    • BLOGでは、Modula PROで作成できる、色々な演出のギャラリーを紹介しました。今回は、Modula PROで、無限スクロールギャラリーを作成します。

     出典 : Modula Image Gallery

    今回のDEMOは、今まで紹介しきれなかったフランス旅行の写真をギャラリーにしました。

    MODULA INFINITY SCROLL

    GALLERY

    60枚の画像を、15枚ずつ4回に分けて表示します。SP、PC共にスクロールで表示していき、15枚表示が終了したら、次の15枚が読み込まれます。

    General

    今回は、Createve Galleryで作成しました。Heightは、15枚で表示するギャラリーの高さになります。

    無限スクロールの設定をしていきます。まず、Enable pagenationにチェックを入れます。次に、表示されたEnable infinite scrollにチェックを入れます。Image / Page (Load)に1回のロードで読み込む枚数、15を設定します。これで、無限ループの設定は終了です。

    項目設定値
    Gallery TypeCreative Gallery
    Gutter0
    Width100%
    Image SizeMedium
    HeightPC：2000px
    タブレット：2000px
    SP：2000px
    Random factor50
    Shuffle imagesチェック無
    Enable pagenationチェック有
    Enable infinite scrollチェック有
    Image / Page (Load)15

    ページネーション有効時のShuffle images

    Shuffle imagesを有効にすると、画像の順番が、ページを読み込むごとに変化します。しかし、Enable pagenationにチェックを入れ、Image / Page (Load)を指定すると、ページごとに画像の順番が入れ替わります。画像全体での入れ替えはできません。今回のDEMOでは、有効にしていません。

    Lightbox & Links

    Loop navigationにチェックを入れて、ライトボックスで、画像、動画がループで表示されるようにします。Keyboard navigation、Allow swipingにチェックを入れて、PCでは、キーボード、SPではスワイプでも、画像、動画の切り替えができるようにします。

    項目設定値
    Navigation arrowsチェック有
    Loop navigationチェック有
    Show image titleチェック有
    Show image captionチェック無
    Keyboard navigationチェック有
    Mousewheel navigationチェック無
    Tool barチェック有
    Close buttonチェック有
    Close on slide clickチェック有
    Open / Close animationNone
    Transition effectNone
    Allow swipingチェック有
    Infobarチェック有
    Auto start thumbnailsチェック無
    Lightbox background colorrgba(30,30,30,0.9)

    Caption

    今回は、写真を見せるため、サムネイルにはタイトルを表示していません。

    項目設定値
    Show Gallery Titleチェック無
    Hide Titleチェック有
    Hide Captionチェック有

    Hover effects

    31. Selenaを指定し、マウスオーバーすると、画像が縮小します。

    項目設定値
    Hover Opacity0
    Hover effect31. Selena

    以上で今回の説明は終了です。無限スクロールは、ギャラリー写真を多く見せたい時に有効な機能です。また、Modula PROのページネーションでは、ページャーを表示して、ページ毎に画像を表示することも出来、デザインに合わせて使い分けれます。

    You may also like