WordPress.org

Forums

jQuery Image Lazy Load WP
Applying plugin to images in singe post only (17 posts)

  1. jupiter23
    Member
    Posted 4 years ago #

    Basically how do i exclude the images in the sidebar from the image load effect..

    Any help is appreciated thanks

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

  2. jupiter23
    Member
    Posted 4 years ago #

    Just an update I read somewhere that to use a selector, as I want to make the images in the sidebar static

    http://api.jquery.com/category/selectors/

    Any help on how to set up the selectors is appreciated

  3. hey_suburbia
    Member
    Posted 4 years ago #

    I'm in the same boat, jupiter23.

    I just want the post images to load, not the sidebar or footer.

  4. jupiter23
    Member
    Posted 4 years ago #

    [email removed by mod]

    email him, he did it for me :D

  5. hey_suburbia
    Member
    Posted 4 years ago #

    @jupiter23

    Thanks. I emailed him.

    Any chance you can post your solution here for others to see?

  6. cookie_dude
    Member
    Posted 4 years ago #

    Hey Farhan here :P

    Basically you need to edit the plugin file called jq_img_lazy_load.php and around line 27 you'll see the following code.

    if (navigator.platform == "iPad") return;
      jQuery("img").lazyload({

    Just change that the "img" to include the single post div. Only that area div will be effected by the plugin then.

    Let me know your site if you don't understand and i'll tell you the code for that.

    if (navigator.platform == "iPad") return;
        jQuery("#singlepostdivid img, #anyotherdivid img").lazyload({
  7. hey_suburbia
    Member
    Posted 4 years ago #

    Thanks Farhan!

    I understand, I just don't know what my single post div is...

    This is my main page:

    <?php
    get_header();
    ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <?php the_post_thumbnail(); ?>
    
    <div class="post">
         <div class="postop">
         <img src="http://wiinintendo.net/wp-content/themes/WeSki/img/tl.gif" alt=""
         width="15" height="15" class="corner"
         style="display: none" />
    </div>
    
    <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> <?php the_date('','<span class="date">','</span>'); ?></h3>
    <div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
    </div>
    
    <div class="storycontent">
    
    <?php the_content(__('(more...)')); ?>
    <br />
    <br />
    <span  STYLE="margin-left:  20px">
    <a href="http://twitter.com/share" class="twitter-share-button"
    data-url="<?php the_permalink(); ?>"
    data-via="hey_suburbia"
    data-text="<?php the_title(); ?>"
    data-count="horizontal">Tweet</a>
    </span>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <br />
    <br />
    <span  STYLE="margin-left:  20px"><strong>Related Articles:</strong></span>
    
    <?php related_posts(); ?> 
    
    </div>
    
    <div class="feedback">
    <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
    </div>
    <br />
    
    <div class="postbottom">
    <img src="http://wiinintendo.net/wp-content/themes/WeSki/img/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
    </div>
    
    </div>
    
    <div id="comments-post">
    <?php comments_template(); // Get wp-comments.php template ?>
    </div><!-- end COMMENTS-POST -->
    
    <?php endwhile; else: ?>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    
    <center>
    <p><h3><?php _e('Sorry, no posts matched your criteria.'); ?></h3></p>
    <img src="http://i.imgur.com/yObdj.gif" alt="mario" />
    </center>
    
    <?php endif; ?>
    
    <?php wp_pagenavi(); ?>
    
    <?php get_footer(); ?>

    I tried (no go...):

    if (navigator.platform == "iPad") return;
        jQuery("#storycontent img").lazyload({
  8. cookie_dude
    Member
    Posted 4 years ago #

    You are using class so it will be

    if (navigator.platform == "iPad") return;
        jQuery(".storycontent img").lazyload({

    if it's class= then it's .classname and if it's id= then it's #idname

  9. hey_suburbia
    Member
    Posted 4 years ago #

    Thanks!

    I totally knew that...

  10. cookie_dude
    Member
    Posted 4 years ago #

    Your Welcome :P

  11. cookie_dude
    Member
    Posted 4 years ago #

    Please some mod delete my email address from the topic, as i've started getting spam!

  12. Posting email addresses publicly doesn't really cause spam.

    See: otto@ottodestruct.com

    Still, removed it for you. But that's a poor spam prevention measure. You should get a better one.

  13. cookie_dude
    Member
    Posted 4 years ago #

    Thanks, and i'll look into getting a better one!

  14. Simmessa
    Member
    Posted 4 years ago #

    This has worked for me, just disable lazyload plugin on the sidebar!

    This has to be configured in the plugin code itself.

    jQuery("img").not('div#sidebar img').lazyload({
        effect:"fadeIn",
        placeholder: "$placeholdergif"
      });

    That's it!

  15. Greg Sidelnikov
    Member
    Posted 4 years ago #

    Yeah it takes a while to get used to jQuery's syntax. The basic selectors are just fine and easy to use. But more complex selectors, I usually deal with them by printing out a sheet displaying more complex syntax examples, paste it above my monitor on the wall, and I can't say by how much more percent my productivity has increased when developing jQuery Plugins.

    jQuery Plugin Tutorial

  16. the-kit
    Member
    Posted 4 years ago #

    By piecing the solution posted by: Simmessa

    and one by: rapscalli http://wordpress.org/support/topic/plugin-jquery-image-lazy-load-wp-disable-for-slideshow-1

    I was able to isolate the exclusion of the jquery lazyload right to the carousel itself, rather than the entire page as done using .content or #content. My carousel had the following class: .carousel

    Here is the original php file: jq_img_lazy_load.php

    <?php
    
      /*
      Plugin Name: jQuery lazy load plugin
      Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
      Description: a quick and dirty wordpress plugin to enable image lazy loading.
      Version: v0.10
      Author: Andrew Ng
      Author URI: http://blog.andrewng.com
      */
    
    function jquery_lazy_load_headers() {
      $plugin_path = plugins_url('/', __FILE__);
      $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
      $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
      wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
    }
    
    function jquery_lazy_load_ready() {
      $placeholdergif = plugins_url('images/grey.gif', __FILE__);
      echo <<<EOF
    <script type="text/javascript">
    jQuery(document).ready(function($){
      if (navigator.platform == "iPad") return;
      jQuery("img").lazyload({
        effect:"fadeIn",
        placeholder: "$placeholdergif"
      });
    });
    </script>
    EOF;
    }
    
      add_action('wp_head', 'jquery_lazy_load_headers', 5);
      add_action('wp_head', 'jquery_lazy_load_ready', 12);
    ?>

    Here is the php file with the edits, that disable lazyload in the .carousel class

    <?php
    
      /*
      Plugin Name: jQuery lazy load plugin
      Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
      Description: a quick and dirty wordpress plugin to enable image lazy loading.
      Version: v0.10
      Author: Andrew Ng
      Author URI: http://blog.andrewng.com
      */
    
    function jquery_lazy_load_headers() {
      $plugin_path = plugins_url('/', __FILE__);
      $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
      $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
      wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
    }
    
    function jquery_lazy_load_ready() {
      $placeholdergif = plugins_url('images/grey.gif', __FILE__);
      echo <<<EOF
    <script type="text/javascript">
    jQuery(document).ready(function($){
      if (navigator.platform == "iPad") return;
      jQuery("img").not('.carousel img').lazyload({
        effect:"fadeIn",
        placeholder: "$placeholdergif"
      });
    });
    </script>
    EOF;
    }
    
      add_action('wp_head', 'jquery_lazy_load_headers', 5);
      add_action('wp_head', 'jquery_lazy_load_ready', 12);
    ?>

    The Change:

    <script type="text/javascript">
    jQuery(document).ready(function($){
    if (navigator.platform == "iPad") return;
    jQuery("img").not('.carousel img').lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
    });
    });
    </script>

    --

    On their own the solutions didn't quite make sense to me, but together I was able to make perfect sense of the matter and hope someone like myself will benefit from this inclusion of both.

    Note - the file you are looking to edit is in this directory path:

    [...]/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php

    Enjoy, and continue coding.

  17. ayn
    Member
    Plugin Author

    Posted 4 years ago #

    @the-kit: great job, that was exactly what I did to exclude my jquery cycle images.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Image Lazy Load WP
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic