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

Question

我试图使自定义Fotorama标题出现不同，具体取决于IMG是否具有数据标题属性。现在，它目前出现在“未定义”中，但我希望它只省略它，如果它不在那里完全归因于。我尝试使用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上没有数据标题属性，我希望读取的方法：

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

.

提前感谢！

Answer 1

如果其他人具有相同的问题，请使用CSS为此解决方法。我对创建的否则是基于data-tite属性的字幕如何显示的... else的陈述，但由于某种原因它似乎没有检查每个活动框架是否有数据标题属性或不是 - 只有第一个。可能是插件或我忽略的内容的固有问题。

无论如何，解决方案！

我在每个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; }

.

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