kathleen1357
05-01-2007, 10:40 AM
:o Hi there,
I am not a code-writer, I am a code-user and I found a code for a slideshow on javascripts.com that I would like to use but need altered just a bit.
In the code, the image size is the same height and width, but I need to make the width just a wee bit longer. Is there a way to alter this script to reflect a longer width easily?
Below is the script - you will see what I am talking about.
Thank you for looking.
<HTML><HEAD><TITLE>Slideshow - Multiple Image</TITLE>
<script language="javascript">
<!--
// realised by apachejeff
// ********** User Defining Area **********
data=new Array()
data[0]=new Array("pic01.jpg","../webplus/window/example1.htm")
data[1]=new Array("pic02.jpg","../webplus/window/example2.htm")
data[2]=new Array("pic03.jpg","../webplus/window/example3.htm")
data[3]=new Array("pic04.jpg","")
data[4]=new Array("pic05.jpg","")
data[5]=new Array("pic06.jpg","")
img_places=5 // number of image places in the display area
img_size=50 // size of the images, width and height are the same
img_spacer=2 // space between the images
scroll_all_images=1
// 0 = first_img_num to the last_img_num
// 1 = scroll through all images in the array
// if scroll_all_images is set at zero the following two lines define a set of images
first_img_num=1 // starting image number, 1 to number of images in the array
last_img_num=5 // ending image number
display_border=4 //
border_type="ridge" //
border_colour="#afa684" //
display_bgcol="#cfc8a6" // add colour to the space between the images
display_top=70 // top position must be stated
display_center=1 // 0 = no 1 = yes, if set at zero then display_left is used
display_left=100 // left position is over-ridden if display_center is set at 1
speed=1 // rate the images move
// ********** End Of User Defining Area **********
// ********** Editing beyond this line is not required **********
first_img_num-- // adjust for javascript count
last_img_num-- // adjust for javascript count
if(first_img_num== -1){ // check for javascript count
first_img_num=0
}
if(last_img_num>data.length-1){
last_img_num=data.length-1
}
display_width=(img_places*img_size)+(img_places*img_spacer)
initpos=new Array()
nowdivpos=new Array()
next_right=""
nextpic=first_img_num
run_rate=10
function init(){
if(scroll_all_images==1){
nextpic=0
}
document.write("<div id=\"display\" style=\"position:absolute; left:"+display_left+"; top:"+display_top+"; width:"+(display_width+display_border*2)+"px; height:"+(img_size+display_border*2)+"px; border:"+display_border+"px "+border_type+" "+border_colour+";background-color:"+display_bgcol+"\">")
if(display_center==1){
document.getElementById("display").style.left=(document.body.clientWidth/2)-(document.getElementById("display").offsetWidth/2)
}
document.write("<div id=\"center_div\" style=\"position:absolute; left:0; top:0; width:"+display_width+"px; height:"+img_size+"px; clip:rect(0,"+display_width+","+img_size+",0)\" onmouseover=\"stopme()\" onmouseout=\"move_right()\">")
for(i=0;i<img_places+1;i++){
document.write("<div id=\"div_"+[i]+"\" style=\"position:absolute\">")
document.write("<a id=\"loc"+[i]+"\" href=\"\" onclick=\"newwin(this.location);return false\"><img src=\"\" id=\"pic_"+[i]+"\" width="+img_size+" height="+img_size+" alt=\"Multiple Image SlideShow\" border=\"0\"></a></div>")
}
document.write("</div>")
document.write("</div>")
el_center=document.getElementById("center_div")
elpos=-document.getElementById("pic_0").width//parseInt(el_center.style.width)-document.getElementById("pic_0").width
for(i=0;i<img_places+1;i++){
elpos+=(document.getElementById("pic_0").width)+img_spacer
initpos[i]=elpos
document.getElementById("div_"+[i]).style.left=initpos[i]
if(scroll_all_images==0&&nextpic>last_img_num){
nextpic=first_img_num
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
else{
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
}
move_right()
}
function move_right(){
for(i=0;i<img_places+1;i++){
nowdivpos[i]=parseInt(document.getElementById("div_"+i).style.left)
nowdivpos[i]-=speed
if(nowdivpos[i]<= -document.getElementById("pic_0").width){
document.getElementById("div_"+[i]).style.left=parseInt(el_center.style.width)+img_spacer
if(scroll_all_images==0&&nextpic>last_img_num){
nextpic=first_img_num
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
else{
if(nextpic>data.length-1){
nextpic=0
}
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
}
else{
document.getElementById("div_"+[i]).style.left=nowdivpos[i]
}
}
next_right=setTimeout("move_right()",run_rate)
}
function stopme(){
clearTimeout(next_right)
}
function newwin(loc){
if(loc==""){return}
//window.open(loc)
window.open(loc,'','left=200,top=200,width=200,height=200') // use for specific size and positioned window
}
// add onload="init()" and style="overflow-x:hidden" to the opening BODY tag
// place <script>init()</script> after the opening BODY tag
// -->
</script>
</HEAD>
<BODY><h1>Slideshow - Multiple Image</h1>
<script>init()</script>
<BR><BR><BR><BR>
For more information pay a visit to <a href="www.huntingground.freeserve.co.uk/style/slideshow_multi.htm">The Huntingground</a>
<BR><BR>
<ul>
<li>You can choose how many images places are shown in the display area from one up to the number of images you have in the array.<BR>
The display area automatically resizes to accommodate this number of places.<BR>
These image places are used to scroll the images.
<P>My example is set to show 5 images places scrolling all 12 images.
<P><li>
You can scroll through all the images in the array or a define a set of images.<br>
To define a set of images you select the first and last image to be shown, the set of images scrolled is then both of these images and all the images between.<BR>
<P>Example:<BR>
Starting image = 3 ; Ending image = 8;<BR>
Images scrolled = 3,4,5,6,7, & 8
<P>You can have any number of images in a set.<BR>
If you have more image places than images in the set only the set images are shown.<BR>
If you have less image places than images in the set the remaining images in the set are still scrolled..<BR>
If you have the same image places as your image set then as an image disappears to the left you will see it re-entering from the right.<BR><BR>
<li>Each image can be assigned its own unique link.
<li>Mouse over stops the display, mouse out restarts the display
<P><li>User Options within the script
<P><ol>
<li><b>img_places</b>=5 // number of image places in the display area
<li><b>img_size</b>=50 // size of images, width and height are the same
<li><b>img_spacer</b>=2 // space between images
<li><b>scroll_all_images</b>=1<BR>
// 0 = scroll from first_img_num to last_img_num.<BR>
// 1 = scroll through all images in the array<BR><BR>
If <b><i>scroll_all_images</i></b> is set at zero the following two lines define a set of images
<li><b>first_img_num</b>=1 // starting image number, 1 to number of images in the array
<li><b>last_img_num</b>=2 // ending image number<BR><BR>
<li><b>display_border</b>=4 //
<li><b>border_type</b>="ridge" //
<li><b>border_colour</b>="#afa684" //<BR>
<li><b>display_bgcol</b>="#cfc8a6" // add colour to the space between the images<BR><BR>
<li><b>display_top</b>=100 // top position must be stated
<li><b>display_center</b>=1 // 0 = no 1 = yes, if set at zero then display_left is used
<li><b>display_left</b>=100 // left position is over-ridden if display_center is set at 1
<li><b>speed</b>=1 // rate the images move
</ol>
</ul>
<P>Enter your image and link info into the <b>data</b> array.
<P><center>data[num]=new Array("image.jpg","link.htm")</center>
<P>If no link is required leave the quotes empty
<P><center>data[num]=new Array("image.jpg","")</center>
</BODY></HTML>
I am not a code-writer, I am a code-user and I found a code for a slideshow on javascripts.com that I would like to use but need altered just a bit.
In the code, the image size is the same height and width, but I need to make the width just a wee bit longer. Is there a way to alter this script to reflect a longer width easily?
Below is the script - you will see what I am talking about.
Thank you for looking.
<HTML><HEAD><TITLE>Slideshow - Multiple Image</TITLE>
<script language="javascript">
<!--
// realised by apachejeff
// ********** User Defining Area **********
data=new Array()
data[0]=new Array("pic01.jpg","../webplus/window/example1.htm")
data[1]=new Array("pic02.jpg","../webplus/window/example2.htm")
data[2]=new Array("pic03.jpg","../webplus/window/example3.htm")
data[3]=new Array("pic04.jpg","")
data[4]=new Array("pic05.jpg","")
data[5]=new Array("pic06.jpg","")
img_places=5 // number of image places in the display area
img_size=50 // size of the images, width and height are the same
img_spacer=2 // space between the images
scroll_all_images=1
// 0 = first_img_num to the last_img_num
// 1 = scroll through all images in the array
// if scroll_all_images is set at zero the following two lines define a set of images
first_img_num=1 // starting image number, 1 to number of images in the array
last_img_num=5 // ending image number
display_border=4 //
border_type="ridge" //
border_colour="#afa684" //
display_bgcol="#cfc8a6" // add colour to the space between the images
display_top=70 // top position must be stated
display_center=1 // 0 = no 1 = yes, if set at zero then display_left is used
display_left=100 // left position is over-ridden if display_center is set at 1
speed=1 // rate the images move
// ********** End Of User Defining Area **********
// ********** Editing beyond this line is not required **********
first_img_num-- // adjust for javascript count
last_img_num-- // adjust for javascript count
if(first_img_num== -1){ // check for javascript count
first_img_num=0
}
if(last_img_num>data.length-1){
last_img_num=data.length-1
}
display_width=(img_places*img_size)+(img_places*img_spacer)
initpos=new Array()
nowdivpos=new Array()
next_right=""
nextpic=first_img_num
run_rate=10
function init(){
if(scroll_all_images==1){
nextpic=0
}
document.write("<div id=\"display\" style=\"position:absolute; left:"+display_left+"; top:"+display_top+"; width:"+(display_width+display_border*2)+"px; height:"+(img_size+display_border*2)+"px; border:"+display_border+"px "+border_type+" "+border_colour+";background-color:"+display_bgcol+"\">")
if(display_center==1){
document.getElementById("display").style.left=(document.body.clientWidth/2)-(document.getElementById("display").offsetWidth/2)
}
document.write("<div id=\"center_div\" style=\"position:absolute; left:0; top:0; width:"+display_width+"px; height:"+img_size+"px; clip:rect(0,"+display_width+","+img_size+",0)\" onmouseover=\"stopme()\" onmouseout=\"move_right()\">")
for(i=0;i<img_places+1;i++){
document.write("<div id=\"div_"+[i]+"\" style=\"position:absolute\">")
document.write("<a id=\"loc"+[i]+"\" href=\"\" onclick=\"newwin(this.location);return false\"><img src=\"\" id=\"pic_"+[i]+"\" width="+img_size+" height="+img_size+" alt=\"Multiple Image SlideShow\" border=\"0\"></a></div>")
}
document.write("</div>")
document.write("</div>")
el_center=document.getElementById("center_div")
elpos=-document.getElementById("pic_0").width//parseInt(el_center.style.width)-document.getElementById("pic_0").width
for(i=0;i<img_places+1;i++){
elpos+=(document.getElementById("pic_0").width)+img_spacer
initpos[i]=elpos
document.getElementById("div_"+[i]).style.left=initpos[i]
if(scroll_all_images==0&&nextpic>last_img_num){
nextpic=first_img_num
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
else{
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
}
move_right()
}
function move_right(){
for(i=0;i<img_places+1;i++){
nowdivpos[i]=parseInt(document.getElementById("div_"+i).style.left)
nowdivpos[i]-=speed
if(nowdivpos[i]<= -document.getElementById("pic_0").width){
document.getElementById("div_"+[i]).style.left=parseInt(el_center.style.width)+img_spacer
if(scroll_all_images==0&&nextpic>last_img_num){
nextpic=first_img_num
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
else{
if(nextpic>data.length-1){
nextpic=0
}
document.getElementById("loc"+[i]).location=data[nextpic][1]
document.getElementById("pic_"+[i]).src=data[nextpic++][0]
}
}
else{
document.getElementById("div_"+[i]).style.left=nowdivpos[i]
}
}
next_right=setTimeout("move_right()",run_rate)
}
function stopme(){
clearTimeout(next_right)
}
function newwin(loc){
if(loc==""){return}
//window.open(loc)
window.open(loc,'','left=200,top=200,width=200,height=200') // use for specific size and positioned window
}
// add onload="init()" and style="overflow-x:hidden" to the opening BODY tag
// place <script>init()</script> after the opening BODY tag
// -->
</script>
</HEAD>
<BODY><h1>Slideshow - Multiple Image</h1>
<script>init()</script>
<BR><BR><BR><BR>
For more information pay a visit to <a href="www.huntingground.freeserve.co.uk/style/slideshow_multi.htm">The Huntingground</a>
<BR><BR>
<ul>
<li>You can choose how many images places are shown in the display area from one up to the number of images you have in the array.<BR>
The display area automatically resizes to accommodate this number of places.<BR>
These image places are used to scroll the images.
<P>My example is set to show 5 images places scrolling all 12 images.
<P><li>
You can scroll through all the images in the array or a define a set of images.<br>
To define a set of images you select the first and last image to be shown, the set of images scrolled is then both of these images and all the images between.<BR>
<P>Example:<BR>
Starting image = 3 ; Ending image = 8;<BR>
Images scrolled = 3,4,5,6,7, & 8
<P>You can have any number of images in a set.<BR>
If you have more image places than images in the set only the set images are shown.<BR>
If you have less image places than images in the set the remaining images in the set are still scrolled..<BR>
If you have the same image places as your image set then as an image disappears to the left you will see it re-entering from the right.<BR><BR>
<li>Each image can be assigned its own unique link.
<li>Mouse over stops the display, mouse out restarts the display
<P><li>User Options within the script
<P><ol>
<li><b>img_places</b>=5 // number of image places in the display area
<li><b>img_size</b>=50 // size of images, width and height are the same
<li><b>img_spacer</b>=2 // space between images
<li><b>scroll_all_images</b>=1<BR>
// 0 = scroll from first_img_num to last_img_num.<BR>
// 1 = scroll through all images in the array<BR><BR>
If <b><i>scroll_all_images</i></b> is set at zero the following two lines define a set of images
<li><b>first_img_num</b>=1 // starting image number, 1 to number of images in the array
<li><b>last_img_num</b>=2 // ending image number<BR><BR>
<li><b>display_border</b>=4 //
<li><b>border_type</b>="ridge" //
<li><b>border_colour</b>="#afa684" //<BR>
<li><b>display_bgcol</b>="#cfc8a6" // add colour to the space between the images<BR><BR>
<li><b>display_top</b>=100 // top position must be stated
<li><b>display_center</b>=1 // 0 = no 1 = yes, if set at zero then display_left is used
<li><b>display_left</b>=100 // left position is over-ridden if display_center is set at 1
<li><b>speed</b>=1 // rate the images move
</ol>
</ul>
<P>Enter your image and link info into the <b>data</b> array.
<P><center>data[num]=new Array("image.jpg","link.htm")</center>
<P>If no link is required leave the quotes empty
<P><center>data[num]=new Array("image.jpg","")</center>
</BODY></HTML>