Slideshow jQuery Plugin

Include JavaScript library jQuery and (a)Slideshow plugin (with style):

 

 

Create any content:

Some text... on slide one

It's slide number two
It's slide number three

Some text... on slide four

It's slide number five
It's slide number six
It's slide number seven

Initialize slideshow:


//$(document).ready(function(){
$('#MySlideshow').slideshow();
});
//]]>

Methods

This is function work only with one slideshow

  • playSlide – play slideshow
  • stopSlide – stop slideshow
  • nextSlide – next slide (or first)
  • prevSlide – previouse slide (or last)
  • goToSlide – go to slide number N
  • getTitle – return title of current slide

 

Options

Frame Title

:

  • Atribute “alt” of images
  • Atribute “title” of links
  • First tag “label” of any other tags

Configuration options:


//$(document).ready(function(){
$('selector').slideshow({
width:320,      // width in px
height:240,     // height in px
index:0,        // start from frame number N
time:3000,      // time out beetwen slides
history:false,  // change/check location hash
title:true,     // show title
titleshow:false,// always show title
callback:null,  // callback function - call when slide changed - receive index and label
panel:true,     // show controls panel
play:false,     // play slideshow
loop:true,      // looping
effect:'fade',  // aviable fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY
effecttime:1000,// aviable fast,slow,normal and any valid fx speed value
filter:true,    // remove , empty

,

and other stuff
nextclick:false,      // bind content click next slide
playclick:false,      // bind content click play/stop
playhover:false,      // bind content hover play/stop
playhoverr:false,     // bind content hover stop/play (reverse of playhover)
playframe:true,       // show frame "Play Now!"
loadframe:true,       // show frame with "loading"
fullscreen:false,     // in full window size imgresize:false,      // resize image to slideshow window
imgzoom:true,         // zoom image to slideshow window (for smaller side)
imgcenter:true,       // set image to center
imgajax:true,         // load images from links
imglink:true,         // go to external link by click linkajax:false,       // load html from links
help:'Plugin homepage: (a)Slideshow'+
'Author homepage: Anton Shevchuk', controls :{         // show/hide controls elements
'hide':true,    // show controls bar on mouse hover
'first':true,   // goto first frame
'prev':true,    // goto previouse frame (if it first go to last)
'play':true,    // play slideshow
'next':true,    // goto next frame (if it last go to first)
'last':true,    // goto last frame
'help':true,    // show help message
'counter':true  // show slide counter
}
});
});
//]]>

Download: http://www.htmldrive.net/items/download/446

Be Sociable, Share!

Leave a comment