jQuery Simple Controls Image Gallery Plugin

Simple Controls Gallery is a super simple jQuery gallery plugin that rotates and displays a group of images as an slidershow, with fading and overlay effects. It also displays navigation controls (pause, next, previous) when mouse hovers over a image.

How to use it:

1. Include the latest jquery library and simplegallery.js on your page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="simplegallery.js">

2. The CSS

<style type="text/css">
#simplegallery1 {
visibility: hidden; 
border: 10px solid darkred;
}
#simplegallery1 .gallerydesctext {
padding: 2px 5px;
}
</style>

3. The javascript

<script type="text/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/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
		["cave.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
		["fruits.jpg", "", "", "Eat your fruits, it's good for you!"],
		["autumn.jpg", "", "", ""]
	],
	autoplay: [true, 2500, 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"))
	},
	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)
	}
})

</script>

4. Markup

<div id="simplegallery1"></div>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.