<!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>