JaS Gallery | JavaScriptSource

JaS Gallery

Robert Nyman Nov 8, 2006

General

This is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images.


Click to see the example.

Notes

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.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: jas.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Other

Download the images using the URL below:

Leave a Response

(38 comments)

Good! I'll surely use it!!!!!!!

pallav Jun 2, 2013

This is a great application that was very easy to customize! Thanks!

Kandi Humpf Sep 6, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

I want to be able to use this script to auto load once a visitor accesses a specific page. Is there any way to auto load the the images and have them start fading in/fading out...and then have it loop?

rick Feb 28, 2008

Mike,[br /][br /]You need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a].

Lee Jul 26, 2007