Due to some serious performance when rendering images for a complete year - like on Familiebilleder 2013 - Rendering +1000 thumbnails, this takes a long time.

So I kind of tripped over the blazy script - http://dinbror.dk/blog/blazy/ - which is described as:

bLazy is a lightweight script for lazy loading and multi-serving images. It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. bLazy works on all modern browsers, including on IE7+.

 

This is pretty easy to implement, there are 3 parts:

Loading the js file 

Using a techinque like Installing Javascript libraries or frameworks in Confluence - be sure the js file is loaded (this can be checked by viewing source, find the js include and test the complete URL)

 

Initialize in the Custom HTML

Under Custom HTML in the Administration, under "At beginning of the BODY", add 

<script type="text/javascript">
        jQuery(function($){
            // Initialize
           var bLazy = new Blazy({ 
        selector: 'img' // all images
       });
        });
</script>

 

Change the me-image Macro

To get the hook and thumbnails, the User Macro: me-image - Image lightbox with Flare (or similar) has to be changed a bit (refer to http://dinbror.dk/blog/blazy/):

## @param path:title=Status|type=string|required=true|desc=File Path
## @param image:title=Status|type=string|required=true|desc=Image Name
## @param group:title=Status|type=string|required=true|desc=Group
## @param thumbsize:title=Thumbsize|type=string|required=false|desc=Thumbnail Size
## @param displaysize:title=Displaysize|type=string|required=false|desc=Display Size
 
## Default Thumb and Display Sizes:
#set($ThumbSizeDefault=200)
#set($DisplaySizeDefault=800)
 
#if (${paramthumbsize} != "" )
#set($ThumbSizeDefault=${paramthumbsize})
#end
 
#if (${paramdisplaysize} != "" )
#set($DisplaySizeDefault=${paramdisplaysize})
#end
 
#set ($title=$parampath.replace("//", ""))
#set ($title=$title.replace("%20", " "))
#set ($title=$title.replace("/", " / "))
 
<a href="/media/${parampath}/thumbs/${DisplaySizeDefault}pxHigh/${paramimage}" data-target="flare" data-flare-scale="fitmax" data-flare-gallery="${parampath}" data-flare-thumb="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" tilte="${paramimage}" data-title="$title" data-description="<h3>$title / ${paramimage}</h3>"><img src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== class="b-lazy" data-src="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" data-src-small="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" /></a>
  • Ingen etiketter