PDA

View Full Version : Fade In Slideshow v1.51



aortey
10-07-2007, 08:54 PM
Hi All,

I tried to modify this script to allow me to specify a div in which to place the Slideshow rather than creation by JavaScript.

My code changes are included below, although close the transition from image to image seems 'odd' and only seems to work every other swap. Anybody any ideas?

Thanks
Andy.

----CODE FOLLOWS--- SORY IT'S SO BRIEF CAN'T GET IT TO POST!!!
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder, inelement){
...

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
{
if (typeof inelement!="undefined")
{
FirstDIV=document.createElement('DIV');
FirstDIV.id='master'+this.slideshowid;
//FirstDIV.style.position='relative';
FirstDIV.style.width = fadewidth+'px';
FirstDIV.style.height = fadeheight+'px';
FirstDIV.style.overflow = 'hidden';
InDIV=document.createElement('DIV');
InDIV.id=this.canvasbase+'_0';
//InDIV.style.position= 'absolute';
InDIV.style.width =fadewidth+'px';
InDIV.style.height = fadeheight+'px';
InDIV.style.top =0;
InDIV.style.left =0;
InDIV.style.backgroundcolor = fadebgcolor;
InDIV.style.opacity = 0.1;
InDIV.style.filter = 'alpha(opacity=10)';
InDIV.style.MozOpacity =0.1;
InDIV.style.KhtmlOpacity =0.1;
FirstDIV.appendChild(InDIV);
In2DIV=document.createElement('DIV');
In2DIV.id=this.canvasbase+'_1';
//In2DIV.position = 'absolute';
In2DIV.width =fadewidth+'px';
In2DIV.height = fadeheight+'px';
In2DIV.top =0;
In2DIV.left =0;
In2DIV.style.backgroundcolor = fadebgcolor;
In2DIV.style.opacity = 0.1;
In2DIV.style.filter = 'Microsoft.alpha(opacity=10)';
In2DIV.style.MozOpacity =0.1;
In2DIV.style.KhtmlOpacity =0.1;
$(FirstDIV).appendChild(In2DIV)
$(inelement).appendChild(FirstDIV)
}
else
document.write(...std code...)
}
else
{
if (typeof inelement!="undefined")
{
FirstDIV=document.createElement('DIV');
In = document.createElement('IMG');
In.name='defaultslide'+this.slideshowid;
In.src=this.postimages[0].src;
$(FirstDIV).appendChild(In)
$(inelement).appendChild(FirstDIV)
}
else
document.write(...std code...);
}

...
}

-- MARKUP --
new fadeshow(fadeimages, 234, 272, 1, 5000, 1, null)
new fadeshow(fadeimages, 234, 272, 1, 5000, 1, null, 'aohere')

--ORIGINAL SCRIPT--
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

You'ss see the first (and std code as given on this site works as expected) yet the modified one has 'issues'! thanks again.

ddadmin
10-09-2007, 04:11 AM
Why not just put the script inside the desired DIV, so its output is contained within that DIV? Anyhow, to answer your question, try something like the below modified script:


<div id="somelement"> </div>

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

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, pause, displayorder, inelement){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
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)
var slideshowHTML='<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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>'
else
var slideshowHTML='<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>'
document.getElementById(inelement).innerHTML=slideshowHTML

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.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 if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=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)
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 (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==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.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/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

<body>

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0, "", "somelement")

</script>