自動グループ化を備えた新しいjQuery適応ギャラリープラグイン

Tympanus.netは、さまざまな問題を解決するために使用できる新しい実験的なjQueryギャラリープラグインを提供します。たとえば、特定の方法でグループ化された画像を単に表示したり、ページをリロードせずに写真付きのユーザーアルバム全体を表示したりします。 もちろん、ギャラリーは適応型であるため、大画面のコンピューターとモバイルデバイスの両方でギャラリーを使用するのに便利です。



プラグインは、data- *属性を使用して、画像のサムネイルをある種のパック（スタック）に自動的にグループ化します。 ユーザーがクリックすると、画像は特定の位置にさまざまな方向に散乱します。 それらはわずかに回転またはオフセットされる場合があります。



出力に使用されるメッシュは適応型です。 画面の解像度が低下すると、テーブル要素が再構築され、列の数が減少します。



ブラウザのサポートは悪くありません。CSS変換は、それらをサポートするブラウザでのみ機能することに注意してください。 残りについては、少しアニメーションがあります。

使用例

まず、tp-gridクラスを使用して順序付けられていないリストを作成する必要があります。

<ul id="tp-grid" class="tp-grid"> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Some title</span> </span> <img src="images/1.jpg" /> </a> </li> <li data-pile="Group 2"> <!-- ... --> </li> <li data-pile="Group 1,Group 2"> <!-- ... --> </li> <!-- ... --> </ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

重要なデータパイル属性には、イメージが属するグループの名前が含まれます。 さらに、各サムネイルは複数のグループに属することができます。



その後、プラグインを呼び出します：

 $( '#tp-grid' ).stapel();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグイン設定

 $.Stapel.defaults = { //    gutter : 40, //        // (  ) pileAngles : 2, //    ,    pileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 400, closeEasing : 'ease-in-out' }, //      otherPileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 350, closeEasing : 'ease-in-out' }, //       delay : 0, //       randomAngle : false, // callback- onLoad : function() { return false; }, onBeforeOpen : function( pileName ) { return false; }, onAfterOpen : function( pileName, totalItems ) { return false; }, onBeforeClose : function( pileName ) { return false; }, onAfterClose : function( pileName, totalItems ) { return false; } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイルはプラグインに付属していますが、再定義できます。 例の詳細。



スタック効果は、ハードコードされた数の画像（2つが特定の角度で回転し、1つがベースにある）によって作成されます。 これを変更する場合、プラグインの対応するコードは次のようになります。

 for( var i = 0, len = p.elements.length; i < len; ++i ) { var $el = $( p.elements[i].el ), styleCSS = { transform : 'rotate(0deg)' }; this._applyInitialTransition( $el ); if( i === len - 2 ) { styleCSS = { transform : 'rotate(' + this.options.pileAngles + 'deg)' }; } else if( i === len - 3 ) { styleCSS = { transform : 'rotate(-' + this.options.pileAngles + 'deg)' }; } else if( i !== len - 1 ) { var extraStyle = { visibility : 'hidden' }; $el.css( extraStyle ).data( 'extraStyle', extraStyle ); } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その中で、設定で定義された度数による回転が最後の2つの要素に適用され、残りは単純に非表示になります。 このコードを変更して、「放棄された」画像の希望数を設定するのは非常に簡単です。

Drupalアプリケーション

ユーザーmrdedは 、プラグインとViewsモジュールを統合したDrupal用のモジュールを開発しています 。

参照資料

GitHubのプロジェクト 。

仕事の例 。



この記事はtympanus.netに基づいています