1

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

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

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

我不会写这个！！：

有人有解决方案吗？

提前致谢

4

2 回答 2

4

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

<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/。

于 2013-09-28T07:26:43.270 回答
-1

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

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

固定位置元素创建堆叠上下文。Mac、Windows、Linux、Chrome OS、Android 启用此选项会使所有固定位置元素创建新的 CSS 堆叠上下文。#fixed-position-creates-stacking-context

和

固定位置元素的合成。Mac、Windows、Linux、Chrome OS、Android 启用此选项将使固定位置元素拥有自己的合成层。请注意，固定位置元素还必须创建堆叠上下文才能使其工作。#enable-compositing-for-fixed-position。

希望这些信息有所帮助。

于 2014-07-04T18:33:31.933 回答