javascript - Fotorama - 基于元素是否具有属性的不同标题

Question

我正在尝试根据 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>'

提前致谢!

Answer 1

如果其他人遇到同样的问题，请使用 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; }

也许不是最干净的方法，但效果很好!