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

• Created by: Robert Nyman
• Web Site: http://www.robertnyman.com
• Posted: November 8, 2006

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.

User Comments

Add a comment, suggestion, or correction

[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]

Name:    
E-mail:   
URL:       
[optional]
Subject: 
[optional]
Comments:

CAPTCHA Verification Please enter the code displayed to the right in the box below:

Hear it!

   

Comments feed