I’ve had a few versions of my PictureSlides to create JavaScript slideshows, but now it has been completely rewritten and jQuery-optimized with some new control and features.

The background story is that I needed a basic version of it in a client project, so while I had dusted it off, I took some extra time of my own to rewrite it and specialize it for jQuery, as well as working out some kinks it had.

The new version, 2.0, offers:

• Any number of slideshows in the same page.
• Nice CSS-based presentation features, like dimming out the background (Lightbox-like), autoplay, linking chosen images to another web page at click, thumbnail charts etc.
• Correctly waiting for images to load before display time is being started.
• Possible to customize errors if an image fails to load.
• Completely builds on top of existing HTML code, making it very easy to use it on top of a non-JavaScript base version.
• New JSON-object like syntax for each PictureSlides instance
• No extra settings file – all settings are in each slideshow instantiation, making it each instance completely customizable

A few PictureSlides demos

I have created three fairly simple demos of PictureSlides in action, where you can download all the code for each demo in a single package which will work right away for you:

• Picture gallery
• Slideshow only and autoplay
• Large image with navigation links

How to use it in a web page

Here are some basic instructions, taken from the PictureSlides implementation page.to help you get started (in the implementations page, you will also find all available settings).

Include JavaScript files

Start by including the latest version of jQuery (Minified version suggested):

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

Then, include the PictureSlides file:

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

Then, within the web page or a separate JavaScript file, you can customize how PictureSlides should work and how it should be presented. You can also have any number of slideshows in the same page.

Create an HTML page

Create a web page where you put all the HTML that you want to use. This is example HTML prepared for being used with PictureSlides. NOTE! Each slideshow has to be surrounded with an element with the class picture-slides-container.

<div class="picture-slides-container">
	<div class="picture-slides-fade-container">
		<a class="picture-slides-image-link"><img class="picture-slides-image" src="pictures/1.jpg" alt="This is picture 1" /></a>
	</div>

	<div class="picture-slides-image-text">This is picture 1</div>

	<div class="navigation-controls">
		<span class="picture-slides-previous-image">Previous</span>
		<span class="picture-slides-image-counter"></span>
		<span class="picture-slides-next-image">Next</span>

		<span class="picture-slides-start-slideshow">Start slideshow</span>
		<span class="picture-slides-stop-slideshow">Stop slideshow</span>
	</div>

	<ul class="picture-slides-thumbnails">
		<li><a href="pictures/1.jpg"><img src="thumbnails/1.jpg" alt="" /></a></li>
		<li><a href="pictures/2.jpg"><img src="thumbnails/2.jpg" alt="" /></a></li>
		<li><a href="pictures/3.jpg"><img src="thumbnails/3.jpg" alt="" /></a></li>
		<li><a href="pictures/4.jpg"><img src="thumbnails/4.jpg" alt="" /></a></li>
		<li><a href="pictures/5.jpg"><img src="thumbnails/5.jpg" alt="" /></a></li>
		<li><a href="pictures/6.jpg"><img src="thumbnails/6.jpg" alt="" /></a></li>
		<li><a href="pictures/7.jpg"><img src="thumbnails/7.jpg" alt="" /></a></li>
		<li><a href="pictures/8.jpg"><img src="thumbnails/8.jpg" alt="" /></a></li>
	</ul>
</div>

Create JavaScript code

Then, for each slideshow you want, generate a PictureSlides JavaScript block to create all the settings. For example:

<script type="text/javascript">
	jQuery.PictureSlides.set({
		// Switches to decide what features to use
		useFadingIn : true,
		useFadingOut : true,
		useFadeWhenNotSlideshow : true,
		useFadeForSlideshow : true,
		useDimBackgroundForSlideshow : true,
		loopSlideshow : false,
		usePreloading : true,
		useAltAsTooltip : true,
		useTextAsTooltip : false,

		// Fading settings
		fadeTime : 500, // Milliseconds
		timeForSlideInSlideshow : 2000, // Milliseconds

		// At page load
		startIndex : 1,
		startSlideShowFromBeginning : true,
		startSlideshowAtLoad : false,
		dimBackgroundAtLoad : false,

		// Large images to use and thumbnail settings
		images : [
			{
				image : "pictures/1.jpg",
				alt : "Picture 1",
				text : "This is picture 1"
			},
			{
				image : "pictures/2.jpg",
				alt : "Picture 2",
				text : "This is picture 2",
				url : "http://robertnyman.com"
			},
			{
				image : "pictures/3.jpg",
				alt : "Picture 3",
				text : "This is picture 3",
				url : "http://456bereastreet.com"
			} // NOTE! No comma after the last object
		],
		thumbnailActivationEvent : "click",

		// Classes of HTML elements to use
		mainImageClass : "picture-slides-image", // Mandatory
		imageLinkClass : "picture-slides-image-link",
		fadeContainerClass : "picture-slides-fade-container",
		imageTextContainerClass : "picture-slides-image-text",
		previousLinkClass : "picture-slides-previous-image",
		nextLinkClass : "picture-slides-next-image",
		imageCounterClass : "picture-slides-image-counter",
		startSlideShowClass : "picture-slides-start-slideshow",
		stopSlideShowClass : "picture-slides-stop-slideshow",
		thumbnailContainerClass: "picture-slides-thumbnails",
		dimBackgroundOverlayClass : "picture-slides-dim-overlay"
	});
</script>

The most interesting part above is where you define what images should be used, what text they should have, and if they should link somewhere when being clicked:

images : [
	{
		// Path to large image
		image : "pictures/1.jpg",
		// Alternative text for large image
		alt : "Picture 1",
		// Descriptive text of large image
		text : "This is picture 1",
		// Optional. Address to link large image to
		url : "http://robertnyman.com"
	},
	{
		image : "pictures/2.jpg",
		alt : "Picture 2",
		text : "This is picture 2",
		url : "http://robertnyman.com"
	},
	{
		image : "pictures/3.jpg",
		alt : "Picture 3",
		text : "This is picture 3",
		url : "http://456bereastreet.com"
	} // NOTE! No comma after the last object
]

Download

To get the PictureSlides code, download the PictureSlides 2.0 JavaScript file, or use the code in either of the demo packages.