Cut & Paste Flexible Image Slideshow

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Flexible Image Slideshow

Credit: JavaScript Kit

Description: This Image Slideshow incorporates some of the most user-requested features all into one neat package, such as optional hyperlinked images, random display order and stop slideshow after x iteration. Finally a JavaScript image slideshow that caters to your specific needs! The official feature list:

Each image can be optionally hyperlinked (or not), and contain its own link target.
The images do not have to be of the same dimensions.
Set the display order of the images- sequential (like most slideshows), or random order.
Set the number of iterations before the slideshow stops, such as "1", or "continuous" etc.
Choose whether the images should be preloaded.

Example:

Directions: Simply add the below script to where you wish the slideshow to appear:

<script type="text/javascript"> // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['dinosour.gif', '', ''] ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new'] ultimateshow[2]=['pig.gif', 'http://www.codingforums.com', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="300px" //set to width of LARGEST image in your slideshow var slideheight="261px" //set to height of LARGEST iamge in your slideshow var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="no" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> <p style="font: normal 11px Arial">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

Then refer to the comments inside it to customize it. Enjoy!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info