CODEWITHSUNDEEP
javascriptjquery
parte bena
parte bena

Reputation: 25

imagesLoaded plugin not working

Here is my attempt, which is not working. It fires, but imagesloaded does not 'fade in'

Jsfiddle attached: http://jsfiddle.net/NgwTa/

    var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>";


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

    $('.container').imagesLoaded(function(){
        $('.box').html(insert);
    });


});

Upvotes: 0

Views: 3832

Answers (4)

Mark
Mark

Reputation: 2221

The issue is you are asking the container if all your images have loaded before any images have been appended. Therefore the function is running instantaneously.

Try running your imagesLoaded plugin after the append.

Fade in after all images have loaded:

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

    // Hide the box and insert the images
    $('.box').hide().append(insert);

    // Wait for the images to load
    $('.container').imagesLoaded(function(){
        $('.box').fadeIn();
    });

});

JSFiddle: http://jsfiddle.net/G2684/

Fade individual images as they load:

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

    $('.box').append(insert);
    $('.thediv img').hide();

    $('.container').imagesLoaded().progress(function(instance, image){
        $(image.img).fadeIn();
    });

});

JSFiddle: http://jsfiddle.net/G2684/1/

Upvotes: 1

William Craig
William Craig

Reputation: 136

imagesloaded plugin is not for fading images. It just throws a callback when an image has been loaded to your browser.

Yo need to add an extra line on your css to hide the images first. 

.thediv img {
width:300px;
height:200px;
display:none}

Then include a fadeIn to your image on your script.

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

    $('.container').imagesLoaded(function(){
        $('.box').html(insert);
        $('.thediv img').fadeIn();
    });


});

Here's a JSfiddle

Upvotes: 1

Michał Szałapski
Michał Szałapski

Reputation: 331

Easiest way

   $('.clickit').click(function(){
        $('.box').html(insert);
        $('.container img').load(function(){
              $('.container').fadeIn("slow");
        });
    });

on jsfiddle

http://jsfiddle.net/NgwTa/6/

Upvotes: 0

Black Sheep
Black Sheep

Reputation: 6694

Look this JSfiddle

Code:

var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>";

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

    $('.container').imagesLoaded(function(){
        $('.box').hide().html(insert).fadeIn();
    });
});

You have to declare the fadeIn() and hide() first and the can you set the result into a fadeIn()

Upvotes: 0

Related Questions