Jquery Lazy load plugin

[Dan123]

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
-

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:

  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

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 -

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".

[Lazzo85]

2. Add it to your template jscript directory and call it
-

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...

[Lazzo85]

In which file should I put that code?
How and where do I load jquery?

[delia]

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