Fade-In Slideshow

[irishcavan]

http://www.dynamicdrive.com/dynamici...nslideshow.htm

I would like to add a zooming transition to this slideshow... Irish

[jscheuer1]

Well, zoom is only readily available in IE but, I found a way, of sorts, to 'zoom in' in Mozilla. This mod will 'zoom in' in IE and 'zoom/fade in' in Mozilla:

<script type="text/javascript">

/***********************************************
* Fade-in 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
* Modified here to Zoom-in in IE & Mozilla by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var rate=100 //Set speed of image growth

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
fadeimages[3]=["photo4.jpg", "", ""] //plain image syntax
fadeimages[4]=["photo5.jpg", "", ""] //plain image syntax
fadeimages[5]=["photo6.jpg", "", ""] //plain image syntax
fadeimages[6]=["photo8.jpg", "", ""] //plain image syntax
fadeimages[7]=["photo9.jpg", "", ""] //plain image syntax

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

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

var ie4=document.all
var dom=document.getElementById
if(!ie4)
var childImg

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;zoom:10%;-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;zoom:10%;-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.style.zoom=curpos+'%'
else if (tempobj.style.MozOpacity){
tempobj.style.MozOpacity=curpos/101
if (typeof tmpH!=='undefined'){
childImg.height=tmpH*(curpos/100)
childImg.width=tmpW*(curpos/100)
}
}
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
if (!ie4){
childImg=tempobj
while (childImg.firstChild){
childImg=childImg.firstChild
if (childImg.tagName.toLowerCase()=='img')
break
}
tmpW=childImg.width
tmpH=childImg.height
}
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",rate)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.style.zoom=curpos+'%'
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

Added Later:

I've posted a more extensive and robust demo mod of this script at my Jungle

[irishcavan]

John, this is something along the lines of what I am trying to do: http://members.shaw.ca/anirishtouch/videotest.htm <-- this is a sample video... Irish

[jscheuer1]

Your file did nothing here until I upgraded my WMP, still nothing in FF though. This sort of thing would never be able to be done so smoothly, crossbrowser with javascript. It is a perfect candidate for flash, which I would recommend for this because it is smooth and crossbrowser. The size of the images used in the video appear much larger when I run just the video rather than the demo page. If the demo is the size you are shooting for, Flash would be fine.

[irishcavan]

thats kinda what i figured... i just hoped not... lol... thanks, john, you have been an awesome help... Irish

[jscheuer1]

Another thought, using a video might be easier than flash but, you'd want to scale down the width, height and quality for a smaller file size (it takes awhile to load as it is now, and I have broadband) and convert it to .mov format which is more universally supported than the .wmv format.