jquery Roll Verwirrung

Question

Der Versuch, meine Rollovers zu bekommen src auf Rollover zu ändern. Dies funktioniert ok, obwohl es ein Fehler ist. Nachdem ich auf eine Miniaturansicht geklickt haben, manchmal die src die falsche src enthalten (die Rollover-Status bleibt auch auf mouseout). . Um den Fehler zu finden, klicken Sie auf ein paar Thumbnails und Mouseover ein paar, sollten Sie die Rollover-src sehen bleiben für diejenigen, die bereits angeklickt haben. Demo ist nicht mehr verfügbar, sorry!

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

Der HTML-Code:

<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>

Diese HTML werden verschiedene Zeiten während der Seite wiederholt. Die Rollover-Zustände sind NL1r.jpg, NL2r.jpg usw. Die Bilder werden in Ordnern organisiert, so dass alle Bilddateinamen die gleiche Namenskonvention verwenden.

Answer 1

Kann ich vorschlagen, den folgenden Code anstelle von Ihnen?

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

Ich habe Ihr Bild Swap auf schweben mit einer Opazität Änderung ersetzt, die auf Serverbelastung verkürzt sich, aber man konnte leicht diese ersetzen mit src Swapping. Sie werden die Bilder mit der „r.jpg“ endet, nur verwenden müssen.

Ich habe zog auch einige Konfigurationsvariablen, so dass Sie mit den Dingen ein wenig herumspielen können.

Answer 2

Obwohl ich glaube, Matt einen tollen Job mit dem Skript tat (+1 dafür), würde ich noch empfehlen die Galerie Plugin ( Demo hier ).

---

Ich lerne immer noch so gut, so dass ich nicht in meinen Annahmen korrekt sein unten so fühlt sich frei, mich zu korrigieren, wenn ich falsch bin. Aber nach noch einen Blick auf den Code nehmen, wollte ich diese Kommentare hinzufügen:

• Ihre mouse_overs Funktion erscheint die anfänglichen „nicht ausgewählten“ Klassen zu beheben. Der beste Weg, um es wäre jQuery zu verwenden „ Live “ Event-Handler. Auf diese Weise, wenn Sie Ihre ausgewählte Klasse zu nicht ausgewählten ändern, oder umgekehrt, wird das Live-Ereignis aktualisieren (Hinweis: Hover ist nicht mit der aktuellen Version von jQuery unterstützt, so würden Sie Mouseover- und mouseout verwenden müssen). Es scheint auch, dass der Mouseover-Teil der Hover-3-mal genannt wird, die auch in Zusammenhang stehen könnte.
• Die Regex in der Funktion ersetzen verwendet wird, nicht richtig funktioniert. Nach dem Klick auf ein Thumbnail um das Bild zu wechseln, bemerkte ich, dass, sobald Sie mouseOut (die von der thumb.mouseout Funktion ist), begann die URL r die bis zum Ende des Wortes statisch ... nach etwa 10 mouseouts Hinzufügen I endete mit dieser URL " http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg " . Ich weiß nicht, meinen regexp sehr gut, so kann ich dir nicht helfen, dieses Problem zu beheben.
• Anstatt die URL zu modifizieren, es wäre viel einfacher zu tun, wie Matt vorgeschlagen und Opazität verwenden, aber wenn Sie ein anderes Bild verwenden möchten, würde ich die URL speichern in der rel-Attribut des img und es einfach so wechseln, dann wäre es weniger likey für ein Problem mit der URL auftreten werden.