JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<div id='mydiv' style="position: relative;width: 100px; height: 100px">&nbsp;</div>

CSS

ul.fpthumbs{ /*thumbnails main UL list*/
list-style-type:none;
margin:0;
padding:0;
position:absolute;
left:100;
bottom:10px;
width:98%;
}

ul.fpthumbs li{
display:inline;
margin-right:10px; /*spacing between each thumbnail*/
}

ul.fpthumbs li img{
border:2px solid white;
background:gray;
cursor:hand;
cursor:pointer;
margin-top:5px;
width:50px;
height:50px;
}

ul.fpthumbs li img.selected{
border-color:red;
}

JavaScript

$(function() {
    $('#mydiv').draggable();
    //$('#mydiv').resizable();
});

var fpslideshowvar={
    baseurl: "http://www.javascriptkit.com/script/script2/fpslideshow/",
    images: [
        [0, "sunset.jpg", "Apr 25, 2010 19:11:09"],
        [1, "tropical.jpg", "Apr 25, 2010 19:11:16"],
        [2, "birds.jpg", "Apr 25, 2010 19:10:35"],
        [3, "waterdrop.jpg", "Apr 25, 2010 19:11:24"],
        [4, "legs.jpg", "Apr 25, 2010 19:11:03"],
        [5, "fisherman.jpg", "Apr 25, 2010 19:10:51"],
        [6, "church.jpg", "Apr 25, 2010 19:10:42"],
        ["placeholder"]
    ],
    desc: []
    
}
 var fullpageslideshow={
    imagesarr:[], layers:null, thumbs:null, layerorder:{fg:1, bg:0}, curimage:0, previmage:0,
    setting:{fadeduration:1000, autorotate:{enabled:true, pause:3000}, thumbdimensions:[50,50], sortby:'date', thumbdir:''},

    signalcomplete:function(){
        var slideshow=this, imagesarr=this.imagesarr, thumbs=this.thumbs, templayer=this.templayer, setting=this.setting, imagecount=0
        function createthumbnail(i, imageref, thumbref){
            var thumbimgsrc=(setting.imagesobj.baseurl)? setting.thumbdir+setting.imagesobj.images[i][1] : imageref.src
            thumbref.html('<img src="'+thumbimgsrc+'" style="width:'+setting.thumbdimensions[0]+'px;height:'+setting.thumbdimensions[1]+'px" />')
            thumbref.find('img:eq(0)').css({opacity:0.3})
        }
        function process(i, imageref, thumbref){
            templayer.append('<img src="'+imageref.src+'" />')
            var tempimage=templayer.find('img:last')
            imageref._specs={w:tempimage.width(), h:tempimage.height()}
            thumbref.find('img:eq(0)').css({opacity:1})
            if (i==slideshow.curimage){ //if first image has loaded
                slideshow.changeimage(slideshow.curimage, true)
                if (setting.autorotate.enabled)
                    setting.rotatetimer=setInterval(function(){slideshow.cycleimage()}, setting.autorotate.pause)
...