Click to See Complete Forum and Search --> : Code for adding Back Forward buttons ?


ScaredyCat
02-10-2003, 07:34 PM
Hi how do i add back/previous and forward/next controls to the following script ? I owuld like to hold down the back or forward buttons and have the images automatically scroll THAT way.

I know it CAN be done because I found an example here:http://eportfolio.studio.adobe.com/epShowPortfolioThumbs.asp?portfolio=15632&color=010101
***But the code has been altered so much I can make heads or tails of it******



Help greatly appreciated -

Becky



<script language="JavaScript1.2">

/*
Conveyor belt slideshow script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
*/


//Specify the slider's width (in pixels)
var sliderwidth=300
//Specify the slider's height
var sliderheight=150
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://64.70.151.74/one.htm"><img src="images/96887jpg.jpg" border=1></a>'
leftrightslide[1]='<a href="http://64.70.151.74/two.htm"><img src="images/55465jpg.jpg"," border=1></a>'
leftrightslide[2]='<a href="http://64.70.151.74/three.htm"><img src="images/56556jpg.jpg" border=1></a>'
leftrightslide[3]='<a href="http://64.70.151.74/four.htm"><img src="images/56554jpg.jpg" border=1></a>'
leftrightslide[4]='<a href="http://64.70.151.74/five.htm"><img src="images/56555jpg.jpg" border=1></a>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+20
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</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>
:)

ScaredyCat
02-10-2003, 09:06 PM
Anyone ? any ideas here?

pyro
02-10-2003, 09:48 PM
I don't know if I understand what you want, but what I think that you are asking is how to make it scroll when you click rather than when the mouse is over? If so, change like this.

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style=" position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style=" position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMousedown="copyspeed=0" onMouseup="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMousedown="copyspeed=0" onMouseup="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMousedown="copyspeed=0" onMouseup="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}Minus of course, the unfortunate line breaks the forums insered. :(

ScaredyCat
02-11-2003, 01:17 AM
Thanks - I changed that part of the code like suggested, but I still don't know where/ to insert the code for the back and next buttons.....


???

pyro
02-11-2003, 07:29 AM
Originally posted by ScaredyCat
but I still don't know where/ to insert the code for the back and next buttons.....Could you try to explain what you want better? I don't think I understand what you are looking for. Are you looking to go back and forward between a set of pictures, pages or what?

ScaredyCat
02-11-2003, 04:24 PM
Could you try to explain what you want better? I don't think I understand what you are looking for. Are you looking to go back and forward between a set of pictures, pages or what?


__________________
>>>>>>>>>>>>>>>>>>>>>>...

Hey thnaks for getting back to me........Yes what you stated above is what I meant Sorry for not putting it more succinctly.


An exact example of what Im tryign to do is on this link.

http://eportfolio.studio.adobe.com/epShowPortfolioThumbs.asp?portfolio=5926&color=766C8F


:confused:

Thank you so much -Becky

pyro
02-11-2003, 04:41 PM
Can you post a link to what you've got so far? Basically you just want to be able to scroll through a set of pictures?

ScaredyCat
02-11-2003, 07:55 PM
Can you post a link to what you've got so far? Basically you just want to be able to scroll through a set of pictures?>>>>

Yes exactly....
Here's what I have so far:

http://64.70.151.74/finali1.htm

Regards, Becky

ScaredyCat
02-12-2003, 12:17 AM
hello ?:confused:

pyro
02-12-2003, 06:55 AM
The code that you have so far doesn't really do what you want.(as you know) What you are going to need to do is try to edit the code in the script that is working how you want. Try changing this part, to point to your images.

<SCRIPT LANGUAGE="Javascript1.2">
var thumbs = [{id:96887,thumb:"accounts/448520011946175164/5926/_small/96887jpg.jpg",assetNum:"0",width:57},{id:55465,thumb:"accounts/448520011946175164/5926/_small/55465jpg.jpg",assetNum:"1",width:26},{id:56556,thumb:"accounts/448520011946175164/5926/_small/56556jpg.jpg",assetNum:"2",width:34},{id:56554,thumb:"accounts/448520011946175164/5926/_small/56554jpg.jpg",assetNum:"3",width:34},{id:56555,thumb:"accounts/448520011946175164/5926/_small/56555jpg.jpg",assetNum:"4",width:34},{id:56576,thumb:"accounts/448520011946175164/5926/_small/56576jpg.jpg",assetNum:"5",width:34},{id:55462,thumb:"accounts/448520011946175164/5926/_small/55462jpg.jpg",assetNum:"6",width:29},{id:55461,thumb:"accounts/448520011946175164/5926/_small/55461jpg.jpg",assetNum:"7",width:29},{id:55460,thumb:"accounts/448520011946175164/5926/_small/55460jpg.jpg",assetNum:"8",width:29},{id:96858,thumb:"accounts/448520011946175164/5926/_small/96858jpg.jpg",assetNum:"9",width:65},{id:56581,thumb:"accounts/448520011946175164/5926/_small/56581jpg.jpg",assetNum:"10",width:65},{id:56582,thumb:"accounts/448520011946175164/5926/_small/56582jpg.jpg",assetNum:"11",width:65},{id:56583,thumb:"accounts/448520011946175164/5926/_small/56583jpg.jpg",assetNum:"12",width:65},{id:96885,thumb:"accounts/448520011946175164/5926/_small/96885jpg.jpg",assetNum:"13",width:34},{id:56577,thumb:"accounts/448520011946175164/5926/_small/56577jpg.jpg",assetNum:"14",width:65},{id:56578,thumb:"accounts/448520011946175164/5926/_small/56578jpg.jpg",assetNum:"15",width:65},{id:56579,thumb:"accounts/448520011946175164/5926/_small/56579jpg.jpg",assetNum:"16",width:65},{id:96857,thumb:"accounts/448520011946175164/5926/_small/96857jpg.jpg",assetNum:"17",width:34},{id:96863,thumb:"accounts/448520011946175164/5926/_small/96863jpg.jpg",assetNum:"18",width:24},{id:96864,thumb:"accounts/448520011946175164/5926/_small/96864jpg.jpg",assetNum:"19",width:24},{id:96889,thumb:"accounts/448520011946175164/5926/_small/96889jpg.jpg",assetNum:"20",width:34},{id:56558,thumb:"accounts/448520011946175164/5926/_small/56558jpg.jpg",assetNum:"21",width:65},{id:56557,thumb:"accounts/448520011946175164/5926/_small/56557jpg.jpg",assetNum:"22",width:65},{id:56559,thumb:"accounts/448520011946175164/5926/_small/56559jpg.jpg",assetNum:"23",width:65},{id:56587,thumb:"accounts/448520011946175164/5926/_small/56587jpg.jpg",assetNum:"24",width:30},{id:56563,thumb:"accounts/448520011946175164/5926/_small/56563jpg.jpg",assetNum:"25",width:65},{id:56561,thumb:"accounts/448520011946175164/5926/_small/56561jpg.jpg",assetNum:"26",width:65},{id:56562,thumb:"accounts/448520011946175164/5926/_small/56562jpg.jpg",assetNum:"27",width:65},{id:56564,thumb:"accounts/448520011946175164/5926/_small/56564jpg.jpg",assetNum:"28",width:65},{id:56569,thumb:"accounts/448520011946175164/5926/_small/56569jpg.jpg",assetNum:"29",width:33},{id:65237,thumb:"accounts/448520011946175164/5926/_small/65237jpg.jpg",assetNum:"30",width:28},{id:96866,thumb:"accounts/448520011946175164/5926/_small/96866jpg.jpg",assetNum:"31",width:33},{id:56571,thumb:"accounts/448520011946175164/5926/_small/56571jpg.jpg",assetNum:"32",width:34},{id:56570,thumb:"accounts/448520011946175164/5926/_small/56570jpg.jpg",assetNum:"33",width:34},{id:56580,thumb:"accounts/448520011946175164/5926/_small/56580jpg.jpg",assetNum:"34",width:33},{id:96865,thumb:"accounts/448520011946175164/5926/_small/96865jpg.jpg",assetNum:"35",width:34},{id:96861,thumb:"accounts/448520011946175164/5926/_small/96861jpg.jpg",assetNum:"36",width:34},{id:96862,thumb:"accounts/448520011946175164/5926/_small/96862jpg.jpg",assetNum:"37",width:34},{id:96860,thumb:"accounts/448520011946175164/5926/_small/96860jpg.jpg",assetNum:"38",width:28},{id:56586,thumb:"accounts/448520011946175164/5926/_small/56586jpg.jpg",assetNum:"39",width:34},{id:56584,thumb:"accounts/448520011946175164/5926/_small/56584jpg.jpg",assetNum:"40",width:34},{id:55463,thumb:"accounts/448520011946175164/5926/_small/55463jpg.jpg",assetNum:"41",width:29},{id:96856,thumb:"accounts/448520011946175164/5926/_small/96856jpg.jpg",assetNum:"42",width:35},{id:96888,thumb:"accounts/448520011946175164/5926/_small/96888jpg.jpg",assetNum:"43",width:57}];

function goTo( id ) {
parent.preview.location.href="epShowPortfolioTop.asp?id=" + id + "&color=766C8F";
}

</SCRIPT>

ScaredyCat
02-12-2003, 08:19 PM
Thanks Pyro , that works great but how/where to I insert the links for each of the images ? Each of them needs to go to an url when clicked..............


Cheers, Becky

pyro
02-12-2003, 09:59 PM
Not sure if this will work but give it a try...

Change this:

<SCRIPT LANGUAGE="Javascript1.2">
var thumbs = [{id:96887,thumb:"accounts/448520011946175164/5926/_small/96887jpg.jpg",assetNum:"0",width:57},
{id:55465,thumb:"accounts/448520011946175164/5926/_small/55465jpg.jpg",assetNum:"1",width:26},
{id:56556,thumb:"accounts/448520011946175164/5926/_small/56556jpg.jpg",assetNum:"2",width:34},
...

To:

<SCRIPT LANGUAGE="Javascript1.2">
var thumbs = [{yourpage1.htm,thumb:"accounts/448520011946175164/5926/_small/96887jpg.jpg",assetNum:"0",width:57},
{yourpage2.htm,thumb:"accounts/448520011946175164/5926/_small/55465jpg.jpg",assetNum:"1",width:26},
{yourpage3.htm,thumb:"accounts/448520011946175164/5926/_small/56556jpg.jpg",assetNum:"2",width:34},
...

And change this:

function goTo( id ) {
parent.preview.location.href="epShowPortfolioTop.asp?id=" + id + "&color=766C8F";
}


To:

function goTo( id ) {
parent.preview.location.href="" + id + "";
}

ScaredyCat
02-14-2003, 06:34 AM
Pyro, Thanks for yoru help but when I try and link the images with the code you gave me the whole page turns up blank.
I think its because Adobe's code has been altered so much I cant straighten it out.

<sigh>

pyro
02-14-2003, 07:17 AM
If you zip up the file and upload them here, I will try to take a look at it. Include the images. I'm not making any gaurentees...I don't like editing code that was generated by a program.

ScaredyCat
02-16-2003, 04:41 AM
Hey Pyro,


Thanks for your help , I appreciate it.
I did figure out how to get everythign in working order finally.