Flash/Rotating image header

[outeredge2]

2 part question:

1st. Is there a way to ad a flash file to the website?

2nd. What is the best way to create and upload a rotating image on a page which rotates every 10 secs or so?

[saitomedia]

1st. Is there a way to ad a flash file to the website?

Sure, you can add it as a banner, into tpl_header, footer, blank sideboxes by Kuroi, tpl_main_page...etc Zen Cart lets you put it anywhere you desire. Just add in the flash codes into anywhere which also points to the right location of the swf file.

2nd. What is the best way to create and upload a rotating image on a page which rotates every 10 secs or so?

You can use Adobe Flash, Swishmax, or any other softwares to creat a simple flash file that comprise of fade in/out images looping through various 10 second scenes.

[Get Em Fast]

Forget Flash.............follow THIS thread. Hope this helps.

[saitomedia]

Forget Flash.............follow THIS thread. Hope this helps.

Agreed. Though, since he asked, I must reply.

Google claims that it indexes textual content within swf but my personal test never work to confirm that claim.

Good luck!

http://logicpool.com/archives/30

[Get Em Fast]

Agreed. Though, since he asked, I must reply.

Oh, I know what you mean, but I try to steer people away from flash as much as possible, as jquery is so much better for a site, as it weighs in at a fraction of a flash file. Anyway, with the post that outeredge2 posted in the thread that I pointed him to........I think he liked it. Now, I just hope that I got the "he" part right. If not, "she" may be mad at me.

[outeredge2]

Oh, I know what you mean, but I try to steer people away from flash as much as possible, as jquery is so much better for a site, as it weighs in at a fraction of a flash file. Anyway, with the post that outeredge2 posted in the thread that I pointed him to........I think he liked it. Now, I just hope that I got the "he" part right. If not, "she" may be mad at me.

He shall not be mad! :)

[saitomedia]

btw...

25 coolest jQuery content sliders, if you're interested:

http://designbeep.com/2010/05/13/25-...der-tutorials/

[outeredge2]

btw...

25 coolest jQuery content sliders, if you're interested:

http://designbeep.com/2010/05/13/25-...der-tutorials/

Those are pretty cool... To far above me head (and needs) though!

[dgent]

Copy and paste this into a file called fade.js and save it to your webspace.

You can see the image fields at the top of the script, just change the links to your files. You can add more files if you wish.

And the fadebgcolour is depending if you have a white or black site



/***********************************************
* 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]=["http://www.yourwebsite.com/yourimage1.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://www.yourwebsite.com/yourimage2.jpg", "", ""] //plain image syntax
fadeimages[2]=["http://www.yourwebsite.com/yourimage3.jpg", "", ""] //plain image syntax
fadeimages[3]=["http://www.yourwebsite.com/yourimage4.jpg", "", ""] //plain image syntax
fadeimages[4]=["http://www.yourwebsite.com/yourimage5.jpg", "", ""] //plain image syntax
fadeimages[5]=["http://www.yourwebsite.com/yourimage6.jpg", "", ""] //plain image 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){
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)
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;lef t: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;lef t: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
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+=3
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==0) //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==0){ //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=0}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}




Then simply enter this code below anywhere on your Zencart store you wish to see the fading slideshow.

<script type="text/javascript" src="fade.js"></script>


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

new fadeshow(fadeimages, 600, 340, 0, 3000, 0 )

</script>


Again change the 600 and 340 to the measurements of your images. The 3000 is the image delay.

If you want to change the fade rate, go back into the the fade.js file and find 'obj.degree+=3' and change the 3 to different numbers.

[outeredge2]

Copy and paste this into a file called fade.js and save it to your webspace.

You can see the image fields at the top of the script, just change the links to your files. You can add more files if you wish.

And the fadebgcolour is depending if you have a white or black site
...........
Again change the 600 and 340 to the measurements of your images. The 3000 is the image delay.

If you want to change the fade rate, go back into the the fade.js file and find 'obj.degree+=3' and change the 3 to different numbers.

A few questions on this. I have all the images saved and read to go but I just want to clarify a couple of things...

1. When you said up load it to your 'web-space' where do you recommend putting it (Admin folder, includes, etc)
2. For putting the code in on the page you want the pictures to displays do you use the EZ-pages editor to add the script?

thanks for your help.