Galleria jQuery插件定制问题

Galleria jQuery插件定制问题,jquery,galleria,Jquery,Galleria,我正试图定制Galleria jQuery插件,以允许使用dataConfig函数提供丰富的标题。图库的基本代码如下所示: <div id="galleria"> <ul> <li> <img src="myimg.jpg"> <h2>Lorem ipsum title</h2> <div class="desc">Y

我正试图定制Galleria jQuery插件,以允许使用dataConfig函数提供丰富的标题。图库的基本代码如下所示:

<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>

  • 同侧眼睑 您可以添加strong标记或任何其他HTML作为标题
$(“#galleria”)。galleria({ dataConfig:函数(img){ 返回{ title:$(img).next('h2').html(),//告诉Galleria使用h2作为标题 description:$(img).sibbines(.desc).html()//告诉Galleria从.desc div获取内容作为标题 }; } });
我遇到的问题是,如果我将img标记包装在锚中,如下所示--

  • 同侧眼睑 您可以添加strong标记或任何其他HTML作为标题
  • --为了在JS被禁用的情况下允许优雅的降级——dataConfig函数中的“title”和“description”引用不再工作,因为我意识到jQuery正在寻找紧跟在img标记之后的H2和“desc”类,并且将其放置在锚中似乎会在输入时中断引用——例如,通过(img)。next和(img).兄弟姐妹。因此,我的问题是如何更改这些标题和描述jQuery引用以处理驻留在锚标记中的图像。我意识到我可以把锚放在整个块上——即img、h2和“desc”div——我相信现在在HTML5规范中技术上是允许的,它将继续工作,但我宁愿只包装img


    我想这是一个基本的jQuery问题,而不是其他任何问题;非常感谢您的帮助。

    假设您每件物品有一里:

    $('#galleria').galleria({
        dataConfig: function(img) {
            var block = $(img).closest('li'); // find the parent
            return {
                title: block.children('h2').html(),
                description: block.children('.desc').html()
            };
        }
    });
    
    $('#galleria').galleria({
        dataConfig: function(img) {
            var block = $(img).closest('li'); // find the parent
            return {
                title: block.children('h2').html(),
                description: block.children('.desc').html()
            };
        }
    });