Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade in images onload

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #38180
    brent_james
    Member

    I researched a couple different sites and have tried a few scripts, but is there a simple script I can add to a page to have the #content images fade in while they load?

    instead of seeing the images jump around while they load?

    #103365
    TheDoc
    Member

    You’ll want to use something like ImagesLoaded or Lazy Load.

    #103369
    brent_james
    Member

    I tried the css and got it to sort of work, but I’m not sure how to insert the html because it is for multiple photo posts. Is there a way to insert it properly into the {block:Photo} post area?

    #103373
    TheDoc
    Member

    Ahhhhh – I see what you’re doing.

    Just set the content’s opacity to zero, then in your Masonry callback set it to 1.

    #103375
    brent_james
    Member

    K i get ho to set opacity for the content, but sorry I’m not sure how to set a callback with Masonry.

    #103374
    TheDoc
    Member

    Looks like Masonry doesn’t have a ‘callback’ per se, so you can do this:

    $container.imagesLoaded(function() {
    $('#content').masonry();
    $("#content").animate({opacity: 1});
    });

    You’ll need to change the selectors to whatever you are using – this is just from a theme I did.

    #103416
    brent_james
    Member

    tumblr

    #103439
    brent_james
    Member

    I am really new with script and jquery so bare with me.
    This what I have:

    The concept I am going for is the page starts out almost hidden then fades in to opacity:1 while loading, but whenever I try adding a script it just doesn’t apply to the layout. Is there something overriding it…maybe?

    #103488
    brent_james
    Member

    Does external script override script directly in the page?

    #103500
    Taufik Nurrohman
    Participant

    I would suggest using .show(), when the image has been loaded, trigger the masonry:

    img.photo {display:none;}
    $(function() {
    $('img.photo').one("load", function() {
    $(this).show(1000, function() { // Show the image when loaded
    $(this).parents('#content').masonry({ // After that, trigger the .masonry()
    itemSelector:"div.post",
    isAnimated:true
    });
    });
    }).each(function() {
    if(this.complete) {
    $(this).load();
    }
    });
    });

    PS:Add clear:both to your pagination:

    #pagination {
    ...
    clear:both;
    }
    #103503
    brent_james
    Member

    Hompimpa thank you!

    This has been the closest anyone has come to getting this to work, when the page loads i see the fadein effect on one of the elements see here, but the actual photos still aren’t showing up once the page loads.

    #103511
    Taufik Nurrohman
    Participant

    Try to put the JQuery and plugin before that function above. Like this:



    #103523
    brent_james
    Member

    {solved} You are a lifesaver, thanks.

    #112840

    so does that mean this is right?

    I can’t get this code to work. (please correct it for me, I’m not sure which part needs changing, I’v followed everything here!)

    #112842

    :)

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.