SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i number first image in slideshow '1' instead of '0'?

    Hi everyone,

    I've searched high and low and finally found a slideshow script that suits my needs. It displays in a list the number of each picture so the user has the option of clicking on that picture directly rather than solely having to rely on the 'back' or 'next' buttons. the only problem is the first picture is labeled '0' instead of '1'. I'm not familiar with javascript so would really really appreciate any help on this. here's the script. thank you all!

    <html>

    <head>
    <title></title>
    <style type="text/css">

    #slideshowContainer{
    width: 300px;
    height: auto;
    }

    #numberDiv a{
    font: bold 14px Arial;
    text-decoration: none;
    }

    #backforthbuttons{
    margin-top: 6px;
    }

    </style>
    <script type="text/javascript">

    // Index It Image Slideshow script- By JavaScriptKit.com
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    //Specify images for slideshow:
    //["Image Path", "Optional Image link"]

    var numberslide=new Array()
    numberslide[0]=["images/photo1.jpg", "http://www.google.com"]

    numberslide[1]=["images/photo2.jpg", ""]
    numberslide[2]=["images/photo3.jpg", ""]
    numberslide[3]=["images/photo1.jpg", ""]
    numberslide[4]=["images/photo2.jpg", ""]

    var mylinktarget="" //specify optional link target
    var mylinkcolor="navy" //specify default color of number links
    var mylinkcolorSelected="red" //specify color of selected links

    var imgborderwidth=0 //specify border of image slideshow

    /////Stop customizing here////////////////

    var preloadit=new Array()
    for (i=0;i<numberslide.length;i++){
    preloadit[i]=new Image()
    preloadit[i].src=numberslide[i][0]
    }

    var currentindex=""

    function changeslides(which){
    var imghtml=""
    currentindex=(which=="initial")? 0 : parseInt(which)
    var mode=(which=="initial")? "initial" : ""
    var which=(mode=="initial")? numberslide[0] : numberslide[which]
    if (which[1]!="")
    imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
    imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
    if (which[1]!="")
    imghtml+='</a>'

    if (mode=="initial")
    document.write('<div>'+imghtml+'</div>')
    else{
    document.getElementById("imagecontainer").innerHTML=imghtml
    changecolors()
    }
    }

    function createnumbers(){
    document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
    for (i=1; i< numberslide.length; i++)
    document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
    }

    function changecolors(){
    var numberobj=document.getElementById("numberDiv")
    numberlinks=numberobj.getElementsByTagName("A")
    for (i=0; i<=currentindex; i++)
    numberlinks[i].style.color=mylinkcolorSelected
    for (i=currentindex+1; i<numberslide.length; i++)
    numberlinks[i].style.color=mylinkcolor
    }

    function goforward(){
    if (currentindex<numberslide.length-1)
    changeslides(currentindex+1)
    }

    function goback(){
    if (currentindex!=0)
    changeslides(currentindex-1)
    }

    </script>
    </head>

    <body>
    <div id="slideshowContainer"><div id="imagecontainer"><script type="text/javascript">
    changeslides("initial") //This call displays the first image
    </script>
    </div><div
    id="numberDiv"><script type="text/javascript">
    createnumbers() //This call writes out the numbers
    </script>
    </div><div id="backforthbuttons"><a
    href="javascript:goforward()" style="float: right">
    <dd>Next</a> <a href="javascript:goback()">Previous</a> </dd>
    </div>

    </div>
    </body>
    </html>

  2. #2
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change this block of code:
    function createnumbers(){
    document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
    for (i=1; i< numberslide.length; i++)
    document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
    }

    to:
    function createnumbers(){
    document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">1</a> ')
    for (i=1; i< numberslide.length; i++)
    document.write('<a href="javascript:changeslides(\''+i+'\')">'+(i+1)+'</a> ')
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that did the trick! thank you so much!!!

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Location
    Estonia
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    same script but a little different problem.
    i want to give each slide a name by myself.
    how can i do that,


Bookmarks

Posting Permissions

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