1

我正在尝试根据 img 是否具有 data-title 属性来使自定义 Fotorama 标题显示不同。现在，它目前显示为“未定义”，但如果它不存在，我希望它完全省略该属性。我尝试使用 if/else 语句并验证 img 元素是否具有该属性，但无济于事。我无法使用“div”Fotorama 方法，因为我需要限制画廊并相应地调整图像大小。

这就是我的 img 标签的外观：

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" border="0">

这是我用来创建自定义标题格式的代码：

$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.example_blurb');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + ' <a target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);
})
.fotorama();

如果 div 上没有 data-title 属性，这就是我希望标题读取的方式：

'<p><em>' + activeFrame.caption + '</em></p><p>' + activeFrame.author + '</p>'

提前致谢！

4

1 回答 1

0

如果其他人遇到同样的问题，请使用 CSS 找出解决方法。我努力创建 if...else 语句，以根据是否定义了 data-title 属性来显示标题，但由于某种原因，它似乎没有检查每个 activeFrame 是否具有 data-title属性与否——只有第一个。可能是插件的固有问题，或者我忽略了某些东西。

无论如何，解决方案！

我在每个 img 标签（“data-class”）上创建了一个新属性，该属性的值为“work_link”或“no_link”：

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" data-class="work_link" border="0">
<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-class="no_link" border="0">

我将脚本中的标题 HTML 更改为如下所示 - 本质上为链接提供了“work_link”或“no_link”类：

fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + '<a class="' + activeFrame.class + '" target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);

最后使“work_link”类具有基本样式CSS，而“no_link”类不显示。

.work_link { margin-left: 12px; }
.no_link { display: none; }

也许不是最干净的方法，但就像一个魅力！

于 2014-08-07T20:12:13.210 回答