JaS gallery
How do I use it in a web page?
Start by including the JaS JavaScript file:
<script type="text/javascript" src="js/jas.js"></script>
Then, open up the JavaScript file. To avoid having to write long file paths to every image, enter the imagePath:
imagePath : "../pictures/"
Then, enter the image file names, and optionally also a descriptive text and/or one or several tag to mark the image with. The order is, as shown below: file name, descriptive text, tag/-s. Remember to separate multiple tags by a comma.
images : [
["1.jpg", "Bat bridge in Austin", "Bridge"],
["2.jpg", "Blossoming tree", "Tree"],
["3.jpg", "Bat bridge from below", "Bridge"],
["4.jpg", "Birds", "Birds"]
]
If you want to dynamically generate the image information on the server through ASP.NET or PHP, you just need to create an array like this (after the JavaScript file has been included):
// In a JavaScript file
JaS.images : [
["1.jpg", "Bat bridge in Austin", "Bridge"],
["2.jpg", "Blossoming tree", "Tree"],
["3.jpg", "Bat bridge from below", "Bridge"],
["4.jpg", "Birds", "Birds"]
]
// In a JavaScript block
JaS.images = [
["1.jpg", "Bat bridge in Austin", "Bridge"],
["2.jpg", "Blossoming tree", "Tree"],
["3.jpg", "Bat bridge from below", "Bridge"],
["4.jpg", "Birds", "Birds"]
];
Settings and parameters
fadeContainerId : "jas-container"
- The
id
of the element which will contain the main image element displaying the pictures. Also the element that the fading effect will be applied to. NOTE! In Safari, if this element has gotten the CSS propertyfloat
assigned to it, it might result in unwanted effects. fadeContainerId : "jas-container"
- The
id
of the element which will contain the main image element displaying the pictures. Also the element that the fading effect will be applied to. NOTE! In Safari, if this element has gotten the CSS propertyfloat
assigned to it, it might result in unwanted effects. imageContainerId : "jas-image"
- The
id
of the image that is the main image for displaying the chosen image in the image collection. imageTextContainerId : "jas-image-text"
- The
id
of the element that will display the descriptive text for the chosen image. previousLinkId : "previous-image"
- The
id
of the element for the previous image link. nextLinkId : "next-image"
- The
id
of the element for the next image link. imageCounterId : "image-counter"
- The
id
of the element which will display the number of the current image and the total amount of images. startSlideShowId : "start-slideshow"
- The
id
of the element for the link that will start the slideshow. stopSlideShowId : "stop-slideshow"
- The
id
of the element for the link that will stop the slideshow. dimBackgroundOverlayId : "jas-dim-overlay"
- The
id
of the element that is used as an overlay to create the dimmed background. dimBackgroundId : "dim-background"
- The
id
of the element for the link that will show the dimmed background. noDimBackgroundId : "no-dim-background"
- The
id
of the element for the link that will hide the dimmed background. thumbnailContainerId : "jas-thumbnails"
- The
id
of the element that will contain all of the thumbnail images. tagsContainerId : "jas-tags"
- The
id
of the element that will contain a list of available tags for all images. tagsSelectAllId : "jas-select-all-tags"
- The
id
of the element that will trigger select/deselect all tags function. useImageText : true
- If a descriptive text should be displayed when an image is displayed.
useThumbnails : true
- If a list of thumbnails should be displayed.
allowDimmedBackground : true
- If the dimmed background feature should be available.
useTags : true
- If tags should be used and displayed.
useKeyboardShortcuts : true
-
If keyboard shortcuts should be applied. If turned on, the keys used are:
- Left or up arrow for previous image.
- Right or down arrow for next image.
- Space bar for starting/stopping the slideshow.
useFadingIn : true
- If images should fade in, if fading is turned on.
useFadingOut : true
- If images should fade out, if fading is turned on.
useFadeWhenNotSlideshow : false
- If fading should be used when browsing images, and it isn't a slideshow playing.
useFadeForSlideshow : true
- If fading should be used for the slideshow.
useFadeAtInitialLoad : false
- If fading should happen when the web page is initially loaded, if fading is turned on for browsing images.
fadeIncrement : 0.1
- How big each fading step will be. The fading goes from 0 to 1.
fadeInterval : 100
- An interval between each fade increment, in milliseconds.
timeForSlideInSlideshow : 1500
- If fading is turned on for the slideshow, how long each image should be displayed when not fading iin or out, in milliseconds.
Thumbnail class names applied in the script
In general no class names are applied in the JaS JavaScript file except for the chosen thumbnail and its parent element. Those class names are:
selected
selected-parent