[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery

単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。

デモのキャプチャ

Gamma Gallery: A Responsive Image Gallery Experiment
デモページ

Gamma Galleryのデモ

まずは、デスクトップで表示したデモからご紹介。

画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。

デモのキャプチャ

デモページ:デスクトップで表示

各画像をクリックするとアニメーションで拡大表示し、左右の矢印をクリックすると、前と次の画像を表示します。

デモのキャプチャ

デモページ:画像を拡大表示

スライドショーにも対応しており、右上の矢印ボタンをクリックします。

デモのキャプチャ

デモページ:スライドショー

スマフォのように小さい画面だとグリッド数も減り、小さくなった幅に最適な画像が表示され、同様の操作が楽しめます。

デモのキャプチャ

デモページ:スマフォで表示

Gamma Galleryの使い方

Step 1: 外部ファイル

Gamma Galleryのスクリプト自体はjQueryのプラグインではありませんが、Masonryをレイアウトに使うなどしています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.history.js"></script>
<script src="js/js-url.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/gamma.js"></script>

Step 2: HTML

HTMLはアイデアが盛り込まれています。
異なるサイズごとに最適なサイズの画像を表示できるようサムネイルから拡大画像まで、それぞれ異なるサイズの画像を配置します。一番小さいサイズが極小サムネイル用の140px、大きいサイズは拡大用の1300pxの幅を想定にしたものです。

<div class="gamma-container gamma-loading" id="gamma-container">
 
    <ul class="gamma-gallery">
        <li>
            <div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">
                <div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>
                <div data-src="images/xxlarge/1.jpg" data-min-width="1000"></div>
                <div data-src="images/xlarge/1.jpg" data-min-width="700"></div>
                <div data-src="images/large/1.jpg" data-min-width="300"></div>
                <div data-src="images/medium/1.jpg" data-min-width="200"></div>
                <div data-src="images/small/1.jpg" data-min-width="140"></div>
                <div data-src="images/xsmall/1.jpg"></div>
                <noscript>
                    <img src="images/xsmall/1.jpg" alt="img01"/>
                </noscript>
            </div>
        </li>
        <li> <!-- ... --> </li>
        <!-- ... -->
    </ul>
 
    <div class="gamma-overlay"></div>
 
</div>

Step 3: JavaScript

まずは、スクリプトで設定できる項目から。

columns
デフォルトのカラム数
speed
アニメーションのスピード
easing
アニメーションの種類
overlayAnimated
オーバーレイの有無
nextOnClickImage
次の画像を表示するファンクション
circular
ナビゲーションの有無
svImageTransitionSpeedFade, svImageTransitionSpeedResize
フェードやリサイズのアニメーションの設定
keyboard
キーボード操作の対応
swipe
スワイプ操作の対応
interval
スライド時の間隔
historyapi
History APIのサポート

デモページではこれらのオプションを使用し、下記のように記述しています。

<script type="text/javascript">
    $(function() {
        var GammaSettings = {
                // order is important!
                viewport : [ {
                    width : 1200,
                    columns : 5
                }, {
                    width : 900,
                    columns : 4
                }, {
                    width : 500,
                    columns : 3
                }, {
                    width : 320,
                    columns : 2
                }, {
                    width : 0,
                    columns : 2
                } ]
        };
        Gamma.init( GammaSettings );
    });
</script>

カラム数はサイズごとに設定できます。
デモでは1200pxの時は5カラムで、320pxの時は2カラムになります。

top of page

©2017 coliss