0

ロールオーバー時に src を変更するためにロールオーバーを取得しようとしています。バグがありますが、これは正常に機能しています。サムネイルをクリックした後、src に間違った src が含まれることがあります (マウスアウトしてもロールオーバー状態が維持されます)。. バグを見つけるには、いくつかのサムネイルをクリックしてマウスオーバーすると、既にクリックされたもののロールオーバー src が残っていることがわかります。デモは利用できなくなりました。申し訳ありません。

jQuery -

function image_gallery (){

if ($('ul.thumbs').length > 0) {
    $('.gallery').each(function(){
        $('ul.thumbs li img:gt(0)').addClass('unselected');
        $('ul.thumbs li img:eq(0)').addClass('selected');

        function mouse_overs () {
            var unselected = $('li img.unselected');
            unselected.hover(function(){
                    var thumb = $(this);
                    thumb.attr('src',thumb.attr('src')
                           .replace(/([^.]*\d)\.(.*)/, "$1r.$2"));
                }, function(){
                      var thumb = $(this);
                  thumb.each(function(){
                      $(this).attr('src',$(this)
                           .attr('src').replace('r.jpg','.jpg'));
                  });
            });
        };
        mouse_overs();
        var img_main = $(this).find('img.main:first');
        $(this).find('ul.thumbs img').each(function(){
            $(this).click(function(){
                var thumb =  $(this);
                var src = thumb.attr('src');
                if ( src.indexOf('r.jpg') == -1) {
                     $(this).attr('src',thumb.attr('src')
                                .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                }
                var selected = $('ul.thumbs li img.selected');

                // previous img remove r.jpg
                selected.attr('src',selected.attr('src')
                                    .replace('r.jpg','.jpg'));
                  selected.removeClass('selected');
                selected.addClass('unselected');

                //current thumb add class "selected", remove "unselected"
                thumb.addClass('selected');
                thumb.removeClass('unselected');
                mouse_overs();
                var rel = $(this).parent('a').attr('rel');
                img_main.fadeOut(500, function(){
                    img_main.attr('src', rel);
                    img_main.fadeIn('slow');
                });

                thumb.mouseout(function(){
                    var src = $(this).attr('src');
                    if ( src.indexOf('r.jpg') == -1) {
                        $(this).attr('src',thumb.attr('src')
                                      .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                    }
                    else return false;
                });
            });
});
    });
   }
}

HTML:

<div class="gallery">
<img class="main" src="images/gallery/yes-campaign/NL1.jpg"/>
<ul class="thumbs">
        <li><a rel="images/gallery/yes-campaign/NL1.jpg"><img src="images/thumbs/yes-campaign/NL-1r.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL2.jpg"><img src="images/thumbs/yes-campaign/NL-2.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL3.jpg"><img src="images/thumbs/yes-campaign/NL-3.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL4.jpg"><img src="images/thumbs/yes-campaign/NL-4.jpg"/></a></li>
    </ul>
</div>

この HTML は、ページ全体で何度も繰り返されます。ロールオーバーの状態は NL1r.jpg、NL2r.jpg などです。画像はフォルダーに整理されるため、すべての画像ファイル名は同じ命名規則を使用します。

4

2 に答える 2

1

あなたの代わりに次のコードを提案できますか?

$(function gallery (){

        var transparency = .5;
        var selectedClassName = 'selected';
        var imageFadeSpeed = 'fast';

        $('.gallery').each(function(i, gallery) {
            var $gallery = $(gallery);

            var $main = $gallery.find('.main');

            $gallery.find('.thumbs a')

                // image preloader
                .each(function(){
                    var tempImg = $('<img src="'+ $(this).attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body').hide();
                })

                .hover(function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', 1);
                }, function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', transparency);
                })

                .click(function(ev) {
                    ev.preventDefault();

                    var self = $(this);

                    $main.fadeOut(imageFadeSpeed, function() {                      
                        var tempImg = $('<img src="'+ self.attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body');
                        var newHeight = tempImg.height();
                        tempImg.remove();

                        $(this)
                            .attr('src', self.attr('rel'))
                            .height(newHeight);

                        $(this).fadeIn(imageFadeSpeed);
                    });

                    $gallery.find('.'+selectedClassName)
                        .removeClass(selectedClassName)
                        .children()
                        .css('opacity', transparency);

                    self
                        .addClass(selectedClassName)
                        .children()
                        .css('opacity', 1);
                    return;
                })

                .children()
                .css('opacity', transparency)
                .end()

                .filter(':first')
                .addClass(selectedClassName)
                .children()
                .css('opacity', 1);
        });
});

ホバー時の画像スワップを、サーバーの負荷を軽減する不透明度の変更に置き換えましたが、これらを src スワップに簡単に置き換えることができます。「r.jpg」で終わる画像のみを使用する必要があります。

また、いくつかの構成変数を引き出したので、少し遊んでみることができます。

于 2009-11-03T21:49:23.943 に答える
0

マットはスクリプトで素晴らしい仕事をしたと思いますが (+1)、GalleryView プラグイン(デモはこちら) を使用することをお勧めします。

私もまだ勉強中なので、以下の仮定が正しくない可能性があります。間違っている場合はお気軽に修正してください。しかし、コードをもう一度見てから、次のコメントを追加したいと思いました。

  • mouse_overs 関数は、最初の「選択されていない」クラスを修正するようです。これを回避する最善の方法は、jQuery の「ライブ」イベント ハンドラを使用することです。このようにして、選択したクラスを選択解除したり、その逆に変更したりすると、ライブ イベントが更新されます (注: ホバーは現在のバージョンの jquery ではサポートされていないため、mouseover と mouseout を使用する必要があります)。また、ホバーのマウスオーバー部分が 3 回呼び出されているようにも見えますが、これも関連している可能性があります。
  • 置換機能で使用される正規表現が正しく機能していません。サムネイルをクリックして画像を切り替えた後、mouseout (thumb.mouseout 関数によるもの) するとすぐに、URL が静的という単語の末尾に r を追加し始めたことに気付きました...約 10 回のマウスアウトの後、私は最終的にこの URL " http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg " になりました。正規表現がよくわからないので、これを修正する手助けはできません。
  • URL を変更する代わりに、マットが提案したように不透明度を使用する方がはるかに簡単ですが、別の画像を使用する場合は、URL を img の rel 属性に保存し、そのように切り替えるだけです。 URL で問題が発生する可能性が低くなります。
于 2009-11-03T22:38:07.150 に答える