Galleria jQuery插件定制问题

Question

我正在尝试自定义 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 问题，而不是其他任何问题；非常感谢您在这里提供的任何帮助。

Answer 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()
        };
    }
});