开发者

Galleria: Layer containing links not displayed

开发者 https://www.devze.com 2023-04-02 11:29 出处:网络
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

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

精彩评论

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