环球免税店-隐藏缩略图轮播div

Question

我们正在使用Galleria库（http://galleria.io/）从一组用户选择的图像中动态生成幻灯片。 用户还可以选择一些选项，例如高度，宽度，过渡速度，显示/隐藏缩略图轮播等，并且这些设置将应用于Galleria选项。

现在，当用户选择隐藏转盘时，我设置了相关选项，使转盘中的缩略图消失了。 但是，容器div（具有css类的galleria-thumbnails-container）仍然占据一些空白。 我尝试更改此类的一些CSS属性以及没有运气的Galleria容器。

我尝试过的事情：

• 选择类别为“画廊-缩略图-容器”的div后，将高度更改为0。未观察到任何变化。
• 选择类别为“ galleria-thumbnails-container”的div后，将显示更改为无。 没有观察到变化。
• 选择类别为“ allall-container notouch”的div后，将高度降低70像素。 这降低了幻灯片中主图像的高度。

我已经浏览过Galleria文档，但是他们似乎没有选择的余地。 因此这是一个CSS hack。 有任何想法吗？

谢谢。

Answer 1

您可以通过在脚本上使用以下选项来关闭缩略图：

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

文档

thumbnails

    type: Boolean or String
    default: true

---

看一下您的链接，并在滑块下方留出空间是由于图像没有根据您在脚本中指定的宽度/高度缩放，以及.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解决问题-但此解决方法可以完成工作：动态地覆盖样式（适应所需的值）：

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

        } 

      );