Question

尝试让我的翻转在翻转时更改src。虽然有一个bug，但这工作正常。单击缩略图后，src有时可能包含错误的src（即使在mouseout上，翻转状态仍然存在）。。要查找错误，请单击几个缩略图并鼠标悬停一些，您应该看到已经单击已经点击的滚动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等。图像按文件夹组织，因此所有图像文件名都使用相同的命名约定。

Answer 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”结尾的图像。

我还提取了一些配置变量，这样你就可以玩一些东西了。

Answer 2

虽然我认为Matt在剧本上做得非常好（+1为此），但我仍然建议使用GalleryView plugin（Demo here）。

我还在学习，所以在下面的假设中我可能不正确，所以如果我错了，请随意纠正我。但在再看一下你的代码后，我想添加这些评论：

您的mouse_overs函数似乎可以修复初始的“未选定”类。最好的方法是使用jQuery的“live”事件处理程序。这样，当您将所选类更改为未选中时，反之亦然，实时事件将更新（注意：当前版本的jquery不支持悬停，因此您必须使用鼠标悬停和鼠标移除）。似乎悬停的鼠标悬停部分被称为3次，这也可能是相关的。
替换功能中使用的正则表达式无法正常工作。在点击缩略图切换图像之后，我注意到，只要你鼠标输出（来自thumb.mouseout函数），URL开始将r添加到单词static的末尾...大约10个mouseout后，我最终得到了这个网址“http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg”。我不太了解我的正则表达式，所以我无法帮你解决这个问题。
而不是修改URL，它会像Matt建议的那样容易，并且使用不透明度，但是如果你想使用不同的图像，我会将URL存储在img的rel属性中，只需按照这种方式切换，那么使用URL发生问题就不那么容易了。

jquery翻转混乱

2 个答案: