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

Fotorama - different captions based on if element has attribute

本文关键字：if 元素 属性 标题 Fotorama      更新时间：2023-09-26

我试图使自定义Fotorama标题根据img是否具有data-title属性而显示不同。现在，它当前显示为"未定义"，但我希望它完全省略该属性，如果它不存在的话。我尝试使用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>'

提前感谢!

找到了使用CSS的解决方法，如果其他人有同样的问题。我努力创造它……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; }

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

相关文章：