There is a small simple gallery, you click on the link the picture changes, but the fact is that there are many such blocks and when you click on the link in one block, the change occurs in all the others.

<p> <p class='bigfoto'><a href="#"><img src="img/toy2.jpg"></a></p> <ul class='smallfoto'> <li><a href='img/toy2-g.jpg'><img src='img/round-color/green.png'></a></li> <li><a href='img/toy2-b.png'><img src='img/round-color/b.png'></a></li> <li><a href='img/toy2.jpg'><img src='img/round-color/red.png'></a></li> </ul> </p> <script> $(document) .ready(function () { var small = $(".smallfoto li img"), big = $(".bigfoto img"); small.each(function (i, el) { var next = i + 1 == small.size() ? 0 : i + 1; $(el) .click( function (event) { event.preventDefault(); if(big.data("next") == next) return; big.fadeTo(00, 0.1, function () { big.attr({ "src": $(el) .parent() .attr("href") }) .data({ "next": next }); }); big.fadeTo(800, 1); } ) }); big.data({ "next": 1 }) .click(function (event) { small.eq($(this) .data("next")) .click() }) }); </script>

    1 answer 1

    What changed?

    We wrap in $('.gallery').each(function() { . Accordingly, the HTML has also changed.

    small and big variables added ,this , thus we point to .gallery

     $(document).ready(function() { $('.gallery').each(function() { var small = $(".smallfoto li img", this), big = $(".bigfoto img", this); small.each(function(i, el) { var next = i + 1 == small.size() ? 0 : i + 1; $(el) .click( function(event) { event.preventDefault(); if (big.data("next") == next) return; big.fadeTo(00, 0.1, function() { big.attr({ "src": $(el) .parent() .attr("href") }) .data({ "next": next }); }); big.fadeTo(800, 1); } ) }); big.data({ "next": 1 }) .click(function(event) { small.eq($(this) .data("next")) .click() }); }); }); 
     <div class="gallery"> <p class='bigfoto'> <a href="#"> <img src="img/toy2.jpg"> </a> </p> <ul class='smallfoto'> <li> <a href='img/toy2-g.jpg'> <img src='img/round-color/green.png'> </a> </li> <li> <a href='img/toy2-b.png'> <img src='img/round-color/b.png'> </a> </li> <li> <a href='img/toy2.jpg'> <img src='img/round-color/red.png'> </a> </li> </ul> </div>