Galleria - hide thumbnail旋轉木馬div

我們使用Galleria圖書館（http://galleria.io/）從一組用戶選擇的圖像中動態生成幻燈片。用戶還可以選擇一些選項，如高度，寬度，轉換速度，顯示/隱藏縮略圖旋轉木馬等，這些設置適用於Galleria選項。Galleria - hide thumbnail旋轉木馬div

現在，當用戶選擇隱藏輪播，我設置相關的選項，使旋轉木馬中的縮略圖消失。但是，容器div（使用css class galleria-thumbnails-container）仍佔用一些空白。我嘗試改變這個類的幾個CSS屬性以及沒有任何運氣的環球免稅店容器。

事情我已經嘗試：

選擇帶班「廣場 - 縮略圖容器」，改變高度格爲0後沒有變化觀察。
選擇與類「廣場縮略圖容器」div後，更改顯示爲無。沒有觀察到變化。
選擇與類「圓頂場所容器notouch」div後，減少高度說70像素。這減少了幻燈片中主圖像的高度。

我已經經過了Galleria doc，但他們似乎沒有辦法處理這個問題。所以這是一個CSS的破解。有任何想法嗎？

謝謝。

來源

2012-02-16 Mandar

使用情況下這一要求將只產生一組沒有任何導航控件的圖像。 – Mandar 2012-02-16 12:33:28

您可以通過使用腳本下列選項關閉縮略圖：

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

Documentation

thumbnails 

    type: Boolean or String 
    default: true

看了看你的鏈接，你的滑塊下方是否有空間這是因爲您的圖片不是根據您在腳本中指定的寬度/高度進行縮放，而是由於類別上的一些間距。嘗試使用此方法解決它：

的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插件獲得更清晰的結果。

來源

2012-02-16 13:04:43

我已經使用該選項來隱藏縮略圖，但容器div仍然佔用幻燈片中圖像下面的一些空間。 – Mandar 2012-02-16 13:32:18

@Mandar你可以發佈你的頁面演示嗎？ – 2012-02-16 13:40:19

在這裏你去：http://embed-test-blog.blogspot.in/2012/02/galleria-test.html ..我有一些n/w問題。如果您收到代理錯誤，請刷新頁面。另請注意，這與我的開發服務器相關。 – Mandar 2012-02-16 14:18:48

我沒能解決使用jQuery/gallery.js - 但這種解決方法的問題，這項工作： overrride風格動態地（適應需要你的價值觀）：

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'); 

     } 

    );

來源

2013-11-03 13:31:03 fgr

Galleria - hide thumbnail旋轉木馬div

回答

相關問題