Example - Full Size Lazy Load

These examples of Sorcerer's Gallery in use all use the same fileset as in the header images shown on each page of this site.

The Magic Data involved is a straight forward listing of the fileset:

SET 'JL Header Image' AS_FILESET LIST_FILES 50

The optional gallery title is left empty, but could be set with a Magic Data expression as simple as:

SET 'My title text'

Other than picking a relevant template, the difference between the Sorcerer's Gallery settings is all in the Image Details tab, where dimensions are set relevant to the template in use.

Lazy Loading

For this template, full size images are shown directly on the page, but are only loaded as the page scroll brings them close to the viewport.

To really understand what is happening under the hood, before you start to scroll down you can open the Developer Console or Firebug and set it to show network activity.  Now, as you scroll down the page, the network activity will show the lazy/delayed loading of images.

Last updated: over a year ago