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

サイト構築 -JavaScript

Post on:2012年11月8日

sponsorsr

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

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

Gamma Galleryのデモ
Gamma Galleryの使い方

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カラムになります。