it-swarm.com.de

jQuery Mini Slider, generieren Sie eine eindeutige ID

Auf meiner Joomla-Site verwende ich eine jQuery-Galerie, in der es zwei Instanzen gibt.

Das Problem ist, dass beim Bewegen des Mauszeigers auf ein Miniaturbild, das als Hauptbild angezeigt werden soll, dieses Bild in beiden Galerien angezeigt wird.

Hier ist mein 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>

Wie kann ich das verhindern?

2

Dies liegt daran, dass beide Schieberegler die gleichen Klassen verwenden. Ich würde vorschlagen, dass Sie beim Schweben zuerst das äußere übergeordnete Element finden und dann das Bild wie folgt ausrichten:

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

});

Beachten Sie, dass ich ein paar kleine Änderungen vorgenommen und dies nicht getestet habe.

Sie scheinen auch den Code, den Sie in Ihrer Frage gezeigt haben, zweimal zu verwenden. Entfernen Sie beide Instanzen und ersetzen Sie sie durch das, was ich Ihnen gegeben habe.

Lass mich das Ergebnis wissen.

2
Lodder