Javascript Galleria-隐藏缩略图旋转木马分区

我们正在使用凯丹图书馆(http://galleria.io/)用于从一组用户选择的图像动态生成幻灯片。用户还可以选择一些选项，如高度、宽度、过渡速度、显示/隐藏缩略图旋转木马等，这些设置将应用于Galleria选项

现在，当用户选择隐藏旋转木马时，我设置了相关选项，使旋转木马中的缩略图消失。但是，container div（带有css类galleria缩略图容器）仍然占用一些空白。我试着改变了这个类的一些css属性，也改变了galleria容器，但运气不好

我尝试过的事情：

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

我已经看过Galleria doc，但他们似乎没有办法处理这个问题。因此，这是一个css黑客。有什么想法吗

---

谢谢。

您可以使用脚本上的以下选项关闭缩略图：

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

---

查看您的链接，滑块下方的空白是由于您的图像没有根据脚本中指定的宽度/高度进行缩放，以及由于

.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插件可以获得更清晰的结果。

我无法解决jQuery/gallery.js的问题-但此解决方法可以完成以下工作： 动态超越样式（适应您所需的值）：

---

此要求的用例是只生成一组滚动的图像，而不使用任何导航控件。我已经使用该选项隐藏缩略图，但容器div在幻灯片中的图像下方仍然占据一些空间。@Mandar您可以发布页面的演示吗？给您：。。我有一些不适用的问题。如果出现代理错误，请刷新页面。另外请注意，这是链接到我的开发服务器。Ilich-非常感谢！设置底部：10px是诀窍。起初，我试着从Galleria.ready开始设置，但效果并不奇怪。（然而，从同一个函数，即Galleria.ready，当我更改Galleria容器类的背景色时，它可以工作。）因此我必须将底部设置为：它外部10px才能工作。我真的不需要改变Galleria的任何其他选择。为什么是Galleria而不是其他东西？这只是我们幻灯片放映需求的一个用例。我们正在用幻灯片图像做更多的操作，Galleria非常适合这些操作。谢谢

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

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

        } 

      );