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()
};
}
});
精彩评论