PDA

View Full Version : Multiframe Slideshow: Stop w/Specific Images?



PegasusTech
03-06-2010, 06:36 PM
Script: MultiFrame slideshow script (http://www.dynamicdrive.com/dynamicindex14/multiframeslide.htm)

I love the multiframe slideshow script. For an artist site, it displays 4 Kachina dolls, each doll has 4 views, so a total of 16 pics. Rather than a repeating cycle, I'd like for it to stop at the end of the 16 pics and display the first pic of each of the four dolls. Is this possible?

Here's the link: http://naminghaarts.com/2.html

Toni
Pegasus Technology Services, Inc.

ddadmin
03-07-2010, 12:10 AM
Try the below modified .js file, which should stop the slideshow when it's done showing all your images the first time around:


<script type="text/javascript">

/***********************************************
* MultiFrame Image Slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["dd1.gif", "http://www.dynamicdrive.com"]
seqslides[1]=["dd2.gif", "http://www.javascriptkit.com"]
seqslides[2]=["dd3.gif", "http://www.google.com"]
seqslides[3]=["dd4.gif", "http://www.yahoo.com"]
seqslides[4]=["dd1.gif", "http://www.google.com"]
seqslides[5]=["dd2.gif", "http://www.yahoo.com"]

//Set pause between each image display (2000=2 second):
var slidedelay=1000

//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=2

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater="<br>"

//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"

//Set image border width:
var imgborderwidth=0

//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]

///No need to edit beyond here///////////

function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle

if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}

function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}

function displayit(){
if (curimgindex+1==seqslides.length)
clearInterval(multitimer)
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}

function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}

if (document.getElementById)
var multitimer=setInterval("displayit()",slidedelay)


</script>

Change the images to your own obviously.