Question

我用拇指整合了一个fotorama的幻灯片。我喜欢这个插件，但在这种情况下，语法是：

<div class="fotorama"
data-nav="thumbs">
<a href="1.jpg"><img src="1_thumb.jpg"></a>
(...)

用于显示大图像，因此我无法添加指向外部页面的链接。

我不能写这个!! ：

有人有解决方案吗？

提前致谢

Answer 1

使用HTML technique在框架上添加透明链接：

<div class="fotorama">
  <div data-img="1.jpg"><a href="http://google.com/"></a></div>
  <div data-img="2.jpg"><a href="http://apple.com/"></a></div>
</div>

使用CSS拉伸链接：

.fotorama__html div,
.fotorama__html a {
  display: block;
  height: 100%;
  /* Transparent links are not clickable in IE,
     but non-existent background fixes this.
    (Put an empty 1×1 image here to avoid
     errors in console.) */
  background: url(_.gif);
}

小提琴：http://jsfiddle.net/artpolikarpov/gzQwy/。

Answer 2

我使用了上述建议并在Chrome（版本35.0.1916.153 m）上发现了问题。外部链接只是间歇性地工作。所以我浏览了解决方案并找到了解决办法：

转到chrome：// flags /并启用以下内容：

固定位置元素创建堆叠上下文。 Mac，Windows，Linux，Chrome OS，Android 启用此选项会使所有固定位置元素创建新的CSS堆叠上下文。＃固定位置创建堆叠上下文

和

复合固定位置元素。 Mac，Windows，Linux，Chrome OS，Android 启用此选项将使固定位置元素具有自己的合成图层。请注意，固定位置元素还必须创建堆叠上下文才能使其生效。＃启用-合成换固定位置。

希望这些信息有所帮助。

Fotorama jquery - 在幻灯片上添加指向外部页面的链接

2 个答案: