Documentation

imagewall

[imagewall, folder, width, size=s(, images, labels, imageid, labelid, id, lazyload, enlarge)]

with keys

[imagewall, folder=value, width=value, size=s(, images=value, labels=value, imageid=value, labelid=value, id=value, lazyload=, enlarge=)]

Display a wall of images from folder.

Parameters

folder - name of images folder
width - % image width to be used
size - image size (pixels max):

x = x-large (2000 x 2000)
l = large (1000 x 1000)
m = medium (500 x 500)
s = small (200 x 200)

images - list of "|" separated images to be displayed from "folder"

image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg

labels - list of "|" separated text to be displayed with each image

Text1|Text2|Text3|Text4|Text5

imageid - id of an [image] or [gallery] to update when an imagewall item is clicked
labelid - id of a [div] to update with text when an imagewall item is clicked
id - imagewall id
lazyload - (y/n) add Lazy class to images
enlarge - (y/n) display enlarge images when clicked

See Also

images
[image]

Changes

2.15 - updated, enlarge parameter added
1.57 - updated, lazyload parameter added
1.56 - updated, access to library images
1.55 - fixed, overwriting connected image's size with wallimage size
1.37 - updated, scrolls to connected imageid onclick, nearest top or bottom
1.37 - fixed, page blanking when clicking first image with connected imageid but no labelid specified
1.37 - accepts key=value pairs as parameters
1.35.22 - updates [gallery] images
1.33.20 - copies label text to connected labelid
1.32.20 - scrolls to connected imageid
1.30.18 - labels parameter added
1.30.18 - images parameter added
1.30.18 - imageid parameter added

Examples

Example#1 image wall 3 across, default size small (s)

[imagewall, transport, 33.3%]

Output:

Example#2 image wall 2 large (l) images across

[imagewall, transport, 50%, l]

Output:

Example#3 image wall 4 across, default size small (s)

[imagewall, travel, 25%]

Output:

Example#4 image wall 5 across updating a larger image

[image,travel/image1.jpg,50%,,,LargeImage]
[imagewall, travel, 20%,l,,,LargeImage]

Output:

Example#5 image wall 3 across with text labels updating a larger image and label

[div,position:relative;text-align:center;]
[image,travel/image1.jpg,50%,,,TravelImage]
[div,position:absolute;left:0px;Right:0px;bottom:5%;text-align:center;color:#ffffff;,,Label]Annecy[divend]
[divend]
[imagewall,travel,33%,l,image1.jpg|image3.jpg|image9.jpg,Annecy|Pont D'Arc|Dole,TravelImage,Label]

Output:

Annecy

Pont d'Arc

Dole

Example#6 Lazy Load images in a squeezebox using ImagesResolve(this)

[squeezebox,title=Concerts,onopen=ImagesResolve]
[imagewall,folder=concerts,width=25%,lazyload=y]
[squeezeboxend]
[squeezebox,title=Transport,onopen=ImagesResolve]
[imagewall,folder=transport,width=25%,lazyload=y]
[squeezeboxend]
[squeezebox,title=Travel,onopen=ImagesResolve]
[imagewall,folder=travel,width=25%,lazyload=y]
[squeezeboxend]

Output:

Concerts

Transport

Travel

Example#7 image wall 3 across, displays enlarged images when clicked

click image to enlarge
[imagewall, folder=transport, width=33.3%, enlarge=y]

Output:

click image to enlarge

Example#8 Lazy Load images in a squeezebox using ImagesResolve(this) and allow enlargement

[squeezebox,title=Concerts,onopen=ImagesResolve]
[imagewall,folder=concerts,width=25%,lazyload=y,enlarge=y]
[squeezeboxend]
[squeezebox,title=Transport,onopen=ImagesResolve]
[imagewall,folder=transport,width=25%,lazyload=y,enlarge=y]
[squeezeboxend]
[squeezebox,title=Travel,onopen=ImagesResolve]
[imagewall,folder=travel,width=25%,lazyload=y,enlarge=y]
[squeezeboxend]

Output:

Concerts

Transport

Travel

Notes

At some point the size parameter will be deprecated and the image that best fits will be used automatically.