Question

I am doing an image gallery viewer, with little thumbnails, one medium-sized viewer, and if you click on that viewer, it fadeIn a div that displays image in full size.

Here is a screenshot:

My problem is that when I click on a little thumbnail, then I click on the medium-sized photo, i.e. mediumpic (in order to fadeIn() the invisible div), jQuery fails in executing html() and fadeIn(). However, it works only when document is ready (that is, with photo#1 that was loaded in the viewer by default). But when I click on any of those little thumbnails, it ruins it. What is happening there?

My HTML is the following:

echo "<div class='largepic_div'></div>";
echo "<div class='viewer'><img class='mediumpic'src='upload/photos/".$dbphoto1."'></div>
echo "<div class='allpics'>";

echo "<div class='thumbnail_viewer'><img class='thumbnail_item' 
src='upload/photos/".$dbphoto1."' height='60'></div>";

echo "<div class='thumbnail_viewer'><img class='thumbnail_item' 
src='upload/photos/".$dbphoto2."' height='60'></div></div>";

My jQuery is the following:

$(document).ready(function() {

$('.thumbnail_item').click(function(){

    $('.viewer').html("<img class='mediumpic' src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>");

    });

$('.mediumpic').click(function(e){
    e.stopPropagation();
    $('.largepic_div').html("<img src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>").fadeIn();

    });

$('body').click(function(){
        $('.largepic_div').fadeOut();
        }); 
});

Answer 1

You are assigning the click handler to mediumpic on document ready, but when you click the thumbnail, you are removing the img element and replace it by a new one… therefore the handler is no longer attached.

You can either attach the handler again after you click on the thumbnail, or keep the original element and just replace the src of the img element (instead of using .html()).

UPDATE 1:

Method 1:

$('.thumbnail_item').click(function(){
    $('.viewer').html("<img class='mediumpic' src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>");
    $('.mediumpic').click(mediumpicHandler);
});

$('.mediumpic').click(mediumpicHandler);

var mediumpicHandler = function(e){
    e.stopPropagation();
    $('.largepic_div').html("<img src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>").fadeIn();
}

Method 2:

$('.thumbnail_item').click(function(){
    $('.viewer img').attr("src","upload/photos/"+ $(this).attr('src').split('/')\[2\]);
});

Warning: I didn’t actually test the above code… it’s just an idea on where to take it.

UPDATE 2:

I just showed how to fix the problem with the thumbnail/medium pic interaction… you would need to apply the same fix to the medium/large pic interaction too.