Unveil Images Lazy Load Plugin for Evolution CMS

Unveil Plugin for Evolution CMS adds lazy load images feature to your website without modifying your template.

Unveil Plugin for Evolution CMS is based on: Unveil jQuery plugin http://luis-almeida.github.io/unveil/

A very lightweight plugin to lazy load images for jQuery or Zepto.js

Why

Adding lazy load feature to your template, requires al lot of time for modifying your evolution template and chunks, to replace img search tag with data-search.

This plugin does the job for you

Changes images tags and adds the javascript call to the unveil.js, in the footer of your template.

NOTE: The plugin works with OnWebPagePrerender and OnLoadWebDocument events, no code of your template or chunks will be changed!

How does it work

This plugin is activated on all images located in certain folders.

Default configuration works with all images stored in the File Browser directory (assets/images) ad all phpthumb cache images (stored in assets/cache/images).

Additional folders can be added with the plugin configuration tab.

 

Plugin Configuration

Unveil Plugin configuration options

Loading Image: Allow custimize default loading image || default value: assets/plugins/unveil/loading.gif

Unveil js Config: Allow custimize Unveil js Config file (*) || default value: assets/plugins/unveil/unveilconfig.js

Images Folder: Content images folder || default: assets/images/

 

Unveil Gallery Images: Allow lazy load 3d party snippets/modules gallery (ie: maxygallery) || default: no

Gallery Images Folder: 3d party snippets/modules gallery folder || default: assets/galleries/

 

Unveil Template Images: Allow lazy load Template Images || default: no

Template Images Folder: modx template images folder || default: assets/templates/templatename/images/

 

Unveil Custom Images: Allow lazy load to a custom images folder || default: no

Custom Images Folder: custom images folder || default: assets/yourfolder

 

Default unveilconfig.js (*)

$(document).ready(function() {  $("img").unveil();});