Results 1 to 4 of 4
  1. #1
    Join Date
    Apr 2008
    Posts
    82
    Plugin Contributions
    0

    Default Jquery Lazy load plugin

    Hi all!
    Recently I implemented Jquery Lazy Load plugin in my zen. This plugin only loads images that are in a visible part of web page, which is very useful for stores that show a lot of products per page. You can check it out on my store - http://www.klybni4ka.net/vypusknye-platya-c-140. If you dont notice it try to scroll really fast to the bottom.
    It took me some time to do it, so for those who would like to have it and to save your time, here is the instructions how to do itit is based on a regular zen, if you modified yours, check if the css class for images is still - "listingProductImage", if it isn't use your class instead):

    1. Go get the plugin - http://www.appelsiini.net/projects/lazyload
    2. Add it to your template jscript directory and call it
    -
    Code:
    jQuery(function() {
    $("img.listingProductImage").show().lazyload({ 
     	threshold : 400,
    	effect      : "fadeIn"
    });
    
    });
    (dont forget to load jquery before) .
    If this confuses you read how to load jscripts in zen - http://www.zen-cart.com/wiki/index.p...s_-_Javascript

    3. Edit your html_output.php file (includes/functions/html_output.php). Around line ~265, just right after the function zen_image add:
    Code:
      function zen_image_lazy($src, $alt = '', $width = '', $height = '', $parameters = '') {
        global $template_dir;
    
        // soft clean the alt tag
        $alt = zen_clean_html($alt);
    
        // use old method on template images
        if (strstr($src, 'includes/templates') or strstr($src, 'includes/languages') or PROPORTIONAL_IMAGES_STATUS == '0') {
          return zen_image_OLD($src, $alt, $width, $height, $parameters);
        }
    
    //auto replace with defined missing image
        if ($src == DIR_WS_IMAGES and PRODUCTS_IMAGE_NO_IMAGE_STATUS == '1') {
          $src = DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE;
        }
    
        if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
          return false;
        }
    
        // if not in current template switch to template_default
        if (!file_exists($src)) {
          $src = str_replace(DIR_WS_TEMPLATES . $template_dir, DIR_WS_TEMPLATES . 'template_default', $src);
        }
    
        // hook for handle_image() function such as Image Handler etc
        if (function_exists('handle_image')) {
          $newimg = handle_image($src, $alt, $width, $height, $parameters);
          list($src, $alt, $width, $height, $parameters) = $newimg;
        }
    
        // Convert width/height to int for proper validation.
        // intval() used to support compatibility with plugins like image-handler
        $width = empty($width) ? $width : intval($width);
        $height = empty($height) ? $height : intval($height);
    
    // alt is added to the img tag even if it is null to prevent browsers from outputting
    // the image filename as default
        $image = '<img  src="/images/greyLoader.gif" data-original="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';
    
        if (zen_not_null($alt)) {
          $image .= ' title=" ' . zen_output_string($alt) . ' "';
        }
    
        if ( ((CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height))) ) {
          if ($image_size = @getimagesize($src)) {
            if (empty($width) && zen_not_null($height)) {
              $ratio = $height / $image_size[1];
              $width = $image_size[0] * $ratio;
            } elseif (zen_not_null($width) && empty($height)) {
              $ratio = $width / $image_size[0];
              $height = $image_size[1] * $ratio;
            } elseif (empty($width) && empty($height)) {
              $width = $image_size[0];
              $height = $image_size[1];
            }
          } elseif (IMAGE_REQUIRED == 'false') {
            return false;
          }
        }
    
    
        if (zen_not_null($width) && zen_not_null($height) and file_exists($src)) {
    //      $image .= ' width="' . zen_output_string($width) . '" height="' . zen_output_string($height) . '"';
    // proportional images
          $image_size = @getimagesize($src);
          // fix division by zero error
          $ratio = ($image_size[0] != 0 ? $width / $image_size[0] : 1);
          if ($image_size[1]*$ratio > $height) {
            $ratio = $height / $image_size[1];
            $width = $image_size[0] * $ratio;
          } else {
            $height = $image_size[1] * $ratio;
          }
    // only use proportional image when image is larger than proportional size
          if ($image_size[0] < $width and $image_size[1] < $height) {
            $image .= ' width="' . $image_size[0] . '" height="' . intval($image_size[1]) . '"';
          } else {
            $image .= ' width="' . round($width) . '" height="' . round($height) . '"';
          }
        } else {
           // override on missing image to allow for proportional and required/not required
          if (IMAGE_REQUIRED == 'false') {
            return false;
          } else {
            $image .= ' width="' . intval(SMALL_IMAGE_WIDTH) . '" height="' . intval(SMALL_IMAGE_HEIGHT) . '"';
          }
        }
    
        // inject rollover class if one is defined. NOTE: This could end up with 2 "class" elements if $parameters contains "class" already.
        if (defined('IMAGE_ROLLOVER_CLASS') && IMAGE_ROLLOVER_CLASS != '') {
        	$parameters .= (zen_not_null($parameters) ? ' ' : '') . 'class="rollover"';
        }
        // add $parameters to the tag output
        if (zen_not_null($parameters)) $image .= ' ' . $parameters;
    
        $image .= ' />';
    
        return $image;
      }
    This is exactly the same function as a zen_image, I just replaced "src" with "data-original". You can actually edit the original zen_image function to lazy load all images without adding this new one, but then you will have to edit many more files to make this work correct with js disabled.
    4. Edit your product_listing.php file(includes/modules/product_listing.php or includes/modules/YOUR_TEMPLATE/product_listing.php). Look for
    Code:
    zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"')
    there should be 2 lines and then select each - zen_image(*whatever is inside)
    and replace it with -
    Code:
    zen_image_lazy(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '<noscript>' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage1"') . '</noscript>'
    5. Add to your stylesheet.css class - .listingProductImage{display: none} and img.listingProductImage1, it is exactly the same as listingProductImage, so just look for listingProductImage and after it add listingProductImage1. It is for browsers that do not support js.

    Warnings: I did not develop this module and have no legal rights for it. It is under the MIT license and it is provided "as is", without warranty of any kind. If you like this module you should thank Mika Tuupola from http://www.appelsiini.net.
    If my instructions helped you I would greatly appreciate if you link to my site - "http://www.klybni4ka.net".

  2. #2
    Join Date
    Sep 2007
    Location
    Italy
    Posts
    7
    Plugin Contributions
    0

    Default Re: Jquery Lazy load plugin

    Quote Originally Posted by Dan123 View Post
    2. Add it to your template jscript directory and call it
    -
    Code:
    jQuery(function() {
    $("img.listingProductImage").show().lazyload({ 
     	threshold : 400,
    	effect      : "fadeIn"
    });
    
    });
    (dont forget to load jquery before) .
    If this confuses you read how to load jscripts in zen - http://www.zen-cart.com/wiki/index.p...s_-_Javascript
    Hi,
    I have problems with step 2 ... you can explain it better?
    I do not speak English very well...
    I'm Italian boy - sorry for my english...

  3. #3
    Join Date
    Sep 2007
    Location
    Italy
    Posts
    7
    Plugin Contributions
    0

    Default Re: Jquery Lazy load plugin

    In which file should I put that code?
    How and where do I load jquery?
    I'm Italian boy - sorry for my english...

  4. #4
    Join Date
    May 2006
    Location
    Charlottesville VA
    Posts
    1,959
    Plugin Contributions
    22

    Default Re: Jquery Lazy load plugin

    Thanks for this information and I am packaging this up as a plugin. The forum thread is here: http://www.zen-cart.com/showthread.p...t-listing-page

 

 

Similar Threads

  1. v151 How do I upgrade the Jquery plugin
    By Dashizna in forum Basic Configuration
    Replies: 5
    Last Post: 15 Aug 2015, 12:38 AM
  2. implementing jquery datatables plugin
    By warroyo90 in forum General Questions
    Replies: 4
    Last Post: 7 Jul 2012, 04:26 AM
  3. JQuery Cycle Plugin
    By pb4 in forum General Questions
    Replies: 1
    Last Post: 25 Feb 2011, 11:20 AM
  4. using jquery slideshow plugin on the tpl_index_default page?
    By sandesh35 in forum General Questions
    Replies: 3
    Last Post: 27 Oct 2010, 01:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR