PDA

View Full Version : Script with OnClick slideshow?



Red
04-21-2006, 09:14 PM
I am looking for a script that will start a slideshow in the location of a graphic already on my page then end with that same graphic and allow you to run it multiple times. Any suggestions? This (http://www.prairieforgemetal.com/workshop.htm)is the site that I need it for, if that helps.

There really should be a posting icon that is a smilie with smoke coming out of the head because that's how I feel!

Thanks for your help.

jscheuer1
04-21-2006, 10:09 PM
That should be able to be worked out from most existing slideshows, with some modification. From looking at your page, it looks like you would want a fade-in type slideshow, is that true? Let's also get this straight, you would like an image on your page that just happens to be the first image in a slideshow. This image has an onclick event, if you click on it, it gets replaced by the second image and from there on out the slideshow just continues to run, repeating itself in an endless loop.

Red
04-22-2006, 03:55 PM
Thanks for looking at this, John, I really appreciate it.

The slideshow doesn't have to fade in, but if it does that's great too. You are correct about my wanting the first image to show then onclick go to the second image, but I don't think I want it to continuously loop. Ideally I would like it to stop after one run, with the option of running again onclick, but I will take what I can get.

jscheuer1
04-22-2006, 07:54 PM
If I've read your requirements correctly, this should fit the bill. Sorry, no fading in Opera but, it is rumored that the next major Opera release will support the type of fading this script uses. All other browsers that support some type of partial opacity should fade in. Configuration is similar too but simpler (many options that made no sense for this type of slideshow have been removed) than DD's Ultimate Fade-In Slideshow (v1.5) (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) from which this script was adapted with additions to make it Safari friendly as well. I also have included the style and markup for DD's recommended centering method, it can be removed if not required:


<!DOCTYPE html>
<html>
<head>
<title>Click to Start, Cycle Once Fade-In Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

<script type="text/javascript">
/***********************************************
* Click to Start, Cycle Once Fade-In Slideshow based on:
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for the original script and 100s more.
* Modified here by jscheuer1 in http://www.dynamicdrive.com/forums
* 7/5/12 - update to select opacity 1st for IE 9+
***********************************************/

var fadeimages=new Array() //Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg"]
fadeimages[1]=["photo2.jpg"]
fadeimages[2]=["photo3.jpg"]
fadeimages[3]=["photo4.jpg"]
fadeimages[4]=["photo5.jpg"]
fadeimages[5]=["photo6.jpg"]
fadeimages[6]=["photo7.jpg"]

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay){
var tempimage=theimages[0]
for (var i_tem = 0; i_tem < theimages.length-1; i_tem++)
theimages[i_tem]=theimages[i_tem+1]
theimages[theimages.length-1]=tempimage
this.flag=1
this.mouseclickcheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=theimages.length-1
this.nextimageindex=0
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.style.opacity&&typeof addEventListener !== 'undefined')
obj.tempobj.style.opacity=obj.degree/101
else if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
if(obj.flag){
obj.mouseclickcheck=1
obj.flag=0
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (picindex==this.theimages.length-1)
slideHTML+='<img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
else
slideHTML+='<img title="" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
var cacheobj=this
if (this.mouseclickcheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.style.opacity&&typeof addEventListener !== 'undefined')
crossobj.style.opacity=this.degree/101
else if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onclick=function(){cacheobj.mouseclickcheck=0}
this.rotateimage()
}

</script>
</head>
<body>
<div class="centerdiv">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay)
new fadeshow(fadeimages, 140, 225, 0, 3000)
</script>
</div>
</body>
</html>