PictureSlides 2.0 – highly customizable option to create JavaScript slideshows

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.

An example image of PictureSlides

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:

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.

Posted in Developing,JavaScript,jQuery,Technology |

15 Comments

  • icaaq says:

    nice one :-)

    BUT is the latest version really 1.2.6, I thought it was 1.3.2 :-)

  • Robert Nyman says:

    icaaq,

    Thank you!

    And of course you are right, it was just an old copy and paste error – fixed now!

  • Jb says:

    I might be wrong, but the "jQuery plugin" version seems to have lost the possibility of filtering images with tags, using for example checkboxes.

    I can't find the way to do it, as it was possible in the older version :
    http://www.robertnyman.com/jas/

    Thanks,

  • Robert Nyman says:

    Jb,

    That is correct. In the transition from JAS to PictureSlides, the support for tagging was removed.

  • [...] in dotnet, vb, vb.net | No Comments » I am using Pictureslides (jquery slideshow); I would like to know how to write HTML (paragraphs and links) within the [...]

  • Emiliano says:

    Hello I would like to use this script but I can not wrap the text in the caption of the photo. In practice, the parameter named “text” of the array “Images”.
    I have tried using “\ n” or by entering the tag “” but I think the script to do a replace on the string.
    how can I do?
    thanks

  • Robert Nyman says:

    Emiliano,

    The character \n will never generate a line break in an HTML page. Maybe you can add HTML there and a <br> element, or just make sure in the CSS for the element that presents the caption that it wraps.

  • Emiliano says:

    Thanks but I could not explain.
    I am in the script within the HTML page. I write the “Descriptive text” in the parameter “text” (see below)

    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 a picture, \n my Descriptive text”
    / / Optional. Address to link to large image
    url: “http://robertnyman.com”
    }

    To wrap, I tried to insert “\ n” as they are in javascript but it think there is a replace. Back to the text without “\ n”.
    I tried to use the HTML tag “BR” but is mistaken as a string and print the page inside the div class = “picture-slides-image-text”.

    / / Descriptive text of large image
    text: “This is a picture, br/ my Descriptive text”

    Is there a solution to replace the inside of Jquery?
    Is there a solution to capture the “Descriptive text” in the div “picture-slides-image-text and format it at will?

    Thanks

  • Laura says:

    This is exactly what I have been looking for. Thank you so much for posting this! I am sort of new to coding so I was wondering if there is a way for the title and the back and next buttons to be inline?

  • Laura says:

    Is there any way to make the title and the back and next buttons inline? I keep breaking it.

  • Kathy says:

    I’m having an issue getting the gallery to work properly. The first 2 slideshow images seem to force the rest of the images (6 in total) to create a new row when cycling through the slideshow. The rest of the photos seem to work OK. You can view at the following link:

    http://axislighting.com/gallery

    I reviewed the code and I don’t see any difference between the first 2 images and the rest of them. What’s causing them to jump?
    Thanks!

  • Robert Nyman says:

    Kathy,

    It is because the border rendered outside the thumbnail. To make sure to avoid that, add a transparent border to all thumbnails, i.e. border: 1px solid transparent.

  • Kathy says:

    Thanks so much Robert. Things are working now.

  • Amazing! This blog looks just like my old one!
    It’s on a totally different subject but it has pretty much the same
    layout and design. Outstanding choice of colors!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>