Question

我试图使自定义的Fotorama标题显示不同，具体取决于img是否具有数据标题属性。现在，它现在显示为＆＃34; undefined，＆＃34;但我希望它完全省略该属性，如果它不在那里。我尝试使用if / else语句并验证img元素是否具有该属性，但无济于事。我无法使用＆＃34; div＆＃34; 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找出解决方法。我根据是否定义了数据标题属性来创建if ... else语句，以了解如何显示标题，但由于某种原因，它似乎没有检查每个activeFrame是否有数据标题属性与否 - 只有第一个。可能是插件的固有问题，或者我忽视了某些东西。

无论如何，解决方案！

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

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

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

1 个答案: