开发者

Galleria jQuery plugin customization question

开发者 https://www.devze.com 2023-03-17 05:39 出处:网络
I\'m trying to customize the Galleria jQuery plugin to allow for rich captions using the dataConfig function as detailed here. The basic code for the gallery is as follows:

I'm trying to customize the Galleria jQuery plugin to allow for rich captions using the dataConfig function as detailed here. The basic code for the gallery is as follows:

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

The issue I'm having is if I wrap the img tag in an anchor, as follows--

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

--to allow for graceful degradation if JS is disabled-- the "title" and "description" references in the dataConfig function no longer work, as I realize jQuery is looking for an H2 and "desc" class immediately following the img tag, and placing it within an anchor seems to break the reference as it's entered-- i.e. via (img).next and (img).siblings. My question therefore is how I can change these title and description jQuery references to work with an image that resides within an anchor tag. I realize I can just place the anchor around the entire block-- ie. img, h2 and the "desc" div-- which I believe is now technically allowed in the HTML5 spec, and it will continue to work as entered, but I'd rather only wrap the img.

I guess this is more of a basic jQuery question than anything else; thanks much for any assistance here.


Assuming you have one LI per 'item':

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

精彩评论

暂无评论...
验证码 换一张
取 消