I'm using the all new HTML layer feature introduced in 1.2.5 of the galleria jquery plugin. It works just fine but as soon as there is an <a> tag in the mark开发者_Python百科up, no layer at all is being displayed. Here's my markup:
<div id="galleria">
<a href="feature-image.jpg" class="link">
<img title="feature" alt="" src="feature-thumbnail.jpg" class="image" />
<div class="layer">
<h3>subtitle</h3>
<h2>title</h2>
<p>lorem ipsum dolor sit amet</p>
<p><a href="http://www.example.com">read more...</a></p>
</div>
</a>
</div>
And the JavaScript:
$('#galleria').galleria({
dataConfig: function(img) {
return {
layer: $(img).siblings('.layer').html()
};
}
});
Anyone having an idea? Thanks in advance!
Hmm, my guess is that it's not working as expected because the div .layer
is inside <a> element which it shouldn't. Try to reorder your html to this:
<div id="galleria">
<a href="feature-image.jpg" class="link">
<img title="feature" alt="" src="feature-thumbnail.jpg" class="image" />
</a>
<div class="layer">
<h3>subtitle</h3>
<h2>title</h2>
<p>lorem ipsum dolor sit amet</p>
<p><a href="http://www.example.com">read more...</a></p>
</div>
</div>
And then your galleria code would be:
$('#galleria').galleria({
dataConfig: function(img) {
return {
layer: $(img).parent().next().html()
};
}
});
精彩评论