Question

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.

Answer 1

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