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