...

View Full Version : Slide show programming - real novice



thebootielady
05-04-2010, 08:55 PM
Can any one help me. Apolygises I am a real novice at this! I'm trying to set up my website to sell baby booties. And am trying to set up a slide show of one of my designs that I offer in different colours. But I'm stuck.

I am using the following code

[<script language="JavaScript1.2">

/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='864px'
var scrollerheight='576px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://sitebuilder.123-reg.co.uk/users/13/13b76ae120960a4c6ebcf997f1aad68d"><img src="greenyellow.jpg" border=0"></a>'
slideimages[1]='<img src="pinkblue.jpg">'
slideimages[2]='<img src="yellowblue.jpg">'
slideimages[3]='<img src="yellowpink.jpg">'


///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>




<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>]

I've upload my pictures (pinkblue.jgp etc) onto my website. When I view my website now www.thebootielady.co.uk I have a cursor that rolls across the screen. Which I'm guessing is my slideshow. But the pictures aren't in it. What am I doing wrong? I'm using Instant site which is the sitebuilder offered through 123 reg. This doesn't have anythging to do with it?

Sorry as I said I'm a true novice
Thanks in advance Gemma.

Fang
05-05-2010, 09:35 AM
The script is not in your document and the images nowhere to be found.

thebootielady
05-05-2010, 12:25 PM
Sorry not too sure what you mean. http://www.thebootielady.co.uk/page_1262635071068.html Is the page I'm trying to program. I've put the scipt on there. I'm guessing I need to do something with my images - that I'm not doing. Thanks Gemma.

Rowsdower!
05-05-2010, 02:07 PM
Into which directory have you saved the target images?

thebootielady
05-05-2010, 06:29 PM
I've just uploaded them onto my website. Using the insert image icon on the tool bar. Thanks Gemma.

Fang
05-05-2010, 06:51 PM
The image path in the script is incorrect, change them to
slideimages[1]='<img src="custom/pinkblue.jpg">'

thebootielady
05-05-2010, 08:18 PM
[<script language="JavaScript1.2">

/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='864px'
var scrollerheight='576px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://sitebuilder.123-reg.co.uk/users/13/13b76ae120960a4c6ebcf997f1aad68d"><img src="greenyellow.jpg" border=0"></a>'
slideimages[1]='<img src="custom/pinkblue.jpg">
slideimages[2]='<img src="custom/yellowblue.jpg">'
slideimages[3]='<img src="custom/yellowpink.jpg">']

First part of script now looks like as above. Still no joy though.
Any more suggestions?
Thanks
Gemma

Fang
05-05-2010, 08:47 PM
The online script has not been updated

tpeck
05-06-2010, 05:58 AM
You might be better off doing it in Flash.

You can download this example from:

http://aapress.com.au/dloads/flashslideshow.zip

http://aapress.com.au/dloads/bootie.jpg

I added a few of your scaled down images so you could get an idea...

It's only a demo.

Extract the files to a folder and click on index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum