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?