javascript - Galleria - 隐藏缩略图轮播 div

Question

我们使用 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 doc，但他们似乎没有处理此问题的选项。所以它是一个 css hack。有什么想法吗？

谢谢。

Answer 1

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

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

Documentation

thumbnails

    type: Boolean or String
    default: true

---

查看您的链接，您的 slider 下方的空间是由于您的图像未根据您在脚本中指定的宽度/高度进行缩放以及 上的一些间距而产生的.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 获得更清晰的结果。插件。