Home Image Effects Image Galleries and Viewers Simple Controls Gallery Developer's View
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="simplegallery.css"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="simplegallery.js">
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s
more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [250, 180], //width/height of gallery in [pixels, pixels] or
['percentage%', pixels]
imagearray: [
["http://dynamicdrive.com/dynamicindex4/pool.jpg", "http://en.wikipedia.org/wiki/Swimming_pool",
"_new", ""],
["http://dynamicdrive.com/dynamicindex4/cave.jpg", "http://en.wikipedia.org/wiki/Cave",
"", ""],
["http://dynamicdrive.com/dynamicindex4/fruits.jpg", "", "", ""],
["http://dynamicdrive.com/dynamicindex4/autumn.jpg", "", "", ""]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec,
cycles_before_stopping_int]
persist: false,
scaleimage: 'both', //valid values are 'both', 'width', or 'none'
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//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>
</head>
<body>
<div id="simplegallery1" class="simplegallery"></div>
</body>
</html>