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

Re: help with j/s for slide show
 

You have the sizes in the wrong place. Replace this:

new fadeshow(fadeimages, , 400, 267, 1, 3000, 0, "R")

with this:

new fadeshow(fadeimages, 400, 267, 0, 3000, 0, "R")

Re: help with j/s for slide show
 

Thanks,

I tried that - to no avail- still not working.
Its driving me crazy.
As is often the case it is probably something really simple.
:?

Re: help with j/s for slide show
 

I'd start over from scratch, as you have probably changed something somewhere that is causing the problem. I use this script all the time, so I know it works. Paste the default code in, change the image names and image size and that is it.

Re: help with j/s for slide show
 

Thats a great idea.
Glad to know its not hte script- didn't hink it was but you never know.
Will dump and build see what happens.
Will post back to you,
Thanks for all your time and effort - you make a huge difference to people like me that are trying to get better at this stuff.
Know it takes time but

AYE CARUMBA


Scott V

Re: help with j/s for slide show
 

Yea, I remember fighting with this the first time I tried it as well. Also, while you are at it, to do it right and keep your code clean, save the javascript portion that you put in the head as a separate file - I usually call it slideshow.js. You won't need the literal or <script> part, just what is in between the <script> and </script> Put that file in skin1/. Then in your head of home.tpl, put this:

{if $main eq "catalog" and $current_category.category eq ""}
<script type="text/javascript" language="JavaScript 1.2" src="{$SkinDir}/slideshow.js"></script>{/if}

That only runs the script on the home page, and keeps the code out of the source.

Re: help with j/s for slide show
 

Hey Balinor,

Like a dog I have been nawing away on this and finally success- well almost.:smile:

I have gotten the slide to work, but when I try to add the code to the skin1.css
and put the recomended code into the home.tpl
when I look a the slide show in IE I see 2 small missing image icons underneath the slide show images- these missing image icons are hyperlinks that when clicked take me back to either cssdrive.com, or javascriptkits.com

I went back into the dynamic drive script and removed the two references I found for these- near the top of the script where the images for the fade are listed- cleared my cache yet they still show up.

As you know a newbie here, I haven't put j/s into the skin before.
I have tried to reference it a couple of ways thinking that this might be why this problem is happening.

I have put the script in like this

.slideshow.js {

script goes here

}

also tried

slideshow.js {

script here
}

and

#slideshow.js {

script here

}

I have not included <script> </script> or {literal} {/literal} just the code.

Should I be calling for this in some other manner ?

It would be greati f I coud get the js into the skin put at this point I am happy just to get the script working.

any thoughts?

Thanks

Scott V
xcart 4.18

Re: help with j/s for slide show
 

Ummm...don't think you understood my post. You need to create a new .js file called slideshow.js. This is simply a text file. You then upload that file to the skin1/ directory. You don't do anything with skin1.css.

As for the missing images, those are probably from the second image part of the script, you can delete that all together.

Re: help with j/s for slide show
 

This is old code from dynamic drive. This is all I use and works perfectly in php.

Re: help with j/s for slide show
 

DUHHHHH

missed that in the post.
Too many hours looking at the same thing.
Makes much more sense with a fresh set of eyes.

Made txt file and added to skin1/directory.
moving on.


again many thanks

Scott V

Re: help with j/s for slide show
 

Raxiitpatel,

THanks for the code
Thisis basically the same scrript I am using,
Being the knuckhead I am with much of thsi stuff I was having probelms getting it to work right.

Think I solved the problems as it is working and moving on to other things.

Thanks again for the reply though.
Scott V

Re: help with j/s for slide show
 

Banging my head against the wall with this. Does anyone have a complete set of instructions?

-DS

Re: help with j/s for slide show
 

This worked for me........

In customer/home.tpl, added this code to the <head> section:

{literal}<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]=["{/literal}{$ImagesDir}{literal}/ezbail2.jpg", "", ""]
fadeimages[1]=["{/literal}{$ImagesDir}{literal}/swivelclamp2.jpg", "", ""]
fadeimages[2]=["{/literal}{$ImagesDir}{literal}/speaker2.jpg", "", ""]

var fadebgcolor="white"

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

//I'm leaving out all the no-need-to-edit stuff to save space here//
</script>{/literal}


Then, in customer/main/welcome.tpl, added this code to the desired position in the body (within a table):

{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, 300, 225, 0, 3000, 0, "")
</script>{/literal}

In the future, I'll use balinor's suggestion to create a separate .js file. Hope this helps.

Re: help with j/s for slide show
 

Thanks,
Tried every which way (except the correct), but cant seem to get this one to work.

Any other suggestions?
Thanks,

-ds

Re: help with j/s for slide show
 

I tried the old code that Jeeya posted and it worked fine. The only problem is how do you center it. I placed the code in the head.tpl but it shows on the far right side and I cannot figure out how to position it. Thanks.

Re: help with j/s for slide show
 

Figured it out -

<center>
Place Script Here
</center>