Code:
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["hfotsl.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "Tom initiated Holiday Builder's involvement with Homes for Our Troops, building a specially adapted home for an injured Veteran in Brevard County in 2008."],
["greensl.jpg", "", "", "Instrumental in leading Holiday Builders into the Energy Efficient and Green Building technologies, resulting in the first Energy Star qualified, FGBC certified green home in the HBCA of Brevard's Parade of Homes."],
["jdpowersl.jpg", "", "", "Tom was regional manager when Holiday Builders Received a JD Powers award in 2009."],
["extreme1sl.jpg", "", "", "Tom participated in the Extreme Makeover Home Edition: Space Coast build as a Project Lead."],
["extremesl.jpg", "", "", "Tom and Betsy at kickoff ceremony for Extreme Makeover Home Edition: Space Coast"]
],
autoplay: [true, 5000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
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"))
var show = this;
this.setting.$wrapperdiv.hover(function(){
show.navigate("play/pause");
}, function(){
show.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)
this.showhidedescpanel("show")
}
})
</script>
But you might want to increase the number of rotations (recommended):
Code:
autoplay: [true, 5000, 10000], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
And, you might want the image to change immediately on mouse out (optional, a matter of taste):
Code:
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
var show = this;
this.setting.$wrapperdiv.hover(function(){
show.navigate("play/pause");
}, function(){
show.navigate('next');
show.navigate("play/pause");
});
},
Bookmarks