Cut & Paste Multi image slideshow

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Multi image slideshow

Credit: JavaScript Kit

Description: Think of it as multiple slideshows all jammed packed into one! The following script can handle more than one set of image slides. Toggle between them through text links. As an added bonus, you can specify whether each slide is linked to a unique URL. Very compact, and very cool!

Example:

Click on a book to learn about it

- JavaScript books
- DHTML books
- Flash books

Directions

Simply add the below to the <body> section of your page:

<script language="JavaScript1.2"> /*Multi image slideshow script- by javascriptkit.com Visit JavaScript Kit (http://javascriptkit.com) for script Credit must stay intact for use*/ //#1 SPECIFY number of slideshows var number_of_slideshows=3 //#2 SPECIFY interval between slide (2000=2 seconds) var interval=2000 //#3 SHOULD each slide be linked to a unique URL? var linked=1 var slideshows=new Array(number_of_slideshows) for (i=0; i <number_of_slideshows; i++) slideshows[i]=new Array() //#4 SPECIFY image paths of 1st slideshow slideshows[0][0]='car1.gif' slideshows[0][1]='car2.gif' slideshows[0][2]='car3.gif' //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2) slideshows[1][0]='house1.gif' slideshows[1][1]='house2.gif' slideshows[1][2]='house3.gif' //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3) slideshows[2][0]='boat1.gif' slideshows[2][1]='boat2.gif' slideshows[2][2]='boat3.gif' //EXTEND THIS ARRAY if more than 3 slide shows  var slidelinks=new Array(number_of_slideshows) for (i=0; i <number_of_slideshows; i++) slidelinks[i]=new Array() //#5 SPECIFY urls of 1st slideshow slidelinks[0][0]='http://mysite.com/car1.htm' slidelinks[0][1]='http://mysite.com/car2.htm' slidelinks[0][2]='http://mysite.com/car3.htm' //SPECIFY urls of 2nd slideshow (remove if number_of_slides=1) slidelinks[1][0]='http://mysite.com/house1.htm' slidelinks[1][1]='http://mysite.com/house2.htm' slidelinks[1][2]='http://mysite.com/house3.htm' //SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3) slidelinks[2][0]='http://mysite.com/boat1.htm' slidelinks[2][1]='http://mysite.com/boat2.htm' slidelinks[2][2]='http://mysite.com/boat3.htm' function clickredir(){ window.location=slidelinks[maininc][subinc] }  var maininc=0 var subinc=0 if (linked) document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>') else document.write('<img src="'+slideshows[0][0]+'" name="multislide">') function slideit(){ subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0 document.images.multislide.src=slideshows[maininc][subinc] } function setslide(which){ clearInterval(runit) maininc=which subinc=0 runit=setInterval("slideit()",interval) } runit=setInterval("slideit()",interval) </script> <p> - <a href="javascript:setslide(0)">JavaScript books</a><br /> - <a href="javascript:setslide(1)">DHTML books</a><br /> - <a href="javascript:setslide(2)">Flash books</a>

Follow the comments inside script to configure the various image paths, and optionally, their URLs.

Note how the text links are set up to launch a different slide show:

- <a href="javascript:setslide(0)">JavaScript books</a><br>
- <a href="javascript:setslide(1)">DHTML books</a><br>
- <a href="javascript:setslide(2)">Flash books</a>

The number (in red) informs the script which slideshow to load, with 0 being the first, 1 being the 2nd etc.

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