Slideshow - slideshow - Documentation

Updated Mar 16, 2009 by aeron.glemann
Labels:	Featured, Phase-Implementation

Slideshow

Documentation

Looking for help? Please post your questions to the Slideshow Google Group!

Method: constructor
Method: load
Method: destroy
Method: first
Method: prev
Method: pause
Method: next
Method: last
Method: go

Method: constructor

Creates an instance of the Slideshow class. Applied to an existing element(s) in the HTML. Can parse in existing images, alt attributes, thumbnails, etc. or create as necessary.

Syntax:

var myShow = new Slideshow(element, data, options);

var data = {
  // In this case no thumbnail has been specified so Slideshow will generate the thumbnail filename from the image using the RegExp defined in the replace option
  '1.jpg': {
    caption: 'Keylin', 
    href: 'keylin.html'
  },
  // Here the image and thumbnail use the same filename but different directories and an example of captions with HTML
  'images/2.jpg': {
    caption: '<em>Gustavo</em>', 
    href: 'gustavo.html',
    thumbnail: 'thumbs/2.jpg'
  },
  // In this example the image and thumbnail use absolute filenames
  'http://images.mysite.com/images/3.jpg': {
    caption: 'Amalia',
    thumbnail: 'http://images.mysite.com/thumbs/2.jpg'
  }
};

Example 1: data passed in as an array; show is linked to a static url (href: 'portfolio.html').

<div id="my_show" class="slideshow">
  <img src="1.jpg" alt="Keylin" />
</div>

<script type="text/javascript">
  var data = ['1.jpg', '2.jpg', '3.jpg'];

  var myShow = new Slideshow('my_show', data, {href: 'portfolio.html', hu: 'images/'});
</script>

Example 2: data passed in as an object with captions and links for each image; controller customized with an Fx options object.

<div id="my_show" class="slideshow">
  <img src="1.jpg" alt="Keylin" />
</div>

<script type="text/javascript">
  var data = {'1.jpg': {caption: 'Keylin', href: 'keylin.html'}, '2.jpg': {caption: 'Gustavo', href: 'gustavo.html'}, '3.jpg': {caption: 'Amalia', href: 'amalia.html'}};

  var myShow = new Slideshow('my_show', data, {captions: true, controller: {duration: 1000, transition: Fx.Transitions.Elastic.easeOut}, hu: 'images/'});
</script>

Example 3: data passed in as an array; slides are auto-linked to the full-size image (linked: true); there is a default anchor in the HTML with a REL attribute (rel="lightbox"), this attribute will be duplicated for all auto-generated links allowing for easy pairing with a 3rd-party Lightbox script.

<div id="my_show" class="slideshow">
  <a rel="lightbox" href="1.jpg"><img src="1.jpg" alt="Keylin" /></a>
</div>

<script type="text/javascript">
  var data = ['1.jpg', '2.jpg', '3.jpg'];

  var myShow = new Slideshow('my_show', data, {controller: true, hu: 'images/', linked: true});
</script>

Notes:

¹ Captions, controller, loader and thumbnails all accept either a boolean (true / false) or Fx options object to customize element effect. In the case of the loader, the object also accepts an additional attribute 'animate' with the value an array consisting of a filename and frame count. Things get a little more complicated here: the filename should use the '#' symbol to indicate frame number. For example, the default value: { 'animate': ['../css/loader-#.png', 12] } assumes there are 12 images at the path indicated named loader-0.png through loader-11.png. The purpose of all this is for the loader to animate a series of PNG images in place of the usual animated GIF (which cannot blend with the images in the Slideshow). Assuming you are using a series of PNG images Slideshow will automatically apply the correct filters for Internet Explorer 6.

² Centering will not work as anticipated if the CSS classes used to define the effects of the show include absolute positioning. For this reason, it is recommended to use image margins to animate slide changes. For a demonstration, please consult the example.
³ Internally the classes are in the following order: [ 'Slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'controller', 'thumbnails', 'captions', 'images', 'hidden', 'visible', 'inactive', 'active', 'loader' ]. Therefore if you wanted to change the name of the classes used for the controller (which also affects the HTML titles used for the controls themselves) you would set: classes: ['', 'primero', 'anterior', 'comenza', 'pausa', 'proximo', 'ultimo']. Class names left empty or not specified will use the Slideshow defaults.