1

画像ギャラリーに問題があります。ロールオーバー効果を実現するために、次のjQueryスクリプトを使用しています。

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

これは、ギャラリーを見つけ、ギャラリー画像の周りにラッパーを適用し、アイテムにカーソルを合わせるとグレースケールになり、既存のギャラリーサムの上にタイトルdiv（.captionクラス付き）が表示されます。ギャラリーは9つのサムネイルで構成されており、スクリプトはラッパーとキャプションを既存のすべてのギャラリーアイテムに適用しますが、最初のサムネイルの上にホバー効果しかありません。

これはギャラリー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>

そしてこれは私が持っているCSSです：

    #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;
}

なぜこれが起こるのか考えていますか？

4

1 に答える 1

0

idラッパーのセレクターとして使用したためです。同じIDを異なる要素に適用することはできません。

作業デモ： 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);
        }       
    );
于 2013-02-26T18:12:46.883 に答える