jquery capotage confusion

Question

Essayer d'obtenir mes renversements de changer src lors du survol. Cela fonctionne bien, mais il y a un bug. Après que j'ai cliqué sur une vignette, le src peut contenir parfois le mauvais src (l'état de retournement reste même sur mouseout). . Pour trouver le bug, cliquez sur quelques vignettes et mouseover quelques, vous devriez voir le src de capotage pour rester ceux qui ont été cliqués déjà. Demo est plus disponible, désolé!

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

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

Ce code HTML est répété plusieurs fois tout au long de la page. Les états de roulement sont NL1r.jpg, NL2r.jpg etc. Les images sont organisées dans des dossiers, de sorte que tous les noms de fichiers d'image utilisent la même convention de nommage.

Answer 1

Puis-je suggérer le code suivant au lieu du vôtre?

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

Je l'ai remplacé votre swap image sur vol stationnaire avec un changement d'opacité qui permet de réduire la charge du serveur, mais vous pouvez remplacer facilement ces derniers avec swapping src. vous aurez besoin d'utiliser les images avec le « r.jpg » se termine seulement.

J'ai aussi tiré quelques variables de configuration afin que vous puissiez jouer avec les choses un peu.

Answer 2

Bien que je pense que Matt a fait un excellent travail avec le script (+1 pour cela), je recommande d'utiliser encore GalleryView plug-in ( Demo ).

---

Je suis encore à apprendre aussi bien, donc je ne peux pas être correct dans mes hypothèses ci-dessous ne hésitez pas à me corriger si je me trompe. Mais après avoir pris un autre regard sur votre code, je voulais ajouter ces commentaires:

• Votre fonction mouse_overs semble fixer les premières classes « » non sélectionnés. La meilleure façon de contourner ce serait d'utiliser gestionnaire d'événements « live » jQuery. De cette façon, lorsque vous modifiez votre classe sélectionnée pour non sélectionnée, ou vice-versa, l'événement en direct sera mise à jour (Note: hover n'est pas pris en charge avec la version actuelle de jquery, de sorte que vous auriez à utiliser et mouseover mouseout). Il apparaît également que la partie mouseover du vol stationnaire est appelé 3 fois ce qui pourrait également être liée.
• Les regex utilisés dans la fonction de remplacement ne fonctionne pas correctement. Après avoir cliqué sur une vignette pour changer l'image, j'ai remarqué que dès que vous mouseOut (ce qui est de la fonction thumb.mouseout), l'URL a commencé à ajouter r à la fin du mot statique ... au bout d'environ 10 mouseouts, je fini avec cette URL " http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg " . Je ne sais pas très bien mon expression rationnelle, donc je ne peux pas vous aider à corriger cela.
• Au lieu de modifier l'URL, il serait beaucoup plus facile de faire comme Matt suggéré et utiliser l'opacité, mais si vous souhaitez utiliser une autre image, je voudrais stocker l'URL dans l'attribut rel du img et il suffit de mettre cette façon, alors il serait moins likey pour un problème de se produire avec l'URL.