gallery
[gallery, folder(, size = l, style, auto = no, pause = yes, hero = no, overlay, images, labels, index)]
with keys
[gallery, folder=(, size=l, style=, auto=, pause=, hero=, overlay=, images=, labels=, index=)]
Display a gallery of images from an images folder.
Parameters
folder - name of images folder
size - size to display the image at:
x = extra large 2000 x 2000
l (default) = large 1000 x 1000
m = medium 500 x 500
s = small 200 x 200
style - css styles to be applied to the gallery
auto - automatically changes to next image after x seconds
no (default) = off
yes = 5 seconds
n = n seconds
pause - pauses when the mouse pointer is over the gallery
yes (default) = pause when mouse over
no = change while mouse over
hero - full-page hero gallery with covering images
no (default) = hero off
yes = hero on
overlay - "content item" to be overlayed using \[include,overlay\
]
images - list of "|" separated images to be displayed from "folder"
image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg
labels - list of "|" separated labels
image1|image2|image3|image4|image5
index - index of initial image to display
0 (default) = random
n = initial image (1 - n)
See Also
[herogallery][include]css-stylesimagesChanges
1.56 - updated, access to library images
1.44 - prev/next not resetting change timer
1.29 - prev/next not always working
1.28 - page change stopping auto change
1.28 - auto change not using set interval after pause
1.34.21 - "include" parameter changed to "overlay"
1.34.21 - accepts key=value pairs as parameters
1.17.9 - include parameter added
1.16.8 - hero & pause parameters added
Examples
Example#1 image gallery
[gallery, travel]
Output:
image.php?section=travel&name=image1.jpg&type=l
image.php?section=travel&name=image10.jpg&type=l
image.php?section=travel&name=image2.jpg&type=l
image.php?section=travel&name=image3.jpg&type=l
image.php?section=travel&name=image4.jpg&type=l
image.php?section=travel&name=image5.jpg&type=l
image.php?section=travel&name=image6.jpg&type=l
image.php?section=travel&name=image7.jpg&type=l
image.php?section=travel&name=image8.jpg&type=l
image.php?section=travel&name=image9.jpg&type=l
Example#2 image gallery auto change after 3 seconds
[gallery, travel, , , 3]
Output:
3
3
image.php?section=travel&name=image1.jpg&type=
image.php?section=travel&name=image10.jpg&type=
image.php?section=travel&name=image2.jpg&type=
image.php?section=travel&name=image3.jpg&type=
image.php?section=travel&name=image4.jpg&type=
image.php?section=travel&name=image5.jpg&type=
image.php?section=travel&name=image6.jpg&type=
image.php?section=travel&name=image7.jpg&type=
image.php?section=travel&name=image8.jpg&type=
image.php?section=travel&name=image9.jpg&type=
Example#2 with keys: image gallery auto change after 3 seconds
[gallery, folder=travel, pause=3]
Output:
3
3
image.php?section=travel&name=image1.jpg&type=
image.php?section=travel&name=image10.jpg&type=
image.php?section=travel&name=image2.jpg&type=
image.php?section=travel&name=image3.jpg&type=
image.php?section=travel&name=image4.jpg&type=
image.php?section=travel&name=image5.jpg&type=
image.php?section=travel&name=image6.jpg&type=
image.php?section=travel&name=image7.jpg&type=
image.php?section=travel&name=image8.jpg&type=
image.php?section=travel&name=image9.jpg&type=
Notes
To hide the arrow buttons:
#folderImages .GalleryNav {
display:none;
}