Taking advantage of the oninit() and onslide() event handlers

The oninit() and onopenclose() event handlers of the script let you execute custom code when your slideshow loads initially, plus each time it finishes sliding. Using them, you can easily extend the script with additional, custom behaviour. Lets look at each one separately.

The oninit(curimage, index) event

The oninit() event is fired once, when your Slideshow instance has finished loading on the page. It is passed two parameters and the slideshow instance itself:

  1. curimage: Contains the current image being shown as a regular DOM object. Probing curimage.src for example would return the image's path.
  2. index: Returns the index of the current image relative to its peers, starting from 0. For example, a value of 1 indicates this is the 2nd image.
  3. this: The keyword "this" when used inside oninit() accesses the current slideshow instance (variable). This is very useful for accessing internal variables of the slideshow, such as all of the user defined settings, which is this.setting. More info below.

Lets see how the oninit() event works now. The below gets some basic info about the slideshow, such as its ID, dimensions, and number of images, and displays it when the slideshow loads. It makes use of the "this" keyword to access the user defined settings of the script, by way of this.setting:

var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["lakeside.jpg", "", "", "A nice day to get the skates out and go ice skating."],
  ["stadium.jpg", "", "", "Every year tens of thousands of visitors visit the Coliseum in Rome."],
  ["winter.jpg", "", "", "This is a rather depressing, yet stunning scene."],
  ["duck.jpg", "", "", "Lets help ensure there will always be places like this for future generations."] //<--no trailing comma after very last element
 ],
 displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "peekaboo",
 togglerid: "",
 oninit:function(curimage, index){
  var setting=this.setting
  var showid="<b>Slideshow ID:</b> " + setting.wrapperid + "<br />"
  var showdimensions="<b>Slideshow Dimensions:</b> " + setting.dimensions + "<br />"
  var totalimages="<b>Total Images:</b> " + setting.imagearray.length + "<br />"
  var firstimagelink="<b>First slide is hyperlinked to:</b> " + setting.imagearray[0][1] + "<br />"
  jQuery('#info').html(showid+showdimensions+totalimages+firstimagelink)
 }
})

Whatever code we put inside the oninit() event is executed once when the slideshow loads. Here I'm probing this.setting to gain access to all the settings I've defined for this slideshow, such as the slideshow's ID (this.setting.wrapperid), or the image array (this.setting.imagearray).

The onslide(curimage, index) event

The onslide() event can be thought of as the big brother to oninit(). It fires each time the slideshow changes and displays an image. This means onslide fires when the slideshow displays the very first image (just like oninit()), but also, each time the image changes. Like oninit(), it is passed two parameters plus the this keyword:

  1. curimage: Contains the current image being shown as a regular DOM object. Probing curimage.src for example would return the image's path.
  2. index: Returns the index of the current image relative to its peers, starting from 0. For example, a value of 1 indicates this is the 2nd image.
  3. this: The keyword "this" when used inside onslide() accesses the current slideshow instance (variable). This is very useful for accessing internal variables of the slideshow, such as all of the user defined settings, which is this.setting.

In the following demo, I use onslide() to display the descriptions of the slideshow outside of the regular interface, by first disabling the showing of descriptions inside the initialization code, then using onslide to show them in the desired manner instead.

var mygallery2=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["lakeside.jpg", "", "", "A nice day to get the skates out and go ice skating."],
  ["stadium.jpg", "", "", "Every year tens of thousands of visitors visit the Coliseum in Rome."],
  ["winter.jpg", "", "", "This is a rather depressing, yet stunning scene."],
  ["duck.jpg", "", "", "Lets help ensure there will always be places like this for future generations."] //<--no trailing comma after very last element
 ],
 displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "none",
 togglerid: "",
 onslide:function(curimage, index){
  var imagearray=this.setting.imagearray
  jQuery('#info2').html(imagearray[index][3])
}

})

The DIV with ID="info2" is populated with the current image's description, or imagearray[index][3]. This is derived by using this.setting to first access the user defined settings, then imagearray, and eventually, the array element corresponding to the current image, or imagearray[index]. Then, to access the description of the current image, we refer to the 4th item within imagearray[index], since that's the position it's defined within the element itself.

Aren't not much to it right?

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post