CODEWITHSUNDEEP
jquery
loriensleafs
loriensleafs

Reputation: 2255

jquery function only works once through

I have a gallery type page with thumbnails. When you click a thumb it loads the images having to do with that thumb into a hidden div, when they're done loading then div then slides open. If you click another thumb it closes the div, clears the contents, loads the new content and then opens it again. When you load the page you can click one thumb, then another, but if you go back to the first thumb and click the div won't open again, not sure why. Thanks for any help on this.

I have a jsbin of it set up here http://jsbin.com/epawub/12/edit

the javascript I have set up for the thumbs is as follows:

var imgCount = 0;
var image=$('#images');

$('#klossviolins').click(function() {
  console.log("Loading...");
  $('#images').slideUp(500, function() {
    $("#images").empty().ready(function(){ 
        $("<img>", {
            src: "http://www.klossal.com/images/klossviolins/home.jpg"
        }).appendTo("#images").load(onImage);
        $("<img>", {
            src: "http://www.klossal.com/images/klossviolins/services.jpg"
        }).appendTo("#images").load(onImage);
    });     
  });
  $("#info_header").empty();
  $('#info_header').append("Kloss Violins Website");
});


$('#light_dance').click(function() {
  console.log("Loading...");
  $('#images').slideUp(500, function() {
    $("#images").empty().ready(function(){ 
        $("<img>", {
            src: "http://www.klossal.com/light_dance_1.jpg"
        }).appendTo("#images").load(onImage);
        $("<img>", {
            src: "http://www.klossal.com/light_dance_var.png"
        }).appendTo("#images").load(onImage);
        $("<img>", {
            src: "http://www.klossal.com/light_dance_2.jpg"
        }).appendTo("#images").load(onImage);  
    });     
  });
  $("#info_header").empty();
  $('#info_header').append("Dancing With Light Series");
});




function onImage(e)
{
    console.log("Image loaded");
    imgCount++;

    if (imgCount == image.children().length)
    {
        image.slideDown(500);
    }
}

Upvotes: 2

Views: 154

Answers (1)

Kevin B
Kevin B

Reputation: 95062

You must bind to the load event before you set the image's src value, otherwise the load event will trigger before you bind to it if the image is cached.

$("<img>").load(onImage).attr("src","http://www.klossal.com/light_dance_1.jpg").appendTo("#images");
// repeat for all similar

Also, make sure you reset imgCount back to 0.

...
if (imgCount == image.children().length)
{
    image.slideDown(500);
    imgCount = 0;
    ...

Upvotes: 2

Related Questions