JSFiddle - React, Tailwind, and code Playground
HTML
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<style type="text/css">
#simplegallery2 {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}
#simplegallery2 .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js">
</script>
<script type="text/javascript">
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://creativeoverflow.net/wp-content/uploads/2009/09/Girl.jpg", "#", "_new", "IMAGE DESCRIPTION HERE"],
["http://farm4.static.flickr.com/3346/3315027421_c69798dcf1.jpg", "#", "_new", "IMAGE DESCRIPTION HERE"],
["http://img.psdvault.com/2010/10/paint-face-effect-500x366.jpg","#", "_new", "IMAGE DESCRIPTION HERE"],
["http://www.denisdesigns.com/blog/wp-content/uploads/2009/03/textonfire_13.jpg", "#", "_new", "IMAGE DESCRIPTION HERE"],
["http://media.cnbc.com/i/CNBC/Sections/News_And_Analysis/_News/_SLIDESHOWS/BeerHolidays/SS_Beer_drinking_holidays_cvr2.jpg", "#", "_new", "IMAGE DESCRIPTION HERE"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //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...