pinkstonm
asked on
Horizontal Slide Show.
I need a script that will do a conveyor belt horizontal slide show. Looking for something that will slide about 20+ images right to left slowly.
Is there a reason you can't use http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
or
<marquee><img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg"><img src="img5.jpg">....</marqu ee>
<marquee><img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg"><img src="img5.jpg">....</marqu
ASKER
Superm, I like that one but it does this weird blue box almost like a hyperlink and pauses after a while and reloads?
ASKER
Mplungjan, Marquis is way too choppy
You're right. Mplungjan, that does work in Firefox, however non-standard.
Replace all instances of border=1 with border=0
>>pauses after a while and reloads
I'm not seeing that on the demo. Describe further.
I'm not seeing that on the demo. Describe further.
ASKER
One of the biggest problems is I can not specify a %width on the script
//Specify the slider's width (in pixels)
var sliderwidth="100%" <------------------------ does not work :(
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's width (in pixels)
var sliderwidth="100%" <------------------------ does not work :(
//Specify the slider's height
var sliderheight="150px"
Right, that's cause it says in pixels, which are different from percent. Pixels are the smallest unit your screen can display. Each pixel can have a different color. Screen distances are measured in them often. Experiment to find a value you like.
ASKER
the only problem is when people resize if you don't use % then the size of the element does not resize along with the window which is a big problem in this case.
Not too choppy if you specify scrollAmount
<base href="http://www.dynamicdrive.com/dynamicindex14/">
<marquee scrollamount="2" width=200><a href="http://"><img src="../dynamicindex4/dyna micbook1.g if" border=0></a>
<a href="http://"><img src="../dynamicindex4/dyna micbook2.g if" border=0></a>
<a href="http://"><img src="../dynamicindex4/dyna micbook3.g if" border=0></a>
<a href="http://"><img src="../dynamicindex4/dyna micbook4.g if" border=0></a>
<a href="http://"><img src="../dynamicindex4/dyna micbook5.g if" border=0></a></marquee>
<base href="http://www.dynamicdrive.com/dynamicindex14/">
<marquee scrollamount="2" width=200><a href="http://"><img src="../dynamicindex4/dyna
<a href="http://"><img src="../dynamicindex4/dyna
<a href="http://"><img src="../dynamicindex4/dyna
<a href="http://"><img src="../dynamicindex4/dyna
<a href="http://"><img src="../dynamicindex4/dyna
ASKER
IS There anyway to get the below script to accept 100% or 90% width Points upped
<script type="text/javascript">
/************************* ********** ********** **
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
************************** ********** ********** */
//Specify the slider's width (in pixels)
var sliderwidth="650px"
//Specify the slider's height
var sliderheight="120px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#ffffff"
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="/pictures/academics/n da_academi cs_005.jpg " border=0></a>'
leftrightslide[1]='<a href="http://"><img src="/pictures/academics/n da_academi cs_006.jpg " border=0></a>'
leftrightslide[2]='<a href="http://"><img src="/pictures/academics/n da_academi cs_007.jpg " border=0></a>'
leftrightslide[3]='<a href="http://"><img src="/pictures/academics/n da_academi cs_008.jpg " border=0></a>'
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+le ftrightsli de.join(im agegap)+'< /nobr>'
var iedom=document.all||docume nt.getElem entById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;p osition:ab solute;top :-100px;le ft:-9000px ">'+leftri ghtslide+' </span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getEl ementById? document.getElementById("t est2") : document.all.test2
cross_slide2=document.getE lementById ? document.getElementById("t est3") : document.all.test3
cross_slide.innerHTML=cros s_slide2.i nnerHTML=l eftrightsl ide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("t emp").offs etWidth
cross_slide2.style.left=ac tualwidth+ slideshowg ap+"px"
}
else if (document.layers){
ns_slide=document.ns_slide menu.docum ent.ns_sli demenu2
ns_slide2=document.ns_slid emenu.docu ment.ns_sl idemenu3
ns_slide.document.write(le ftrightsli de)
ns_slide.document.close()
actualwidth=ns_slide.docum ent.width
ns_slide2.left=actualwidth +slideshow gap
ns_slide2.document.write(l eftrightsl ide)
ns_slide2.document.close()
}
lefttime=setInterval("slid eleft()",3 0)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.styl e.left)>(a ctualwidth *(-1)+8))
cross_slide.style.left=par seInt(cros s_slide.st yle.left)- copyspeed+ "px"
else
cross_slide.style.left=par seInt(cros s_slide2.s tyle.left) +actualwid th+slidesh owgap+"px"
if (parseInt(cross_slide2.sty le.left)>( actualwidt h*(-1)+8))
cross_slide2.style.left=pa rseInt(cro ss_slide2. style.left )-copyspee d+"px"
else
cross_slide2.style.left=pa rseInt(cro ss_slide.s tyle.left) +actualwid th+slidesh owgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidt h*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.le ft+actualw idth+slide showgap
if (ns_slide2.left>(actualwid th*(-1)+8) )
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.le ft+actualw idth+slide showgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;w idth:'+sli derwidth+' ;height:'+ sliderheig ht+';overf low:hidden ">')
write('<div style="position:absolute;w idth:'+sli derwidth+' ;height:'+ sliderheig ht+';backg round-colo r:'+slideb gcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slid espeed">')
write('<div id="test2" style="position:absolute;l eft:0px;to p:0px"></d iv>')
write('<div id="test3" style="position:absolute;l eft:-1000p x;top:0px" ></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=slid espeed"></ layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slid espeed"></ layer>')
write('</ilayer>')
}
document.write('</td></tab le>')
}
}
</script>
<script type="text/javascript">
/*************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**************************
//Specify the slider's width (in pixels)
var sliderwidth="650px"
//Specify the slider's height
var sliderheight="120px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#ffffff"
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="/pictures/academics/n
leftrightslide[1]='<a href="http://"><img src="/pictures/academics/n
leftrightslide[2]='<a href="http://"><img src="/pictures/academics/n
leftrightslide[3]='<a href="http://"><img src="/pictures/academics/n
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+le
var iedom=document.all||docume
if (iedom)
document.write('<span id="temp" style="visibility:hidden;p
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getEl
cross_slide2=document.getE
cross_slide.innerHTML=cros
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("t
cross_slide2.style.left=ac
}
else if (document.layers){
ns_slide=document.ns_slide
ns_slide2=document.ns_slid
ns_slide.document.write(le
ns_slide.document.close()
actualwidth=ns_slide.docum
ns_slide2.left=actualwidth
ns_slide2.document.write(l
ns_slide2.document.close()
}
lefttime=setInterval("slid
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.styl
cross_slide.style.left=par
else
cross_slide.style.left=par
if (parseInt(cross_slide2.sty
cross_slide2.style.left=pa
else
cross_slide2.style.left=pa
}
else if (document.layers){
if (ns_slide.left>(actualwidt
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.le
if (ns_slide2.left>(actualwid
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.le
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;w
write('<div style="position:absolute;w
write('<div id="test2" style="position:absolute;l
write('<div id="test3" style="position:absolute;l
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=slid
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slid
write('</ilayer>')
}
document.write('</td></tab
}
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.