Documentation
swipeimage
[swipeimage, name, (width=full), id, imageid,(wallid, labelid, size, sizes, folder)]…[swipeimageend]
with keys[swipeimage, name=, (width=full), id=, imageid=,(wallid=,labelid=, size=m, sizes=, folder=)]…[swipeimageend]
Display an "swipeable" image that can be connected to an imagewall. Allows for objects to be overlayed.Parameters
name - image name including extensionwidth - optional width to display the image at:
full = actual image width up to 100% of the container layer width
% of width with padding:1%
100% = 97% container layer width
75% = 72% container layer width
66% = 63% container layer width
50% = 47% container layer width
33% = 30% container layer width
25% = 20% container layer width
100% = 97% container layer width
75% = 72% container layer width
66% = 63% container layer width
50% = 47% container layer width
33% = 30% container layer width
25% = 20% container layer width
number of same width images filling a line
x1 = 97% container layer width
x2 = 47% container layer width
x3 = 30% container layer width
x4 = 20% container layer width
id - swipeimage idx1 = 97% container layer width
x2 = 47% container layer width
x3 = 30% container layer width
x4 = 20% container layer width
imageid - image id
wallid - imagewall id
labelid - label div id
size - image size default "m" (pixels max):
x = x-large (2000 x 2000)
l = large (1000 x 1000)
m = medium (500 x 500)
s = small (200 x 200)
sizes - optional image class namel = large (1000 x 1000)
m = medium (500 x 500)
s = small (200 x 200)
folder - name of images folder
See Also
[image][imagewall]
images
Changes
2.05 - folder parameter added1.42 - size parameter added
1.37 - accepts key=value pairs as parameters
Examples
Example#5 image wall 3 across with text labels updating a larger image and label[swipeimage,travel/image1.jpg,50%,travelswipe,travelimage,TravelWall,Label]
[div,position:absolute;left:0px;Right:0px;bottom:5%;text-align:center;color:#ffffff;,,Label] [divend]
[swipeimageend]
[imagewall,travel,33%,l,image1.jpg|image3.jpg|image5.jpg,Annecy|Pont d'Arc|Bruges,travelimage,Label,TravelWall,m]
classes:[div,position:absolute;left:0px;Right:0px;bottom:5%;text-align:center;color:#ffffff;,,Label] [divend]
[swipeimageend]
[imagewall,travel,33%,l,image1.jpg|image3.jpg|image5.jpg,Annecy|Pont d'Arc|Bruges,travelimage,Label,TravelWall,m]
.ImageWall .Active {
background-color:[var,colors.orange];
color:[var,colors.yellow];
}
Output:background-color:[var,colors.orange];
color:[var,colors.yellow];
}
Annecy
Pont d'Arc
Bruges
Notes