0

我必须为具有以下规格的客户构建内容库：

  1. 页面上将有两个画廊。
  2. 它们将在灯箱内——用户将点击链接，画廊将在模态窗口中打开。
  3. 画廊将具有位于滑动内容顶部的下一个/上一个按钮
  4. 画廊将在每张幻灯片中包含图像和文本/其他内容。

我有 3 个我建立的画廊的例子，它们并没有完全按照他们应该做的那样做，每个都有自己独特的方式：

1：画廊尝试一，基于无畏飞行器滑块：DEMO HERE

对此不起作用的是：按钮位于每个列表项的内部。我试图通过将绝对定位的图像作为假按钮放在实际链接的顶部来解决此问题，但这在 Internet Explorer 中创建了一个无法解决的 Z-Index 问题。该死。

我的 JQuery 印章无法编写一个新函数，以便按钮可以独立于 LI 并通过计算按钮被单击的次数来触发滑动，所以我尝试了另一种解决方案：

2.画廊尝试二，基于 TinyCarousel：DEMO HERE

这个有什么作用：一切！这很棒！我喜欢自动启用/禁用“上一个”按钮。旋转木马的数量没有限制。惊人的。除了...

什么不起作用：出于某种我无法理解的原因，将 TinyCarousels 放在模态窗口内会停用按钮。这些按钮从字面上获得了一类“禁用”并停止工作。为什么？不知道。试图通过使用 removeClass 取消“禁用”类来修复它。没修。没有想法。

  1. 图库尝试三，基于 Stackoverflow 用户 Kei 的优秀JSFiddle。在这里演示

什么不起作用：这个与页面上的两个画廊配合得很好，在模式窗口内工作，但是......整个 JQuery 专门针对 IMG，而不是 LI，所以它不适用于我的附加文字内容。

因此，任何人都可以提供解决方案或建议：

  1. 将静态按钮添加到库尝试一
  2. 修复 TinyCarousel 中禁用模式窗口内的画廊的错误
  3. 修改库尝试三，使其针对 LI 中的所有内容，而不仅仅是 IMG，或者
  4. 您知道的灯箱+画廊解决方案可以直接开箱即用地完成所有这些事情并允许轻松自定义 CSS？

进一步的画廊尝试：

  1. BXgallery：不起作用，因为它会动态检测其内容的大小并相应地调整自身大小，当内容最初隐藏在模式窗口中时，使其高度和宽度为 0px。在这里演示
4

1 回答 1

0

最后，我放弃并使用了 AnySlider。

我想远离它，因为它功能如此齐全以至于它可能是一个令人头疼的定制问题，而且我记得默认的 CSS 非常密集，无法正确浏览和设置样式。

但是，由于我在尝试不起作用的滑块时显然比我花在解开 AnySlider 的默认 CSS 上的时间要多得多，所以我放弃并尝试了它。在不到一个小时的时间内，它的风格就很体面了。

Ta-da，它有效：DEMO HERE

  1. 它适用于页面上的两个画廊
  2. 它在模态窗口内工作
  3. 控件位于画廊的顶部
  4. 它适用于文本和图像内容。

故事的寓意：有时显而易见的答案是显而易见的。

于 2012-08-04T15:02:38.403 回答