Sidehistorik
...
This is pretty easy to implement, there are 3 parts:
Loading the js
...
file
Using a techinque like Installing a LightBox 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
...
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/):
| Kodeblok | ||||
|---|---|---|---|---|
| ||||
## @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> |