Galleria - 隐藏缩略图轮播 div答案

【问题标题】：Galleria - hide thumbnail carousel divGalleria - 隐藏缩略图轮播 div
【发布时间】：2012-02-16 12:29:35
【问题描述】：

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

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

我尝试过的事情：

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

我已经浏览了 Galleria 文档，但他们似乎没有办法处理这个问题。所以它是一个css hack。有什么想法吗？

谢谢。

【问题讨论】：

此要求的用例是只生成一组滚动图像，而无需任何导航控件。

标签： javascript css slideshow image-gallery galleria

【解决方案1】：

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

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

Documentation

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

【讨论】：

我已经使用该选项隐藏缩略图，但容器 div 仍然占用幻灯片中图像下方的一些空间。
@Mandar 你能发布你的页面演示吗？
给你：embed-test-blog.blogspot.in/2012/02/galleria-test.html .. 我遇到了一些 n/w 问题。如果您收到代理错误，请刷新页面。另请注意，这已链接到我的开发服务器。
Ilich - 非常感谢！设置 bottom:10px 是诀窍。最初，我试图从 Galleria.ready 设置它，这并不奇怪。（但是，从相同的功能，即 Galleria.ready，当我更改 Galleria-container 类的背景颜色时它可以工作。）所以我必须在它之外设置 bottom:10px 以使其工作。我真的不需要更改 Galleria 的任何其他选项。为什么是 Galleria 而不是其他的 - 这只是我们幻灯片需求的用例之一。我们正在对 Galleria 最适合的幻灯片图像进行更多操作。谢谢！

【解决方案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');

        } 

      );

【讨论】：