web-dev-qa-db-fra.com

jquery mini slider, génère un identifiant unique

Sur mon site Joomla, j'utilise une galerie jQuery, où il y a 2 instances.

Le problème est que lorsque vous passez la souris sur une vignette pour l'afficher en tant qu'image principale, elle affiche cette image sur les deux galeries.

Voici mon code:

JS:

jQuery(document).ready(function(){
    jQuery(".cars-img img").attr("src", jQuery(".img-log img").eq(0).attr("src"));
    jQuery(".img-log img").eq(0).attr("class", "active");
    jQuery(".img-log img").hover(function(){
        jQuery(".cars-img img").attr("src", jQuery(this).attr('src'));
        jQuery(".img-log img").removeAttr("class", "active");
        jQuery(this).attr('class', 'active');
    });
});

HTML:

<div class="cars-img">                  
    <img src="big image link" alt=""/>
</div>
<div class="img-smol">
    <div class="img-log">
        <a href="#">
            <img src="small image link" alt=""/>
        </a>
    </div>
</div>

Comment puis-je empêcher cela?

phpjquery
2
Gocha Gochitashvili

En effet, les deux curseurs utilisent les mêmes classes. Je suggèrerais qu'en vol stationnaire, vous trouvez d'abord le parent externe, puis ciblez l'image, comme suit:

jQuery(document).ready(function($){

    var container = $('.carmrg');
    var first     = container.find('.img-log img').eq(0);

    container.find('.cars-img img').attr('src', first.attr('src'));
    first.addClass('active');

    $('.img-log img').hover(function(){

        var $self  = $(this);
        var parent = $self.parents('.carmrg');

        parent.find('.cars-img img').attr('src', $self.attr('src'));
        parent.find('.img-log img').removeClass('active');
        $self.addClass('active');
    });

});

Remarque, j'ai fait quelques petites modifications et je n'ai pas testé cela.

Vous semblez également utiliser deux fois le code que vous avez indiqué dans votre question. Supprimez les deux instances et remplacez-les par ce que je vous ai donné.

Laissez-moi savoir le résultat.

2
Lodder