This is an older version of PictureSlides, and is no longer being worked on. Please use the latest version at PictureSlides plugin.

PictureSlides 1.0

How do I use it in a web page?

Include JavaScript files

Start by including the latest version of DOMAssistant (Complete or Compressed version) or jQuery (Minified version suggested):

<script type="text/javascript" src="js/DOMAssistantComplete.js"></script>

For jQuery:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

Then, include the PictureSlides file and the PictureSlides-settings file:

<script type="text/javascript" src="js/PictureSlides.js"></script>
<script type="text/javascript" src="js/PictureSlides-settings.js"></script>

For jQuery:

<script type="text/javascript" src="js/PictureSlides-jquery.js"></script>
<script type="text/javascript" src="js/PictureSlides-settings-jquery.js"></script>

Then, open up the PictureSlides-settings.js file. In here, you can customize how PictureSlides should work and how it should be presented.

Create an HTML page

Create a web page where you put all the HTML that you want to be visible. Then point out the id of the elements you want to use in the PictureSlides-settings.js file.

Setting the large images

The large images to used can either be linked in regular links within the element specified with the thumbnailContainerId. Like this:

<a href="pictures/blossoming-tree.jpg" title="Blossoming tree">
<img src="thumbnails/blossoming-tree.jpg" alt="Blossoming tree">
</a>

An alternative, if you don't use thumbnails in your page, is to link directly to them in the PictureSlides-settings.js file. For example:

images : [
	["images/picture1.jpg", "Text describing that picture"],
	["images/picture2.jpg", "More descriptive text"]  
	// Important! No comma after the last one.
]

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
DOMAssistant.PictureSlides.images : [
	["1.jpg", "Bat bridge in Austin"],
	["2.jpg", "Blossoming tree"],
	["3.jpg", "Bat bridge from below"],
	["4.jpg", "Birds", "Birds"]
	// Important! No comma after the last one.
]

// In a JavaScript block
DOMAssistant.PictureSlides.images = [
	["1.jpg", "Bat bridge in Austin"],
	["2.jpg", "Blossoming tree"],
	["3.jpg", "Bat bridge from below"],
	["4.jpg", "Birds"]
	// Important! No comma after the last one.
];

For jQuery:


// In a JavaScript file
jQuery.PictureSlides.images : [
	["1.jpg", "Bat bridge in Austin"],
	["2.jpg", "Blossoming tree"],
	["3.jpg", "Bat bridge from below"],
	["4.jpg", "Birds", "Birds"]
	// Important! No comma after the last one.
]

// In a JavaScript block
jQuery.PictureSlides.images = [
	["1.jpg", "Bat bridge in Austin"],
	["2.jpg", "Blossoming tree"],
	["3.jpg", "Bat bridge from below"],
	["4.jpg", "Birds"]
	// Important! No comma after the last one.
];

Settings and parameters

useImageText : true
Whether to use a text to accompany the selected image. Automatically taken from the title attribute of the thumbnail image link, or the second value for each image in images in the PictureSlides-settings.js file.
useImageCounter : true
If a counter should be shown, displaying the current image number and the total image count. E.g. 10 / 15.
useNavigationLinks : true
If previous, next, start and stop slideshow links should be shown.
useKeyboardShortcuts : true
Wheter to use keyboard shortcuts to select image and start/stop a slideshow. Arrow left for previous image, arrow right for next image and space bar starts/stops the slideshow.
useThumbnails : true
If thumbnails should be used.
useFadingIn : true
If fading in should be used.
useFadingOut : true
If fading out should be used.
useFadeWhenNotSlideshow : true
If fading should be used when changing image and it is not during a slideshow.
useFadeForSlideshow : true
If fading should be used during a slideshow.
useDimBackgroundForSlideshow : true
If the background document should be dimmed out during a slideshow.
loopSlideshow : true
If the slideshow should loop and start all over.
usePreloading : true
If the large images should be preloaded, to get a smoother user experience. Lots of large images and using preloading will result in a larger server load.
startIndex : 0
What image to start with. = is the first image, and so on.
startSlideshowAtLoad : false
If the slideshow should start playing automatically as soon as the page has loaded.
dimBackgroundAtLoad : false
If the background should be dimmed out as soon as the page has loaded.
images : [
["images/picture1.jpg", "Text describing that picture"],
["images/picture2.jpg", "More descriptive text"]
]
Automatically set from the thumbnail links. If no thumbnail links are present, specify large images to use here.
thumbnailActivationEvent : "click"
What event on a thumbnail should change the large image to that one. E.g. "click", "mouseover".
mainImageId : "picture-slides-image"
The id of the HTML element which is the main image element.
fadeContainerId : "picture-slides-container"
The id of the HTML element containing the main image and text, and will fade in/out if enabled.
imageTextContainerId : "picture-slides-image-text"
The id of the HTML element containing the image text.
previousLinkId : "previous-image"
The id of the HTML element which is the previous image link.
nextLinkId : "next-image"
The id of the HTML element whcih is the next image link.
imageCounterId : "image-counter"
The id of the HTML element showing the image counter.
startSlideShowId : "start-slideshow"
The id of the HTML element which is the link to start the slideshow.
stopSlideShowId : "stop-slideshow"
The id of the HTML element which is the link to stop the slideshow.
thumbnailContainerId: "picture-slides-thumbnails"
The id of the HTML element containing all the thumbnail links and images.
dimBackgroundOverlayId : "picture-slides-dim-overlay"
The id of the HTML element which will be used to dim the background.
elementOnTopOfDimBackgroundId : "picture-slides-frame"
The id of the HTML element that won't be dimmed out.
fadeIncrement : 0.1
Amount for each step to increase/decrease the current fade level. Goes from 0 to 1, and vice versa.
fadeInterval : 50
Time between each fadeIncrement is triggered. Set in milliseconds, e.g. 1000 = 1 second.
timeForSlideInSlideshow : 2000
How long each slide is shown in a slideshow. Set in milliseconds, e.g. 1000 = 1 second.

Thumbnail class names applied in the script

In general no class names are applied, except for the chosen thumbnail's parent link, which will get the class: "selected".