JaS Gallery's Documentation



Over 2000+ free Javascript
at JavaScriptBank.com Website
Sampled by JavaScriptBank.com

In 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 property float 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 property float 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.

From script notes.