Slideshow

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27398942.html#a37004527

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='ratio'></div>
<div id='mydiv' style="position: relative;width: 100%; height: 100%">&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%;
    display: none;
}

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.queness.com/resources/html/slideshow/images/",
    images: [
        [0, "flowing-rock.jpg", "Apr 25, 2010 19:11:09"],
        [1, "grass-blades.jpg", "Apr 25, 2010 19:11:16"],
        [2, "ladybug.jpg", "Apr 25, 2010 19:10:35"],
        [3, "lightning.jpg", "Apr 25, 2010 19:11:24"],
        [4, "lotus.jpg", "Apr 25, 2010 19:11:03"],
        [5, "mojave.jpg", "Apr 25, 2010 19:10:51"],
        [6, "pier.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) {
                   ...