help with j/s for slide show
 

Hi all,

I am trying to add a simple slide show to the welcome page .

I have found a script at dynamic drive and added the first part of the script to the customer/head.tpl
then I put the second part of the script
into the welcome.tpl

Initially I was getting a smarty error for the welcome.tpl and found a post where the problem was solved by adding {literal} {/literal} around the j/s
I tried that and although it eliminated the error message, the slide show still doesn't appear. ( shows as a blank area) on the page

I feel like one of the worst people in the forums as I am always looking for help , and haven't been able to return the favors given as I am still a really newbie with xcart, smartie, etc. Although I seem to be getting a little better at this I am amazed at how much there is to know and how proficient some here are at it.

I think the problem maybe what I have done in the welcome.tpl:???:

Can someone please take a look at this and tell me whether this looks right to them, and if not what I need to do to correct it.

<td class="slideshowcontainer">

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

</td>

If the problem isn't here, then is there some place other than the customer/home.tpl that the first part of the script should be placed ? Currently I have it in the head tag there. If not and the above looks like it should work I can post the part I am putting into the customer/home/tpl for someone to see.

As always many thanks to everyone and anyone that takes the time to reply. The help is really appreciated!

Scott V
xcart-4.18

Re: help with j/s for slide show
 

That part is fine, post the part where you call the images, I'm guessing you are calling them from the wrong place.

Re: help with j/s for slide show
 

Thanks Balinor here is thewhole script from dynamic.
The highlighted blue is wherethe images are.

skins1/images/




{literal}
<script type="text/javascript">
/***********************************************
* 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 this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["skin1/images/p_A037-show2.jpg", "", ""] //plain image syntax
fadeimages[1]=["skin1/images/p_F029-show6.jpg", "", ""]//plain image syntax
fadeimages[2]=["skin1/images/p_A012-show1.jpg", "", ""] //plain image syntax
fadeimages[3]=["skin1/images/p_F017-show5 .jpg", "", ""] //plain image syntax
fadeimages[4]=["skin1/images/p_A056-show4.jpg", "", ""] //plain image syntax
fadeimages[5]=["skin1/images/p_A060-show3.jpg", "", ""] //plain image 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){
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;hei ght:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;hei ght:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.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;hei ght:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.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+=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.degr ee+")"
}
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.postima ges.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.postim ages.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.m ouseovercheck=0}
}
this.rotateimage()
}
{/literal}

Re: help with j/s for slide show
 

Actually just compared your code to the same code I use on a couple sites, and it appears you have the height of the image set to 0 in the welcome.tpl code:

new fadeshow(fadeimages, , 225, 0, 3000, 1, "R")

Change the zero to the actual height of the image.

Re: help with j/s for slide show
 

OK
I changed the ) to the height with no change
I then went and looked at the images in pshop and noticed that while all are the same width, that the heigh varies by three pixels.

I though that perhaps if I set for the largest sixe height=268 first image in show that the ones that are slighlt smaller 267, 265 in height that they woud load but just float wiht more white space around them- is my thinking flawed- It wouldn't be the first time.

In order for this to pull the images do they all have to be the same identical size?

What so you think ?

Re: help with j/s for slide show
 

Also do I need to change the numbers in the second line of the welcome script to the same numbers that appears in the first line?

{literal}
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, , 400, 268, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
</script>
{/literal}

change 140 to 400
225 to 268

Re: help with j/s for slide show
 

Look at the code, you have something missing:

new fadeshow(fadeimages, , 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)

See how the second one has number, number, number, number, number? You are missing the first number in the first line. It should be width, height, etc. Yes, the images should all be the same size.

Re: help with j/s for slide show
 

The second one is not used unless you have two images side by side in the slideshow.

Re: help with j/s for slide show
 

thanks,
I am going to make changes now and see what happens ,
will let you know,

either way many thanks

Scott V

Re: help with j/s for slide show
 

Balinor,

Made corrections but still having problems- slide show not working.

I tried several things with the line in the script shown below from my welcome.tpl

{literal}
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, , 400, 267, 1, 3000, 0, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
</script>
{/literal}


Some of the things I have done.
I made all the images the same size,
removed space between fadeimages, and 400- then changed number values to match the right place.
checked script at dynamic dr. and appears to all be there.
tried remocing unneeded second line

As little as I know , I know even less about j/s.
Is there anything else you can think I might be missing - something to the skin sheet, or the home.tpl

I like the look of this slideshow a lot but do you think it makes sense to just scrap it and look for a different one? - suggestions?

Thanks again , no way in helll could I figure this out without your support.

Scott V