ガンマギャラリー-優れたレスポンシブギャラリー

レスポンシブデザインのフォトギャラリーを作成するのは簡単なことではありません。 モバイルデバイスにあまり多くのグラフィックをロードしないようにしながら、さまざまな幅の画面上のディスプレイを考慮する必要があります。 良い解決策はガンマギャラリーです。非常にクールに見えます。



デモンストレーション | ソースコード

ギャラリーの開発時には、次のツールが使用されました。

• グリッド用のjQuery Masonry
• スライドショーのPageVisibility API
• url（） ：シンプルなJavaScriptパーサーのURL
• HTML5履歴/状態APIをサポートするHistory.js
• jQuery ++およびModernizr

すべてのサイズの画像は、メインのHTMLコンストラクトですぐに宣言されますが、画面サイズに応じて1つだけがロードされます。

<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> 

プラグイン設定：

 // default value for masonry column count columns : 4, // transition properties for the images in ms (transition to/from singleview) speed : 300, easing : 'ease', // if set to true the overlay's opacity will animate (transition to/from singleview) overlayAnimated : true, // if true, the navigate next function is called when the image (singleview) is clicked nextOnClickImage : true, // circular navigation circular : true, // transition settings for the image in the single view. // These include: // - adjusting its position and size when the window is resized // - fading out the image when navigating svImageTransitionSpeedFade : 300, svImageTransitionEasingFade : 'ease-in-out', svImageTransitionSpeedResize : 300, svImageTransitionEasingResize : 'ease-in-out', svMarginsVH : { vertical : 140, horizontal : 120 }, // allow keybord and swipe navigation keyboard : true, swipe : true, // slideshow interval (ms) interval : 4000, // if History API is not supported this value will turn false historyapi : true 

ギャラリーの初期化、特定の画面に表示される列の数を決定します。

 <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> 

現在、プラグインは実験的なステータスになっていますが、非常に安定して動作するため、ライブサイトで使用することは可能です。 ギャラリーの作者はtympanus.netです。