我正在尝试自定义Galleria jQuery插件,以使用dataConfig函数作为详细here来使用丰富的字幕。图库的基本代码如下:
<div id="galleria">
<ul>
<li>
<img src="myimg.jpg">
<h2>Lorem ipsum title</h2>
<div class="desc">You can add <strong>strong</strong> tags or any other HTML as caption</div>
</li>
</ul>
</div>
<script>
$('#galleria').galleria({
dataConfig: function(img) {
return {
title: $(img).next('h2').html(), // tell Galleria to use the h2 as title
description: $(img).siblings(.desc).html() // tell Galleria to grab the content from the .desc div as caption
};
}
});
</script>
我遇到的问题是如果我将img标签包装在一个锚中,如下所示 -
<li>
<a href="full-size.jpg"><img src="myimg.jpg"></a>
<h2>Lorem ipsum title</h2>
<div class="desc">You can add <strong>strong</strong> tags or any other HTML as caption</div>
</li>
- 如果JS被禁用,允许优雅降级 - dataConfig函数中的“title”和“description”引用不再有效,因为我意识到jQuery正在寻找一个H2和“desc”类紧跟着img标签,并将它放在一个锚点似乎打破了它的输入 - 即通过(img).next和(img).siblings。因此,我的问题是如何更改这些标题和描述jQuery引用以使用驻留在锚标记内的图像。我意识到我可以将锚放在整个区块周围 - 即。 img,h2和“desc”div--我相信它现在在HTML5规范中被技术上允许了,它将继续按照输入的方式工作,但我宁愿只包装img。
我想这是一个基本的jQuery问题,而不是其他任何问题;非常感谢这里的任何帮助。
答案 0 :(得分:1)
假设每个'项目'有一个LI:
$('#galleria').galleria({
dataConfig: function(img) {
var block = $(img).closest('li'); // find the parent
return {
title: block.children('h2').html(),
description: block.children('.desc').html()
};
}
});