dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript simple rewrite?

  1. #1
    Join Date
    Nov 2006
    Location
    Canyon Lake, TX
    Posts
    86

    Question Javascript simple rewrite?

    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>

  2. #2
    Join Date
    May 2005
    Location
    Northern Indiana
    Posts
    597
    After a cursory glance, I don't think it would be terribly difficult. Towards the top, there is a variable called "img_size", which notes that the width and height are the same. If you search the rest of the code for references to img_size, you'll find one in a line that sets height and another in a line that sets width.
    So, if you duplicate the line that defines img_size, change one to img_height and the other to img_width, and then change the other references to img_size to the appropriate new variable, it should get you well on your way...

  3. #3
    Join Date
    Nov 2006
    Location
    Canyon Lake, TX
    Posts
    86

    Talking Thank you Tweak4 !!

    Thank you very much for your help Tweak4, it worked like a charm. Plus I learned something new today. Thank you again for helping me with this very simple task. Have a great day!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles