Galleria: Layer containing links not displayed

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