jQuery + CSS gallery hover effect

Question

I'm having some trouble with an image gallery. To achieve the rollover effect I have this jQuery script:

var gallery=$("#galeria .one-third.column");

        var thumbs = $("#galeria .one-third.column a.fancybox img");        

        for (var c = 0, count = gallery.length; c < count; c++)
        {
            for (var i = 0, ii = thumbs.length; i < ii; i++)
            {
                if (thumbs[i].title && thumbs[i].title.length > 0)
                {   
                    var imgtitle = thumbs[i].title;
                    $(thumbs[i]).wrap('<div id="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
                }                   
            }
        }
        $('#wrapperGal').hover(

            function()
            {
                $(this).find('img').toggleClass("galGrey");
                $(this).find('.caption').animate({opacity: "1"}, 300);
            },

            function()
            {
                $(this).find('img').removeClass("galGrey");
                $(this).find('.caption').animate({opacity: "0"}, 300);
            }       
        );

What this does is to find the gallery, apply a wrapper around the gallery image and when hovering over the item it goes grayscale and you get a title div (with .caption class) on top of the existing gallery thumb. The gallery consists of 9 thumbnails and the script applies the wrapper and caption to all existing gallery items however i only get the hover effect over the first thumbnail.

This is an example of the gallery HTML:

<div class="one-third column alpha">
        <a title="t1" class="fancybox" rel="group" href="../img/galeria/big1.jpg"><img src="../img/galeria/thumb1.jpg" title="t1"/></a>
        </div>

        <div class="one-third column">
        <a class="fancybox" rel="group" href="../img/galeria/big2.jpg"><img src="../img/galeria/thumb2.jpg" title="t2"/></a>
        </div>

        <div class="one-third column omega">
        <a class="fancybox" rel="group" href="../img/galeria/big3.jpg"><img src="../img/galeria/thumb3.jpg" title="t3"/></a>
        </div>

And this is the CSS I've got:

    #wrapperGal{
    width:288px; 
    height:210px; 
    position:relative;
}

#wrapperGal img{
    -webkit-transition: 0.5s;  
    -moz-transition: 0.5s;  
    -o-transition: 0.5s;
    transition: 0.5s;
}

.galGrey{
    -webkit-filter: grayscale(100%);
}

.caption{
    height:190px;
    position:relative;
    top:20px;
    opacity:0;
    background-image:url(../img/galeria/thumbRoll.png);
}

.caption span.title{
    width:288px;
    height:190px;
    padding-top:157px;
    overflow:hidden;
    position:absolute;
    text-align:center;
}

Any idea why this happens?

@MilindAnantwar, only a missing .woff font but that doesn't implicate with any of this code. — Paulo, Feb 26 '13 at 17:54

score 0 · Accepted Answer · answered Feb 26 '13 at 18:12

Because you used id as selector for wrapper. Same id cannot apply to different elements.

Working demo: http://jsfiddle.net/indream/QxuPm/

    for (var c = 0, count = gallery.length; c < count; c++)
    {
        for (var i = 0, ii = thumbs.length; i < ii; i++)
        {
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {   
                var imgtitle = thumbs[i].title;
                $(thumbs[i]).wrap('<div class="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
            }                   
        }
    }
    $('.wrapperGal').hover(

        function()
        {
            $(this).find('img').toggleClass("galGrey");
            $(this).find('.caption').animate({opacity: "1"}, 300);
        },

        function()
        {
            $(this).find('img').removeClass("galGrey");
            $(this).find('.caption').animate({opacity: "0"}, 300);
        }       
    );

jQuery + CSS gallery hover effect

1 Answers1