jQuery Simple Controls Gallery v1.3

This entry was posted on March 30th, 2009 and is filed under javascript, jQuery.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.

Il plugin che vi presento oggi appartiene alla carrellata di script per lo slideshow delle immagini. Quello di oggi si chiama Simple Controls Gallery.

Il plugin è molto semplice da personalizzare in tutte le sue componenti attraverso un semplice foglio di stile CSS. Il funzionamento è altrettanto semplice, dopo aver importato la libreria jQuery, il file js del plugin e l’immagine per i controlli dell’immagine è sufficiente inserire il codice seguente:
Javascript

var mygallery=new simpleGallery({
 wrapperid: "simplegallery1", //ID of main gallery container,
 dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
 ["pool.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", ""],
 ["cave.jpg", "http://en.wikipedia.org/wiki/Winter", "", ""],
 ["fruits.jpg", "", "", ""],
 ["autumn.jpg", "", "", ""]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: false,
 fadeduration: 500, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
 //Keyword "this": references current gallery instance
 //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
 //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})

HTML