WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: jQuery Image Lazy Load WP] Custom loading of multiple rows of pictures (19 posts)

  1. davaobase
    Member
    Posted 4 years ago #

    Hi there,

    I love this plug-in so much. Thanks!

    Anyway, I'm writing because I was wondering if you can customize LazyLoad for me. I have a page that has a grid / table of pictures, with 7 images per row. Is there a way to lazy-load one picture at a time for every row made visible? Maybe a few milliseconds delay in loading each picture in the same row.

    Again, thanks for the help.

    http://wordpress.org/extend/plugins/jquery-image-lazy-loading/

  2. estevancarlos
    Member
    Posted 4 years ago #

    Edit this file: jq_img_lazy_load.php

    Look for the <script> tag and you'll find the proper code there.

    And base your customization off of the documentation here: http://www.appelsiini.net/projects/lazyload

    I don't know if you can perform the particular task you're asking about but you'll find your options there.

  3. einfachtimo
    Member
    Posted 4 years ago #

    hey,
    is there a way for excluding pages for the script? i don´t want to use lazy loading on my frontpage.

    thanks guys

  4. priyankanm
    Member
    Posted 4 years ago #

    Check the code below, this is a simple process. This works for me as I use most scripts directly on my php pages, but since you are using the lazyload plugin, I think you need to customize it to work in your situation.

    CODE:

    <head>
    <title> Your title </title>
    <script src="http://example.com/path/path/anyscript.js" type="text/javascript"></script>
    <?php
    if (is_page('home'))
    {?>
    <link type="text/css" rel="stylesheet" href="http://example.com/path/path/style.css" />
    <script src="http://example.com/path/path/homeonlyscript.js" type="text/javascript"></script>
    <?php } else { ?>
    <script src="http://example.com/path/path/yourlazyloadscript.js" type="text/javascript"></script>
    <script type="text/javascript">
    ETC ETC ETC
    </script>
    <?php } ?>
    <?php wp_head(); ?>
    </head>
  5. croseph
    Member
    Posted 4 years ago #

    Hi davaobase,

    Did you ever figure this out? I believe I am trying to do the same thing.

  6. pogodindenis
    Member
    Posted 4 years ago #

    Hi, my sidebar loading is too late.. How I can exclude all sidebar images from Lazy load?

  7. Lisardes
    Member
    Posted 4 years ago #

    I have the same problem to @pogodindenis

    my sidebar loading is too late.. How I can exclude all sidebar images from Lazy load?

  8. M7MOUD
    Member
    Posted 4 years ago #

    Same here as @pogodindenis @Lisardes

    How I can exclude all sidebar images from Lazy load?

  9. vaiumagasosa
    Member
    Posted 4 years ago #

    same here.
    how can we exclude sidebar images from Lazy load?
    any guess?

    thanks in advance
    antónio torres

  10. ayn
    Member
    Posted 4 years ago #

    how can we exclude sidebar images from Lazy load?

    Hi, I've received a few emails and blog comments on how to exclude something, so I figure I should post it here in addition to the comments at my blog post. To exclude something, all you have to do is to change the jQuery selector, this is one way to do it, but there might be a more efficient way.

    say you want to exclude the sidebar, and your sidebar div has an id of "sidebar", then you can try something like:

    jQuery("div").not("#sidebar").find("img").lazyload

    More on jQuery selectors here.

  11. vaiumagasosa
    Member
    Posted 4 years ago #

    hi ayn.
    i'm such a rookie on php. thank you for your patience.

    yes, my sidebar div is "sidebar" but where exactly do i paste that code?
    i supposed that must be somewhere on jquery-image-lazy-loading/jq_img_lazy_load.php, but where exactly?
    i've tried diferent combinations but i didn't find the right spot.

    thank you in advance,
    antónio
    http://www.vaiumagasosa.com

  12. calvintychan
    Member
    Posted 4 years ago #

    @vaiumagasosa @pogodindenis @Lisardes

    I tried @ayn's approach but it didn't work for some reason. The way I did it was I changed the selector to only include images in the #content div instead, and that worked fine.

    jQuery(document).ready(function($){
      if (navigator.platform == "iPad") return;
      jQuery("#content").find("img").lazyload({
          effect:"fadeIn",
          placeholder: "$placeholdergif"
      });
    });
  13. ayn
    Member
    Posted 4 years ago #

    @calvintychan yeah, that works if the images you don't want lazyloading are outside the content div, but some of these plugins with problems put the stuff inside #content so this solution won't work for some. btw, you can change your selector to this if all you want is to select all images in #content:

    jQuery("#content img")

    thanks,

  14. Schoengeist
    Member
    Posted 4 years ago #

    Can I get exclude to work with class? Could you please post an example?

  15. markey101101
    Member
    Posted 4 years ago #

    Just to add to help people out that won't figure this out if you comma separate div selectors you can have more than one selection i.e. the following shows #content and #footer being selected for lazyload.

    jQuery(document).ready(function($){
    if (navigator.platform == "iPad") return;
    jQuery("#content,#footer").find("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
    });
    });

  16. bmonkhouse
    Member
    Posted 4 years ago #

    Just put this on a website I run - fantastic! Speeds it up and looks great.

    Is there any way to change the image delay time so it lasts slightly longer?

    Cheers

  17. Ethan Shaw
    Member
    Posted 3 years ago #

    If anyone is interested in writing me a simple exclude all images with "this class" script let me know. Pls include your rate. I don't have the time to write it myself.

    ~Ethan
    ethan /at/ shawrepublic [dot] com

  18. davaobase
    Member
    Posted 3 years ago #

    Unfortunately, my query has somehow morphed into another question. I don't mind, though. :)

    I just wanted someone to reply to my request. While @estevancarlos provided a response, my brain can only process so much.

    Anyone else who could help me?

  19. weiover
    Member
    Posted 3 years ago #

    hate to keep steer the discussion off topic, however I noticed this plug-in conflicts with Lightbox 2. No more click on the image to bring up a bigger version on a separate layer with boarder and dark background :/ ...

Topic Closed

This topic has been closed to new replies.

About this Topic