Flash/Rotating image header

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?

outeredge2:

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.

outeredge2:

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.

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

Get Em Fast:

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

saitomedia:

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. :D

Get Em Fast:

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. :D

He shall not be mad! :)

btw...

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

http://designbeep.com/2010/05/13/25-very-detailed-jquery-image-and-content-slider-tutorials/

:P

saitomedia:

btw...

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

http://designbeep.com/2010/05/13/25-very-detailed-jquery-image-and-content-slider-tutorials/

:P

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

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;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
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.

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
...........
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.

Rotating image header

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?

How is an ezpage going to display in your header??

Try tpl_header.php

What black belt means is to look into the tpl_header.php, and modify that file to accommodate your needs.

saitomedia:

What black belt means is to look into the tpl_header.php, and modify that file to accommodate your needs.

Thank you!

Is the tpl_header also the file where I put the first code?

Is the tpl_header also the file where I put the first code?

What first code??

I have not seen you post any code

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;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
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.

kobra:

What first code??

I have not seen you post any code

Thats the code I was referring to. Sorry about that!

outeredge2:

Is the tpl_header also the file where I put the first code?

No that is not what is stated for that code

dgent:

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

And it should be named

jscript_fade.js

https://www.zen-cart.com/tutorials/index.php?article=36

kobra:

No that is not what is stated for that code

And it should be named

jscript_fade.js

https://www.zen-cart.com/tutorials/index.php?article=36

Ok.

So I name it jscript_fade.js and have saved it. I uploaded it just to the store root. Is tht fine or does it need to go in a specfic folder?

Is tht fine or does it need to go in a specfic folder

If for a page - - read the tutorial
Else in a folder in your template_jscript
And you may have to create the folder

Ok thanks for the help! got that figured out....

Last question I have is for the images it has it like this:

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
Etc

I have the images uploaded to my images folder so should it be more like this:

fadeimages[0]=["images/yourimage1.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/yourimage2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/yourimage3.jpg", "", ""] //plain image syntax
ETC