Du ser en gammel version af denne side. Se den nuværende version.

Sammenlign med nuværende Vis sidehistorik

Version 1 Næste »

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 a LightBox in Confluence - be sure the js file is loaded

 

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