PictureSlides

How do I use it in a web page?

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. URL 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
]

Most likely, you will want to dynamically generate the image code above on the server through ASP.NET or PHP. To do that, just create an array like above code (after the PictureSlides JavaScript file has been included):

Settings and parameters

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.
useAltAsTooltip : true
If respective image's alt text should also be used as its tooltip text.
useTextAsTooltip : true
If respective image's description text should also be used as its tooltip text.
fadeTime : 500
How long each slide's fade time is. 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.
startIndex : 1
What image to start with. 1 = is the first image, and so on.
startSlideShowFromBeginning : 1
If the slideshow should start from the first image, or the currently selected one.
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 : // Please see example code above
What images to use, what text they should have, and if they should link anywhere.
thumbnailActivationEvent : "click"
What event on a thumbnail should change the large image to that one. E.g. "click", "mouseover".
mainImageClass : "picture-slides-image"
The class of the HTML element which is the main image element.
mainImageFailedToLoadClass : "picture-slides-image-load-fail"
The class of the HTML element to display if the loading of the large image fails.
imageLinkClass : "picture-slides-image-link"
The class of the HTML element which is the link around the main image element.
fadeContainerClass : "picture-slides-fade-container"
The class of the HTML element containing the main image and text, and will fade in/out if enabled.
imageTextContainerClass : "picture-slides-image-text"
The class of the HTML element containing the image text.
previousLinkClass : "picture-slides-previous-image"
The class of the HTML element which is the previous image link.
nextLinkClass : "picture-slides-next-image"
The class of the HTML element whcih is the next image link.
imageCounterClass : "picture-slides-image-counter"
The class of the HTML element showing the image counter.
startSlideShowClass : "picture-slides-start-slideshow"
The class of the HTML element which is the link to start the slideshow.
stopSlideShowClass : "picture-slides-stop-slideshow"
The class of the HTML element which is the link to stop the slideshow.
thumbnailContainerClass: "picture-slides-thumbnails"
The class of the HTML element containing all the thumbnail links and images.
dimBackgroundOverlayClass : "picture-slides-dim-overlay"
The class of the HTML element which will be used to dim the background.

Class names applied in the script

In general no class names are applied, except for these:

  • The chosen thumbnail's parent link, which will get the class: picture-slides-selected-thumbnail
  • The navigation links (Previous/Next) which will get the class name picture-slides-disabled, if you can't navigate more in that direction
  • The picture-slides-container will also get the class picture-slides-dimmed-background when the background is dimmed out