how to generalize a click function in jquery

Question

I have 13 small pictures and 13 big pictures,if any of the small pictures are clicked it'll show the related big picture, I was just wondering if it was possible to generalize the click function so I don't have to repeat the dame code 13 times, thanks

<div id="press_images">

                <img id="s1" class="small" src="images/press/small/1.png" />
                <img id="s2" class="small" src="images/press/small/2.png" />
                <img id="s3" class="small" src="images/press/small/3.png" />
                <img id="s4" class="small" src="images/press/small/4.png" />

                .....
                <img id="s13" class="small" src="images/press/small/13.png" />
</div>

<div class="big">     
               <a id="close">X</a>
               <img id="b1" src="images/press/big/1.jpg" />
               ......
               <img id="b13" src="images/press/big/13.jpg" />
</div>


$("#s1").click(function(){  

  $('#b1').show();
  $('.big').show(300);
      return false;  
   });

so I was wondering if I could change the $("#s1").click(function() so I don't have to repeat it 13 times.

thanks

Answer 1

Bind click() event to a list of elements or to their parent.

Answer 2

Try this

// For all <img>'s with class `small`
$("img.small").click(function() {
    // Get the index from the small image's ID
    var index = this.id.substr(1);
    // Hide all other big images
    $(".big img").hide()
    // Show the related big images
    $('#b' + index).show();
    // Show the big image container
    $('.big').show(300);

    return false;
});

Answer 3

Put a class in every image. for example:

<img id="s1" class="small clickable-image" src="images/press/small/1.png" />

And then:

$(".clickable-image").click(function(){  

  $('#b1').show();
  $('.big').show(300);
  return false;  
});

EDIT: then of course, you have to change the line $('#b1').show(); but, it's easy, you just have to get the element ID and build the ID of the bigger image. Just like Justin Johnson does in his answer.

Answer 4

The following should work :

$(".small").click(function(){  
      var id_img=$(this).attr('id').replace('s','');
      $('.big img').hide();
      $('#b'+id_img).show();
      $('.big').show(300);
      return false;  
});

Answer 5

<div id="press_images">

                <img id="small1" class="small small-img"  src="images/press/small/1.png" />
                <img id="small2" class="small small-img" src="images/press/small/2.png" />
                <img id="small3" class="small small-img" src="images/press/small/3.png" />
                <img id="small4" class="small small-img" src="images/press/small/4.png" />

                .....
                <img id="small13" class="small small-img" src="images/press/small/13.png" />
</div>

<div class="big">     
               <a id="close">X</a>
               <img id="big1" class="big-img" src="images/press/big/1.jpg" />
               ......
               <img id="big13" class="big-img" src="images/press/big/13.jpg" />
</div>


$(".small-img").click(function(e){ 

  var imgBig = String($(this).attr("id")).replace("small", "big");

  e.stopPropagation();
  $(".big-img").hide();
  $("#" + imgBig ).show();
  $(".big").show(300);

});

Answer 6

That's how I'd do it:

<div id="press_images">
      <img id="s1" rel="b1" class="small" src="images/press/small/1.png" />
      <img id="s2" rel="b2" class="small" src="images/press/small/2.png" />
</div>

<div class="big">     
      <a id="close">X</a>
      <img id="b1" class="big" src="images/press/big/1.jpg" />
      <img id="b2" class="big" src="images/press/big/2.jpg" />
</div>


$(".small").click(function(){  
  $( ".big img" ).hide();
  $( "#"+ $(this).attr("rel") ).show();
}

Notice that I use "rel" to link the elements. I consider it to be cleaner than assuming that b1 is related to s1. I like CoC, but I'm not sure that in that case it'd be the best idea.

Answer 7

The most flexible option is to use index and eq and get rid of all explicit html helpers, like ID or rel

$('#press_images img').click(function() {
 var n = $('#press_images img').index(this);
 $(".big img").hide().eq(n).show()
});