?
Solved

Horizontal Slide Show.

Posted on 2005-03-27
13
Medium Priority
?
627 Views
Last Modified: 2008-02-01
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.
0
Comment
Question by:pinkstonm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 6

Expert Comment

by:superm401
ID: 13639980
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13640062
or
<marquee><img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg"><img src="img5.jpg">....</marquee>
0
 

Author Comment

by:pinkstonm
ID: 13640270
Superm,  I like that one but it does this weird blue box almost like a hyperlink and pauses after a while and reloads?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:pinkstonm
ID: 13640277
Mplungjan, Marquis is way too choppy
0
 
LVL 6

Expert Comment

by:superm401
ID: 13640278
You're right.  Mplungjan, that does work in Firefox, however non-standard.
0
 
LVL 6

Expert Comment

by:superm401
ID: 13640326
Replace all instances of border=1 with border=0
0
 
LVL 6

Expert Comment

by:superm401
ID: 13640327
>>pauses after a while and reloads
I'm not seeing that on the demo.  Describe further.
0
 

Author Comment

by:pinkstonm
ID: 13640435
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"

0
 
LVL 6

Expert Comment

by:superm401
ID: 13640509
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.
0
 

Author Comment

by:pinkstonm
ID: 13640699
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13640893
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/dynamicbook1.gif" border=0></a>
<a href="http://"><img src="../dynamicindex4/dynamicbook2.gif" border=0></a>
<a href="http://"><img src="../dynamicindex4/dynamicbook3.gif" border=0></a>
<a href="http://"><img src="../dynamicindex4/dynamicbook4.gif" border=0></a>
<a href="http://"><img src="../dynamicindex4/dynamicbook5.gif" border=0></a></marquee>
0
 

Author Comment

by:pinkstonm
ID: 13640943
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/nda_academics_005.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="/pictures/academics/nda_academics_006.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="/pictures/academics/nda_academics_007.jpg" border=0></a>'
leftrightslide[3]='<a href="http://"><img src="/pictures/academics/nda_academics_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>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+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+slideshowgap+"px"
}
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+slideshowgap
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+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

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

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

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


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:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;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=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>
0
 
LVL 6

Accepted Solution

by:
superm401 earned 600 total points
ID: 13641308
The slideshow itself doesn't resize with the window, though.
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question