Galleria - thumbnail carousel div

Question

私たちはGalleriaライブラリ（http://galleria.io/）を使用して、ユーザーが選択した一連の画像からスライドショーを動的に生成しています。ユーザーは、高さ、幅、遷移速度、サムネイルカルーセルの表示/非表示などのいくつかのオプションを選択することもでき、これらの設定はギャラリアオプションに適用されます。

ユーザーがカルーセルを非表示にすると、カルーセルのサムネイルが消える関連するオプションが設定されます。しかし、コンテナdiv（cssクラスgalleria-thumbnails-container）はまだ空白を占めています。私はこのクラスのいくつかのCSS属性と、ギャラリアコンテナを変更してみました。

物事は私が試してみました：

• 0にクラス「ガレリア・サムネイル・コンテナ」、変更の高さを持つdiv要素を選択した後に変化は認められませんでした。
• "galleria-thumbnails-container"クラスでdivを選択した後、displayをnoneに変更します。変化は観察されなかった。
• "galleria-container notouch"というクラスでdivを選択した後、高さを70ピクセルほど減らします。これにより、スライドショーのメイン画像の高さが減少しました。

私はGalleriaのドキュメントを読んでいますが、これを処理するオプションはありません。だから、それはCSSのハックです。何か案は？

ありがとうございました。

Answer 1

あなたはスクリプトで次のオプションを使用してサムネイルをオフにすることができます：

thumbnails 

    type: Boolean or String 
    default: true 

---

$('#galleria').galleria({ 
    thumbnails: "false" 
}); 

Documentation

があなたのリンクを見て取り、あなたのスライダの下にそのスペースがありますスクリプト内で指定した幅/高さに応じて画像が拡大されないことと、 .galleria-stageクラスの間隔が原因で。

javascriptの

$('#slideshow_1749').galleria({ 
    data_source: mmod_slideshow_data, 
    dummy: '/images/default.jpg', 
    showCounter: false, 
    width: 300, /* scale accordingly */ 
    height: 300, /* scale accordingly */ 
    autoplay: 3000, 
    carousel: false, 
    thumbnails: false, 
    showImagenav: false, 
    carousel: false, 
    thumbFit: false, 
    thumbMargin: 0, 
    imageCrop: "height" 
}); 

CSS

.galleria-stage { /* modify line 17 of your galleria.classic.css stylesheet */ 
    bottom:10px; /* define the bottom spacing, same as top/left/right */ 
} 

ただ、サイドノートが、なぜこのような単純なタスクのために、このような複雑なプラグインを使用します。これはそれを修正しようとしますか？ jQuery Cycleプラグインを使用すると、よりクリーンな結果を得ることができます。

Answer 2

私はjqueryの/ gallery.jsブトこの回避策で問題を解決することができませんでしたが仕事をしていません： 書き換えてスタイルはdynamicly（必要に応じて自分の価値観に適応）：になり、この要件のため

function fixcss() 
    { 
      // dynamic overides of styles because all ties to change css with jquery 
      //galleria.js unsucsessful... 

      if (! thumbnails) 
      { 
      var sheet = document.createElement('style') 
      sheet.innerHTML = ".galleria-stage {bottom: 60px !important; } \ 
           .galleria-info {bottom: 0px !important } \ 
           .galleria-thumbnails-container {height: 0px \ 
           !important;}"; 
      document.body.appendChild(sheet); 
      }     

      if (! showInfo){ 
      var sheet = document.createElement('style') 
      sheet.innerHTML = ".galleria-stage {bottom: 80px !important; } \ 
           .galleria-info {bottom: 10px !important }"; 
      document.body.appendChild(sheet); 
      } 

     }; 
     $(document).ready(function() { 
     Galleria.loadTheme('++resource++fgrcon.slideshow/galleria.classic.js'); 
     Galleria.configure({ 
      transition: 'fade', 
      transitionSpeed: transitionSpeed,    
      autoplay:  galleryduration, 
      lightbox:  lightbox , 
      showInfo:  showInfo , 
      showCounter:  showCounter , 
      showImagenav: showImagenav, 
      thumbnails:  thumbnails , 
      height:   galleryheight 

     }); 

      fixcss(); 
      Galleria.run('#galleria'); 

     } 

    );