Galleria toggle description only?

Question

<div id="galleria">
    <img src="/img/pic1.jpg" data-title="title1" data-description="Et facilisis non. Sed, augue turpis eu, vel pellentesque aliquam, tristique ac, tincidunt placerat! Lundium, adipiscing et porttitor velit! Rhoncus adipiscing amet egestas, non dictumst.">
    <img src="/img/pic2.jpg" data-title="title2" data-description="Turpis enim elementum ac nisi magna tempor, aliquam, auctor tincidunt, scelerisque pellentesque parturient velit! Dolor et risus scelerisque vel augue nec, vel. Elementum in! Pid.">
</div>

I have this type of mark up where images has very long description so they don't need to be shown all the time so I want to use Galleria's default galleria-info-link to toggle just description so the title stays all the time and users can toggle description.

Try to change function to only toggle description but since Galleria automatically assign (display:block) to each info-title and info-description , it doesn't work as expected.

Will there be any way to do this ?

score 0 · Answer 1 · answered May 28 '13 at 01:36

Inside the div id=galleria try this :

<style>
.img_field span {
    display: none;
}

<div class='img_field'>
    <img .... />
    <span> Your description here </span>
</div>

<script>
    $('.img_field').mouseenter(function(){
        $(this).children('span').show();
    });
    $('.img_field').mouseleave(function(){
        $(this).children('span').hide();
    });
</script>

Galleria toggle description only?

1 Answers1