Contents

Slides

Introduction

Slides is a plug-in for jQuery that turns a single image element into an photo slideshow. It makes a beautiful cross fading slideshow of images, without the need to change any of the existing HTML code of the web page.

Download

You can download the artifacts directly from here:

Source code repository

Or if you want, the source code is directly available from the repository at the link below:

https://github.com/olle/slides

Documentation

You need to download and add both jQuery and the Slides Plug-in JavaScripts to your HTML-code. We recommend putting the code at the bottom of you page, in order to avoid having the page wait for the images or the scripts to load.

Slides uses a regular IMG-element as the base for the slideshow. There is no need add any extra lists of images to your HTML. Make sure the image has an ID-attribute defined or some other unique selector.

Start a slideshow by using jQuery, matching the slideshow image and calling the Slides Plug-in: $("#puppy-slides").Slides(...). A full example is shown in the code below.


<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Slides</title>
   </head>
   <body>
      <img id="puppy-slides" src="http://farm3.static.flickr.com/2370/1606964295_8cfba4ae4e.jpg?v=0" alt="Woggies!" />
      <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
      <script type="text/javascript" src="js/jquery.slides.js"></script>
      <script type="text/javascript">
         $('#puppy-slides').Slides({images : [
            'http://farm4.static.flickr.com/3052/3086132328_e2041be795.jpg?v=0',
            'http://farm3.static.flickr.com/2218/2753093913_c7a17dfca0.jpg?v=0',
            'http://farm4.static.flickr.com/3153/2732124517_9ce1d5f033.jpg?v=0',
            'http://farm3.static.flickr.com/2370/1606964295_8cfba4ae4e.jpg?v=0'
         ]});
      </script>
   </body>
</html>

Slideshows built with Slides are unintrusive in the way a they work with elements of an HTML-page. So to make a slideshow with Slides, you first need to define the img element and ensure there is a unique way to address it through a jQuery selector.

In the example above we're using the id="puppy-slides" attribute for this. Below you can see how the example slideshow above will look like.

Woggies!