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:
curimage
: Contains the current image being shown as a regular DOM object. Probingcurimage.src
for example would return the image's path.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.this
: The keyword "this
" when used insideoninit()
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 isthis.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 "
" 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:
curimage
: Contains the current image being shown as a regular DOM object. Probingcurimage.src
for example would return the image's path.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.this
: The keyword "this
" when used insideonslide()
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 isthis.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