How is it right to handle a single element of the gallery?

[carriann]

There's a small, simple gallery, pressing the link to change the picture, but... The fact is that such blocks are numerous and, when applied to the reference in one unit, the shift occurs in all 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>

[rielyn]

What's changed?

We're in. $('.gallery').each(function() {♪ HTML changed accordingly.

small and big variables added ,thisSo we're pointing out .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>