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

Question

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

现在,当用户选择隐藏轮播时,我设置相关选项,使旋转木马中的缩略图消失.但是,容器div(使用css类galleria-thumbnails-container)仍占用一些空白.我尝试改变这个类的几个css属性以及没有运气的galleria容器.

我尝试过的事情:

• 选择具有"galleria-thumbnails-container"类的div后,将高度更改为0.未观察到任何变化.
• 在使用"galleria-thumbnails-container"类选择div后,将显示更改为none.没有观察到变化.
• 选择带有"galleria-container notouch"等级的div后,将高度降低70 px.这降低了幻灯片中主图像的高度.

我已经通过了Galleria doc,但他们似乎没有办法解决这个问题.所以这是一个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插件获得更清晰的结果.