2

On my Joomla site, I am using a jQuery gallery, where there are 2 instances of it.

The problem is that upon hovering on a thumbnail to show as the main image, it shows that image on both galleries.

Here is my 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>

How can I prevent this from happening?

1 Answer 1

2

This is because both sliders are using the same classes. I'd suggest that on hover, you find the outer parent first, then target the image, like so:

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

});

Note, I've made a few small tweaks and haven't tested this.

You also appear to be using the code you showed in your question twice. Remove both instances and replace with what I've given you.

Let me know the result.

8
  • thank you this works good! but now is small bug, now big images is The same before hover, see demo kulinari.ge/4x4/en/cars Apr 8, 2016 at 10:19
  • You need to do this in the HTML: <img src="FIRST IMAGE HERE" alt=""/>
    – Lodder
    Apr 8, 2016 at 10:29
  • I already have this width php <img src="<?php echo $actual_link ?><?php echo $value[0]; ?>" alt=""/> Apr 8, 2016 at 10:32
  • can you please add <?php var_dump($value[0]); ?>. The images should be different. I don't know how you're setting $value[0] though so kind of hard to tell
    – Lodder
    Apr 8, 2016 at 10:34
  • For the 2nd slide, try using <?php echo $value[12]; ?> instead, as 0 will call the first image
    – Lodder
    Apr 8, 2016 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.