Add Lazy Load In Lightbox Module - HotThemes

Lazy Load Lightbox

Lazy Load script delays loading of images in web pages. This is especially useful if you have a lot of images on pages and if pages are long with a lot of contents. It makes the page load faster, reduce server load and saves bandwidth.

Lazy Loading of Images (in Articles or Content Modules)

The framework we are using for our Joomla templates has an integrated solution for lazy loading of the images. You can enable it very easily. From your Joomla administrator's panel, go to Extensions > Templates > Template name > Features > Lazy Load and enable it. As you can see there, the HTML code for your images must be in a specific for to postpone loading. The usual HTML code of an image is:

<img src="images/example.jpg" width="640" height="480" alt="Some text">
 

To enable lazy loading of this image, HTML code for this image should be:

<img class="lazy" data-original="images/example.jpg" width="640" height="480" alt="Some text">
 

As you can see there's no "src" value and it's changed with "data-original" value.

Lazy Loading in Responsive Lightbox Module

To enable lazy loading of the image thumbnails in Responsive Lightbox module, you need to modify the module code a little bit. We'll show you how.

Using your favorite code editor, edit file /modules/mod_hot_responsive_lightbox/tmpl/default.php and change this line:

echo '<li><a href="'.$mosConfig_live_site.'/'.$images_dir.$file.'" data-imagelightbox="'.$lightboxMode.$uniqueid.'"><img src="'.$thumbnail_image.'" alt="'.$alt_value[$index_alt].'" /></a></li>';
 

to this:

echo '<li><a href="'.$mosConfig_live_site.'/'.$images_dir.$file.'" data-imagelightbox="'.$lightboxMode.$uniqueid.'"><img alt="'.$alt_value[$index_alt].'" class="lazy" data-original="'.$mosConfig_live_site.'/'.$thumbnail_image.'" /></a></li>';
 

and also change this line:

echo '<li><a href="'.$mosConfig_live_site.'/'.$images_dir.$file.'" data-imagelightbox="'.$lightboxMode.$uniqueid.'"><img src="'.$thumbnail_image.'" alt="" /></a></li>';
 

to this:

echo '<li><a href="'.$mosConfig_live_site.'/'.$images_dir.$file.'" data-imagelightbox="'.$lightboxMode.$uniqueid.'"><img alt="" class="lazy" data-original="'.$mosConfig_live_site.'/'.$thumbnail_image.'" /></a></li>';
 

After you make this changes, using FTP upload updated default.php file to this folder /modules/mod_hot_responsive_lightbox/tmpl (overwrite original file). Make sure the Lazy Load option is enabled in the template parameters, otherwise, Responsive Lightbox module will show no thumbnails.