SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with javascript picture slider

    Hi,

    I have a picture slider I completed from a tutorial a while ago that works fine, however I want to add another element to it and as im not too good at javascript Im having problems.

    At the moment the slider scrolls through images when the 'next' or previous' buttons are clicked, and when the images are clicked on it goes to a defined link. What I want to add is a caption of text on the page aswell describing the picture when changed.

    I will show the original code and then my feeble attempt to change it accordingly the way i think looks right from the way its layed out now. If anyone can clue me in to what im doing wrong or if i need to do it another way cos i dont think im even close really

    Original Code: (ive left out some stuff i.e back forth buttons, colors etc)
    Code:
    var numberslide=new Array()
    numberslide[0]=["images/photo1.jpg", "http://www.domain1.com"]
    
    numberslide[1]=["images/photo2.jpg", "http://www.domain2.com"]
    numberslide[2]=["images/photo3.jpg", "http://www.domain3.com"]
    numberslide[3]=["images/photo4.jpg", "http://www.domain4.com"]
    numberslide[4]=["images/photo5.jpg", "http://www.domain5.com"]
    
    var mylinktarget=""
    var mylinkcolor="#CCCCCC" 
    var mylinkcolorSelected="#FF0000" 
    
    var imgborderwidth=0 
    
    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()
    }
    }
    My attempt:
    Code:
    var numberslide=new Array()
    numberslide[0]=["images/photo1.jpg", "http://www.domain1.com", "caption 1"]
    
    numberslide[1]=["images/photo2.jpg", "http://www.domain2.com", "caption 2"]
    numberslide[2]=["images/photo3.jpg", "http://www.domain3.com", "caption 3"]
    numberslide[3]=["images/photo4.jpg", "http://www.domain4.com", "caption 4"]
    numberslide[4]=["images/photo5.jpg", "http://www.domain5.com", "caption 5"]
    
    var mylinktarget=""
    var mylinkcolor="#CCCCCC" 
    var mylinkcolorSelected="#FF0000" 
    
    var imgborderwidth=0 
    
    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 caption(which){
    var caption=""
    currentindex=(which=="initial")? 0 : parseInt(which)
    var mode=(which=="initial")? "initial" : ""
    var which=(mode=="initial")? numberslide[0] : numberslide[which]
    if (which[3]!="")
    caption='<p>'+which[1]+'</p>'
    }
    If you need the info i left out to make sense of it just let me know
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  2. #2
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive just found a way to make myself a hell of a lot clearer.

    From the original code posted above... how do i get the caption from the array
    Code:
    var numberslide=new Array()
    numberslide[0]=["images/photo1.jpg", "http://www.domain1.com", "caption 1"]
    
    numberslide[1]=["images/photo2.jpg", "http://www.domain2.com", "caption 2"]
    to display on the page in a different area to where the image and the link are? Do i have to have write another function to call it? and how would i go about doing so?
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella


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
  •