Question

I have two thumbnails in <a> tag by clicking them another image (main image) src will change to <a> hrefs tag to show fullsize image.

The function works, but problem is that when I track the function It will repeat relatively to number of clicks.

If its 1st click it runs once, if its 2nd click it runs twice and so on. Here is my code:

<div class="wraptocenter"><img alt="" src=""  id="myim"  /></div>
  <a href="images/cam1.jpg" class="changemimg"> <img alt="" src="images/10.jpg"  /></a> 
   <a href="images/cam.jpg" class="changemimg" ><img alt="" src="images/9.jpg" /></a> 
   <img src="" id="hiddenimg" style="display:none" />



$(document).ready(function () {
    $(".changemimg").bind('click', set);
    function set() {
        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href")
        $("#hiddenimg").attr("src", path);
        $("#hiddenimg").load(function () { alert('hi'); $("#myim").attr("src", path); });
        return false;

    }
});

Thanks in advance for any suggestions!

Answer 1

Try:

$(document).ready(function () {
    $(".changemimg").bind('click', set);

    function set(e) {
       e.preventDefault();

        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href");
        var myimg = new Image();
        $(myimg)
            .load(function(){
                alert('hi');
                $('#myim').attr('src', path);
            })
            .attr('src', path);
    }
});

Here is a demo