Impliment the animation on click only at the first click?

Question

I have multiple anchor tags with a rel="<img src"#"/>" .

When I click on any <a></a> , I show a large image in another div with the rel value using a fadeIn effect.

What I want to do is check if the large image has the same src as the rel of the anchor and prevent the fadeIn effect if so.

 $(document).ready(function () {

   $("a.largeimg").click(function () {
     var image = $(this).attr("rel");           
     $('.main-product-image').html('<img src="' + image + '"/>');
     $('.main-product-image img').hide();
     $('.main-product-image img').fadeIn();
     return false;

     if(src == image) {

      $('.main-product-image img').show();

     }

   });

Answer 1

You can check if the rel of the anchor and the src of the image are the same and if so escape the function before the fade in code, like so:

var src = $('.main-product-image img').attr("src");
if (src == image) return false;

Answer 2

If I understand you question correctly, before the animation you need to confirm if the src of the image is equal to the rel attribute of the clicked element, thus preventing the animation!

JQUERY

$(document).ready(function () {

  // use bind when targeting many elements
  $("a.largeimg").bind("click", function () {

    var $target = $('.main-product-image'),         // target element
        src     = $target.find('img').attr("src"),  // src from existent image
        image   = $(this).attr("rel");              // rel from clicked element

    // if src different from image
    if (src != image) {
      $target.html('<img src="' + image + '"/>');   // append new image
      $target.find('img').hide().fadeIn();          // perform the animation
    }

    // prevent the browser from continuing to bubble the clicked element
    return false;
  });
});

Ps:

Not tested, but should work just fine!