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?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
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
    – Gocha Gochitashvili
    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=""/>
    – Gocha Gochitashvili
    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 that you have read and understand our privacy policy and code of conduct.

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