SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Putting two image slideshows on the same page - help

    I need to place two image slide shows on the same page. I have searched topics on this and I understand the problem pretty much, that only one will load because of the code window.onload=startit being the same variable in both so you need to adapt the code to run both, but I can only find an adapted code that allows this when the two slideshows are one right after the other on the page. In my case I have the first slideshow and then there is other content consisting of still photographs and text in-between the first and the second slide show. I am not good enough at java code to know what to substitute to make them both operable at the same time. I am pasting both codes below, which are the same slide show scripts but with different images. Can anyone tell me what to change in which one to enable them both to work on the same page with other content in-between the two slide shows. I appreciate any help, been trying to solve this for a couple days now.

    This is my first code:
    <script language="JavaScript1.2">

    //Presentational Slideshow Script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for legal use

    var slideshow_width='465px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height='348px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
    var slidebgcolor="black"

    var dropimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    dropimages[0]="images/billsscenic1.jpg"
    dropimages[1]="images/billsscenic2.jpg"
    dropimages[2]="images/billsscenic3.jpg"
    dropimages[3]="images/billsscenic4.jpg"
    dropimages[4]="images/billsscenic5.jpg"
    dropimages[5]="images/billsscenic6.jpg"
    dropimages[6]="images/billsscenic7.jpg"
    dropimages[7]="images/billsscenic8.jpg"
    dropimages[8]="images/billsscenic9.jpg"
    dropimages[9]="images/billsscenic10.jpg"
    dropimages[10]="images/billsscenic11.jpg"
    dropimages[11]="images/billsscenic12.jpg"
    dropimages[12]="images/billsscenic13.jpg"
    dropimages[13]="images/billsscenic14.jpg"
    dropimages[14]="images/billsscenic15.jpg"
    dropimages[15]="images/billsscenic16.jpg"
    dropimages[16]="images/billsscenic17.jpg"
    dropimages[17]="images/billsscenic18.jpg"
    dropimages[18]="images/billsscenic19.jpg"
    dropimages[19]="images/billsscenic20.jpg"
    dropimages[20]="images/billsscenic21.jpg"
    dropimages[21]="images/billsscenic22.jpg"
    dropimages[22]="images/billsscenic23.jpg"
    dropimages[23]="images/billsscenic24.jpg"
    dropimages[24]="images/billsscenic25.jpg"
    dropimages[25]="images/billsscenic26.jpg"
    dropimages[26]="images/billsscenic27.jpg"
    dropimages[27]="images/billsscenic28.jpg"
    dropimages[28]="images/billsscenic29.jpg"
    dropimages[29]="images/billsscenic30.jpg"
    dropimages[30]="images/billsscenic31.jpg"
    dropimages[31]="images/billsscenic32.jpg"
    dropimages[32]="images/billsscenic33.jpg"
    dropimages[33]="images/billsscenic34.jpg"
    dropimages[34]="images/billsscenic35.jpg"

    var droplinks=new Array()
    //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
    droplinks[0]=""
    droplinks[1]=""
    droplinks[2]=""


    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<dropimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=dropimages[p]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
    else
    document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

    var curpos=parseInt(slideshow_width)*(-1)
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=linkindex=0
    var nextimageindex=1


    function movepic(){
    if (curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.left=curpos+"px"
    }
    else{

    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
    tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
    nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("movepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=dropimages[curimageindex]
    linkindex=curimageindex
    curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
    }

    function rotatelink(){
    if (droplinks[linkindex]!="")
    window.location=droplinks[linkindex]
    }

    function resetit(what){
    curpos=parseInt(slideshow_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left=curpos+"px"
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

    And this is my second code:

    <script language="JavaScript1.2">

    //Presentational Slideshow Script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for legal use

    var slideshow_width='465px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height='348px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
    var slidebgcolor="black"

    var dropimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    dropimages[0]="images/bills1.jpg"
    dropimages[1]="images/bills2.jpg"
    dropimages[2]="images/bills3.jpg"
    dropimages[3]="images/bills4.jpg"
    dropimages[4]="images/bills5.jpg"
    dropimages[5]="images/bills6.jpg"
    dropimages[6]="images/bills7.jpg"
    dropimages[7]="images/bills8.jpg"
    dropimages[8]="images/bills9.jpg"
    dropimages[9]="images/bills10.jpg"
    dropimages[10]="images/bills11.jpg"
    dropimages[11]="images/bills12.jpg"
    dropimages[12]="images/bills13.jpg"
    dropimages[13]="images/bills14.jpg"
    dropimages[14]="images/bills15.jpg"
    dropimages[15]="images/bills16.jpg"
    dropimages[16]="images/bills17.jpg"
    dropimages[17]="images/bills18.jpg"
    dropimages[18]="images/bills19.jpg"
    dropimages[19]="images/bills20.jpg"
    dropimages[20]="images/bills21.jpg"
    dropimages[21]="images/bills22.jpg"
    dropimages[22]="images/bills23.jpg"
    dropimages[23]="images/bills24.jpg"
    dropimages[24]="images/bills25.jpg"
    dropimages[25]="images/bills26.jpg"
    dropimages[26]="images/bills27.jpg"
    dropimages[27]="images/bills28.jpg"
    dropimages[28]="images/bills29.jpg"
    dropimages[29]="images/bills30.jpg"
    dropimages[30]="images/bills31.jpg"
    dropimages[31]="images/bills32.jpg"

    dropimages[32]="images/bills34.jpg"
    dropimages[33]="images/bills35.jpg"
    dropimages[34]="images/bills36.jpg"
    dropimages[35]="images/bills37.jpg"
    dropimages[36]="images/bills38.jpg"
    dropimages[37]="images/bills39.jpg"
    dropimages[38]="images/bills40.jpg"
    dropimages[39]="images/bills41.jpg"
    dropimages[40]="images/bills42.jpg"
    dropimages[41]="images/bills43.jpg"
    dropimages[42]="images/bills44.jpg"
    dropimages[43]="images/bills45.jpg"
    dropimages[44]="images/bills46.jpg"
    dropimages[45]="images/bills47.jpg"
    dropimages[46]="images/bills48.jpg"
    dropimages[47]="images/bills49.jpg"
    dropimages[48]="images/bills50.jpg"
    dropimages[49]="images/bills51.jpg"
    dropimages[50]="images/bills52.jpg"
    dropimages[51]="images/bills53.jpg"
    dropimages[52]="images/bills54.jpg"
    dropimages[53]="images/bills55.jpg"
    dropimages[54]="images/bills56.jpg"
    dropimages[55]="images/bills57.jpg"
    dropimages[56]="images/bills58.jpg"
    dropimages[57]="images/bills59.jpg"
    dropimages[58]="images/bills60.jpg"
    dropimages[59]="images/bills61.jpg"
    dropimages[60]="images/bills62.jpg"
    dropimages[61]="images/bills63.jpg"
    dropimages[62]="images/bills64.jpg"
    dropimages[63]="images/bills65.jpg"
    dropimages[64]="images/bills66.jpg"
    dropimages[65]="images/bills67.jpg"
    dropimages[66]="images/bills68.jpg"
    dropimages[67]="images/bills69.jpg"

    dropimages[68]="images/bills80.jpg"
    dropimages[69]="images/bills81.jpg"
    dropimages[70]="images/bills82.jpg"
    dropimages[71]="images/bills83.jpg"

    dropimages[72]="images/bills86.jpg"

    dropimages[73]="images/bills90.jpg"
    dropimages[74]="images/bills93.jpg"
    dropimages[75]="images/bills95.jpg"
    dropimages[76]="images/bills97.jpg"
    dropimages[77]="images/bills98.jpg"
    dropimages[78]="images/bills100.jpg"
    dropimages[79]="images/bills101.jpg"
    dropimages[80]="images/bills102.jpg"
    dropimages[81]="images/bills103.jpg"
    dropimages[82]="images/bills105.jpg"

    var droplinks=new Array()
    //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
    droplinks[0]=""
    droplinks[1]=""
    droplinks[2]=""


    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<dropimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=dropimages[p]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
    else
    document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

    var curpos=parseInt(slideshow_width)*(-1)
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=linkindex=0
    var nextimageindex=1


    function movepic(){
    if (curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.left=curpos+"px"
    }
    else{

    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
    tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
    nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("movepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=dropimages[curimageindex]
    linkindex=curimageindex
    curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
    }

    function rotatelink(){
    if (droplinks[linkindex]!="")
    window.location=droplinks[linkindex]
    }

    function resetit(what){
    curpos=parseInt(slideshow_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left=curpos+"px"
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Because the script needs to access the different arrays while the page is running, you may need to:

    • change the name of the separate images to dropimages1 and dropimages2
    • change curcanvas to curcanvas1 and curcanvas2
    • update the functions that use the images and canvas to accept a parameter where you put the appropriate name
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I understand easily enough the first two, but not the third thing to do, I am pretty basic html and that is about it, for the most part I use dreamweaver to do everything so not even sure what number three means.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DynamicDrive is a place to look but not to touch. Like virtually all their scripts it uses global variables, so when you add a second copy you overwrite the first.
    I've encapsulated each copy in an anonymous function and used the well-known addLoadEvent function to append the required onload handlers.
    I can't easily test this so I can't guarantee anything, but try it.
    If it doesn't work, post any relevant error messages from the Firefox error console.
    Code:
    <script type='text/javascript'>
    
    function addLoadEvent(func) 
    { 
     var oldonload = window.onload; 
      if (typeof window.onload != 'function') 
      { 
        window.onload = func; 
      } 
      else 
      { 
       window.onload = function() 
       { 
        if (oldonload) 
        { 
         oldonload(); 
        } 
        func(); 
       } 
      } 
    } 
    
    
    //Presentational Slideshow Script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for legal use
    
    
    (function()
    {
    
    var slideshow_width='465px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height='348px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
    var slidebgcolor="black"
    
    var dropimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    dropimages[0]="images/billsscenic1.jpg"
    dropimages[1]="images/billsscenic2.jpg"
    dropimages[2]="images/billsscenic3.jpg"
    dropimages[3]="images/billsscenic4.jpg"
    dropimages[4]="images/billsscenic5.jpg"
    dropimages[5]="images/billsscenic6.jpg"
    dropimages[6]="images/billsscenic7.jpg"
    dropimages[7]="images/billsscenic8.jpg"
    dropimages[8]="images/billsscenic9.jpg"
    dropimages[9]="images/billsscenic10.jpg"
    dropimages[10]="images/billsscenic11.jpg"
    dropimages[11]="images/billsscenic12.jpg"
    dropimages[12]="images/billsscenic13.jpg"
    dropimages[13]="images/billsscenic14.jpg"
    dropimages[14]="images/billsscenic15.jpg"
    dropimages[15]="images/billsscenic16.jpg"
    dropimages[16]="images/billsscenic17.jpg"
    dropimages[17]="images/billsscenic18.jpg"
    dropimages[18]="images/billsscenic19.jpg"
    dropimages[19]="images/billsscenic20.jpg"
    dropimages[20]="images/billsscenic21.jpg"
    dropimages[21]="images/billsscenic22.jpg"
    dropimages[22]="images/billsscenic23.jpg"
    dropimages[23]="images/billsscenic24.jpg"
    dropimages[24]="images/billsscenic25.jpg"
    dropimages[25]="images/billsscenic26.jpg"
    dropimages[26]="images/billsscenic27.jpg"
    dropimages[27]="images/billsscenic28.jpg"
    dropimages[28]="images/billsscenic29.jpg"
    dropimages[29]="images/billsscenic30.jpg"
    dropimages[30]="images/billsscenic31.jpg"
    dropimages[31]="images/billsscenic32.jpg"
    dropimages[32]="images/billsscenic33.jpg"
    dropimages[33]="images/billsscenic34.jpg"
    dropimages[34]="images/billsscenic35.jpg"
    
    var droplinks=new Array()
    //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
    droplinks[0]=""
    droplinks[1]=""
    droplinks[2]=""
    
    
    ////NO need to edit beyond here/////////////
    
    var preloadedimages=new Array()
    for (p=0;p<dropimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=dropimages[p]
    }
    
    var ie4=document.all
    var dom=document.getElementById
    
    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
    else
    document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')
    
    var curpos=parseInt(slideshow_width)*(-1)
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=linkindex=0
    var nextimageindex=1
    
    
    function movepic(){
    if (curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.left=curpos+"px"
    }
    else{
    
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
    tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
    nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }
    
    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("movepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=dropimages[curimageindex]
    linkindex=curimageindex
    curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
    }
    
    function rotatelink(){
    if (droplinks[linkindex]!="")
    window.location=droplinks[linkindex]
    }
    
    function resetit(what){
    curpos=parseInt(slideshow_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left=curpos+"px"
    }
    
    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    rotateimage()
    }
    
    addLoadEvent(startit);
    
    })();
    
    </script>
    
    <script type='text/javascript'>
    
    //Presentational Slideshow Script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for legal use
    
    (function()
    {
    
    var slideshow_width='465px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height='348px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
    var slidebgcolor="black"
    
    var dropimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    dropimages[0]="images/bills1.jpg"
    dropimages[1]="images/bills2.jpg"
    dropimages[2]="images/bills3.jpg"
    dropimages[3]="images/bills4.jpg"
    dropimages[4]="images/bills5.jpg"
    dropimages[5]="images/bills6.jpg"
    dropimages[6]="images/bills7.jpg"
    dropimages[7]="images/bills8.jpg"
    dropimages[8]="images/bills9.jpg"
    dropimages[9]="images/bills10.jpg"
    dropimages[10]="images/bills11.jpg"
    dropimages[11]="images/bills12.jpg"
    dropimages[12]="images/bills13.jpg"
    dropimages[13]="images/bills14.jpg"
    dropimages[14]="images/bills15.jpg"
    dropimages[15]="images/bills16.jpg"
    dropimages[16]="images/bills17.jpg"
    dropimages[17]="images/bills18.jpg"
    dropimages[18]="images/bills19.jpg"
    dropimages[19]="images/bills20.jpg"
    dropimages[20]="images/bills21.jpg"
    dropimages[21]="images/bills22.jpg"
    dropimages[22]="images/bills23.jpg"
    dropimages[23]="images/bills24.jpg"
    dropimages[24]="images/bills25.jpg"
    dropimages[25]="images/bills26.jpg"
    dropimages[26]="images/bills27.jpg"
    dropimages[27]="images/bills28.jpg"
    dropimages[28]="images/bills29.jpg"
    dropimages[29]="images/bills30.jpg"
    dropimages[30]="images/bills31.jpg"
    dropimages[31]="images/bills32.jpg"
    
    dropimages[32]="images/bills34.jpg"
    dropimages[33]="images/bills35.jpg"
    dropimages[34]="images/bills36.jpg"
    dropimages[35]="images/bills37.jpg"
    dropimages[36]="images/bills38.jpg"
    dropimages[37]="images/bills39.jpg"
    dropimages[38]="images/bills40.jpg"
    dropimages[39]="images/bills41.jpg"
    dropimages[40]="images/bills42.jpg"
    dropimages[41]="images/bills43.jpg"
    dropimages[42]="images/bills44.jpg"
    dropimages[43]="images/bills45.jpg"
    dropimages[44]="images/bills46.jpg"
    dropimages[45]="images/bills47.jpg"
    dropimages[46]="images/bills48.jpg"
    dropimages[47]="images/bills49.jpg"
    dropimages[48]="images/bills50.jpg"
    dropimages[49]="images/bills51.jpg"
    dropimages[50]="images/bills52.jpg"
    dropimages[51]="images/bills53.jpg"
    dropimages[52]="images/bills54.jpg"
    dropimages[53]="images/bills55.jpg"
    dropimages[54]="images/bills56.jpg"
    dropimages[55]="images/bills57.jpg"
    dropimages[56]="images/bills58.jpg"
    dropimages[57]="images/bills59.jpg"
    dropimages[58]="images/bills60.jpg"
    dropimages[59]="images/bills61.jpg"
    dropimages[60]="images/bills62.jpg"
    dropimages[61]="images/bills63.jpg"
    dropimages[62]="images/bills64.jpg"
    dropimages[63]="images/bills65.jpg"
    dropimages[64]="images/bills66.jpg"
    dropimages[65]="images/bills67.jpg"
    dropimages[66]="images/bills68.jpg"
    dropimages[67]="images/bills69.jpg"
    
    dropimages[68]="images/bills80.jpg"
    dropimages[69]="images/bills81.jpg"
    dropimages[70]="images/bills82.jpg"
    dropimages[71]="images/bills83.jpg"
    
    dropimages[72]="images/bills86.jpg"
    
    dropimages[73]="images/bills90.jpg"
    dropimages[74]="images/bills93.jpg"
    dropimages[75]="images/bills95.jpg"
    dropimages[76]="images/bills97.jpg"
    dropimages[77]="images/bills98.jpg"
    dropimages[78]="images/bills100.jpg"
    dropimages[79]="images/bills101.jpg"
    dropimages[80]="images/bills102.jpg"
    dropimages[81]="images/bills103.jpg"
    dropimages[82]="images/bills105.jpg"
    
    var droplinks=new Array()
    //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
    droplinks[0]=""
    droplinks[1]=""
    droplinks[2]=""
    
    
    ////NO need to edit beyond here/////////////
    
    var preloadedimages=new Array()
    for (p=0;p<dropimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=dropimages[p]
    }
    
    var ie4=document.all
    var dom=document.getElementById
    
    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
    else
    document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')
    
    var curpos=parseInt(slideshow_width)*(-1)
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=linkindex=0
    var nextimageindex=1
    
    
    function movepic(){
    if (curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.left=curpos+"px"
    }
    else{
    
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
    tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
    nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }
    
    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("movepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=dropimages[curimageindex]
    linkindex=curimageindex
    curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
    }
    
    function rotatelink(){
    if (droplinks[linkindex]!="")
    window.location=droplinks[linkindex]
    }
    
    function resetit(what){
    curpos=parseInt(slideshow_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left=curpos+"px"
    }
    
    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    rotateimage()
    }
    
    addLoadEvent(startit);
    
    })();
    
    </script>
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this and neither one is showing up on the page, but it says at the bottom "transferring data from geo.yahoo.com.." and nothing appears to be loading. The page url is: http://www.showmeparanormal.net/Inve...Residence.html

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BabyPaige View Post
    Thanks Paul, I understand easily enough the first two, but not the third thing to do, I am pretty basic html and that is about it, for the most part I use dreamweaver to do everything so not even sure what number three means.
    That third part is where you update the functions that use the images and canvas to accept a parameter where you put the appropriate name

    For example, before:
    Code javascript:
    function startit(){
        var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
        rotateimage()
    }

    After:
    Code javascript:
    function startit(curcanvas, dropimages){
        var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
        rotateimage()
    }

    which you would then call not with startit() but with startit(curcanvas1, dropimages1)

    It can be quite some effort though to do the above type of work.
    You may want to check out logic ali's solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, especially when it seems like Greek to me..lol. I wish I could comprehend all this stuff, but it feels like learning a entire different language. I envy those who can do this stuff easily. It is the only way I can think of to do this page and will probably be the only time I will ever need to do this, and that because there are too many photos that have to go on this page.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I have a working solution here, but I'm going to pretty it up a wee bit first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BabyPaige View Post
    I tried this and neither one is showing up on the page, but it says at the bottom "transferring data from geo.yahoo.com.." and nothing appears to be loading. The page url is: http://www.showmeparanormal.net/Inve...Residence.html
    It looks like in one copy you would need to change the IDs of the elements that it creates (canvas0, canvas1) and all references to them. Such code isn't really worth indulging.
    Just for demonstration, here are a couple of examples [1][2] of image-cycling scripts that were written to support multiple instances if required.
    Tab-indentation is a crime against humanity.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here is the code as it stands now. There's a long way to go with it before it looks good, but at least it works as expected.

    Code html4strict:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css"
    </head>
    <body>
    Canvas 0
    <script>
    function addOnLoad(newFunction) {
        var oldOnLoad = window.onload;
        if (typeof oldOnLoad === "function") {
            window.onload = function() {
                if (oldOnLoad) {
                    oldOnLoad();
                }
                newFunction();
            }
        }
        else {
            window.onload = newFunction;
        }
    }
    </script>
    <script>
    window.slideshow_width = '465px';
    window.slideshow_height = '348px';
    window.pause = 3000;
    window.slidebgcolor = "black";
     window.dropimages = ["images/billsscenic1.jpg", "images/billsscenic2.jpg", "images/billsscenic3.jpg", "images/billsscenic4.jpg", "images/billsscenic5.jpg", "images/billsscenic6.jpg", "images/billsscenic7.jpg", "images/billsscenic8.jpg", "images/billsscenic9.jpg", "images/billsscenic10.jpg", "images/billsscenic11.jpg", "images/billsscenic12.jpg", "images/billsscenic13.jpg", "images/billsscenic14.jpg", "images/billsscenic15.jpg", "images/billsscenic16.jpg", "images/billsscenic17.jpg", "images/billsscenic18.jpg", "images/billsscenic19.jpg", "images/billsscenic20.jpg", "images/billsscenic21.jpg", "images/billsscenic22.jpg", "images/billsscenic23.jpg", "images/billsscenic24.jpg", "images/billsscenic25.jpg", "images/billsscenic26.jpg", "images/billsscenic27.jpg", "images/billsscenic28.jpg", "images/billsscenic29.jpg", "images/billsscenic30.jpg", "images/billsscenic31.jpg", "images/billsscenic32.jpg", "images/billsscenic33.jpg", "images/billsscenic34.jpg", "images/billsscenic35.jpg"];
    window.droplinks = [];
    window.curpos = parseInt(slideshow_width, 10) * (-1);
    window.degree = 10;
    window.curcanvas = "canvas0";
    window.curindex = 0;
    window.nextimageindex = 1;
    window.tempobj = document.getElementById(curcanvas);
    createCanvases(0, slideshow_width, slideshow_height, slidebgcolor);
    preload(dropimages);
    addOnLoad(startit);
    function createCanvases(num, width, height, bgcolor) {
        var html = '<div style="position:relative;width:' + width + ';height:' + height + ' ;overflow:hidden">';
        html += createCanvas('canvas' + num, width, height, bgcolor);
        html += createCanvas('canvas' + num + 1, width, height, bgcolor);
        html += '</div>';
        document.write(html);
    }
    function createCanvas(id, width, height, bgcolor) {
    	return '<div id="' + id + '" style="position:absolute;width:' + width + ';height:' + height + ' ;background-color:' + bgcolor + ';left:-' + width + '"></div>';
    }
    function preload(images) {
        var preloadedimages = [],
            p;
        for (p = 0; p < images.length; p += 1) {
            preloadedimages[p] = new Image();
            preloadedimages[p].src = images[p];
        }
    }
    function startit() {
        var crossobj = document.getElementById(window.curcanvas);
        crossobj.innerHTML = '<a href="' + window.droplinks[window.curindex] + '"><img src="' + window.dropimages[window.curindex] + '" border=0></a>';
        rotateimage();
    }
    function rotateimage() {
        resetit(window.curcanvas);
        var crossobj = document.getElementById(window.curcanvas);
        crossobj.style.zIndex += 1;
        window.dropslide = setInterval(movepic, 50);
        window.curcanvas = (window.curcanvas === "canvas0") ? "canvas1": "canvas0";
        window.curindex = (window.curindex < window.dropimages.length - 1) ? window.curindex + 1 : 0;
    }
    function resetit(what) {
        window.curpos = parseInt(slideshow_width, 10) * (-1);
        window.tempobj = document.getElementById(what);
        window.tempobj.style.left = window.curpos + "px";
    }
    function movepic() {
        if (window.curpos < 0) {
            window.curpos = Math.min(window.curpos + window.degree, 0);
            window.tempobj.style.left = window.curpos + "px";
        } else {
            clearInterval(window.dropslide);
            window.nextcanvas = (window.curcanvas === "canvas0") ? "canvas0": "canvas1";
            window.tempobj = document.getElementById(window.nextcanvas);
            var slideimage = '<img src="' + window.dropimages[curindex] + '" border=0>';
            window.tempobj.innerHTML = (window.droplinks[window.curindex] !== "") ? '<a href="' + window.droplinks[window.curindex] + '">' + window.slideimage + '</a>' : window.slideimage;
            window.nextindex = (window.nextindex < window.dropimages.length - 1) ? window.nextindex + 1 : 0;
            setTimeout(rotateimage, window.pause);
        }
    }
    function rotatelink() {
        if (window.droplinks[window.curindex] !== "") {
            window.location = window.droplinks[window.curindex];
        }
    }
    </script>
    Canvas 2
    <script language="JavaScript1.2">
    //Presentational Slideshow Script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
    //This credit MUST stay intact for legal use
    var slideshow_width2 = '465px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height2 = '348px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause2 = 3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
    var slidebgcolor2 = "black"
     
    var dropimages2 = new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    dropimages2[0] = "images/bills1.jpg"
    dropimages2[1] = "images/bills2.jpg"
    dropimages2[2] = "images/bills3.jpg"
    dropimages2[3] = "images/bills4.jpg"
    dropimages2[4] = "images/bills5.jpg"
    dropimages2[5] = "images/bills6.jpg"
    dropimages2[6] = "images/bills7.jpg"
    dropimages2[7] = "images/bills8.jpg"
    dropimages2[8] = "images/bills9.jpg"
    dropimages2[9] = "images/bills10.jpg"
    dropimages2[10] = "images/bills11.jpg"
    dropimages2[11] = "images/bills12.jpg"
    dropimages2[12] = "images/bills13.jpg"
    dropimages2[13] = "images/bills14.jpg"
    dropimages2[14] = "images/bills15.jpg"
    dropimages2[15] = "images/bills16.jpg"
    dropimages2[16] = "images/bills17.jpg"
    dropimages2[17] = "images/bills18.jpg"
    dropimages2[18] = "images/bills19.jpg"
    dropimages2[19] = "images/bills20.jpg"
    dropimages2[20] = "images/bills21.jpg"
    dropimages2[21] = "images/bills22.jpg"
    dropimages2[22] = "images/bills23.jpg"
    dropimages2[23] = "images/bills24.jpg"
    dropimages2[24] = "images/bills25.jpg"
    dropimages2[25] = "images/bills26.jpg"
    dropimages2[26] = "images/bills27.jpg"
    dropimages2[27] = "images/bills28.jpg"
    dropimages2[28] = "images/bills29.jpg"
    dropimages2[29] = "images/bills30.jpg"
    dropimages2[30] = "images/bills31.jpg"
    dropimages2[31] = "images/bills32.jpg"
    dropimages2[32] = "images/bills34.jpg"
    dropimages2[33] = "images/bills35.jpg"
    dropimages2[34] = "images/bills36.jpg"
    dropimages2[35] = "images/bills37.jpg"
    dropimages2[36] = "images/bills38.jpg"
    dropimages2[37] = "images/bills39.jpg"
    dropimages2[38] = "images/bills40.jpg"
    dropimages2[39] = "images/bills41.jpg"
    dropimages2[40] = "images/bills42.jpg"
    dropimages2[41] = "images/bills43.jpg"
    dropimages2[42] = "images/bills44.jpg"
    dropimages2[43] = "images/bills45.jpg"
    dropimages2[44] = "images/bills46.jpg"
    dropimages2[45] = "images/bills47.jpg"
    dropimages2[46] = "images/bills48.jpg"
    dropimages2[47] = "images/bills49.jpg"
    dropimages2[48] = "images/bills50.jpg"
    dropimages2[49] = "images/bills51.jpg"
    dropimages2[50] = "images/bills52.jpg"
    dropimages2[51] = "images/bills53.jpg"
    dropimages2[52] = "images/bills54.jpg"
    dropimages2[53] = "images/bills55.jpg"
    dropimages2[54] = "images/bills56.jpg"
    dropimages2[55] = "images/bills57.jpg"
    dropimages2[56] = "images/bills58.jpg"
    dropimages2[57] = "images/bills59.jpg"
    dropimages2[58] = "images/bills60.jpg"
    dropimages2[59] = "images/bills61.jpg"
    dropimages2[60] = "images/bills62.jpg"
    dropimages2[61] = "images/bills63.jpg"
    dropimages2[62] = "images/bills64.jpg"
    dropimages2[63] = "images/bills65.jpg"
    dropimages2[64] = "images/bills66.jpg"
    dropimages2[65] = "images/bills67.jpg"
    dropimages2[66] = "images/bills68.jpg"
    dropimages2[67] = "images/bills69.jpg"
    dropimages2[68] = "images/bills80.jpg"
    dropimages2[69] = "images/bills81.jpg"
    dropimages2[70] = "images/bills82.jpg"
    dropimages2[71] = "images/bills83.jpg"
    dropimages2[72] = "images/bills86.jpg"
    dropimages2[73] = "images/bills90.jpg"
    dropimages2[74] = "images/bills93.jpg"
    dropimages2[75] = "images/bills95.jpg"
    dropimages2[76] = "images/bills97.jpg"
    dropimages2[77] = "images/bills98.jpg"
    dropimages2[78] = "images/bills100.jpg"
    dropimages2[79] = "images/bills101.jpg"
    dropimages2[80] = "images/bills102.jpg"
    dropimages2[81] = "images/bills103.jpg"
    dropimages2[82] = "images/bills105.jpg"
     
    var droplinks2 = new Array()
    //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
    droplinks2[0] = ""
    droplinks2[1] = ""
    droplinks2[2] = ""
     
    ////NO need to edit beyond here/////////////
    var preloadedimages2 = new Array()
    for (p = 0; p < dropimages2.length; p++) {
        preloadedimages2[p] = new Image()
        preloadedimages2[p].src = dropimages2[p]
    }
     
    document.write('<div style="position:relative;width:' + slideshow_width2 + ';height:' + slideshow_height2 + ' ;overflow:hidden"><div id="canvas2" style="position:absolute;width:' + slideshow_width2 + ';height:' + slideshow_height2 + ' ;background-color:' + slidebgcolor2 + ';left:-' + slideshow_width2 + '"></div><div id="canvas3" style="position:absolute;width:' + slideshow_width2 + ';height:' + slideshow_height2 + ' ;background-color:' + slidebgcolor2 + ';left:-' + slideshow_width2 + '"></div></div>')
     
    var curpos2 = parseInt(slideshow_width2) * ( - 1)
    var degree2 = 10
    var curcanvas2 = "canvas2"
    var curimageindex2 = linkindex2 = 0
    var nextimageindex2 = 1
     
    function movepic2() {
        if (curpos2 < 0) {
            curpos2 = Math.min(curpos2 + degree2, 0)
            tempobj2.style.left = curpos2 + "px"
        }
        else {
     
            clearInterval(dropslide2)
            nextcanvas2 = (curcanvas2 == "canvas2") ? "canvas2": "canvas3"
            tempobj2 = document.getElementById(nextcanvas2)
            var slideimage = '<img src="' + dropimages2[curimageindex2] + '" border=0>'
            tempobj2.innerHTML = (droplinks2[curimageindex2] != "") ? '<a href="' + droplinks2[curimageindex2] + '">' + slideimage + '</a>': slideimage
            nextimageindex2 = (nextimageindex2 < dropimages2.length - 1) ? nextimageindex2 + 1 : 0
            setTimeout("rotateimage2()", pause2)
        }
    }
     
    function rotateimage2() {
        resetit2(curcanvas2)
        var crossobj = tempobj2 = document.getElementById(curcanvas2)
        crossobj.style.zIndex++
        var temp = 'setInterval("movepic2()",50)'
        dropslide2 = eval(temp)
        curcanvas2 = (curcanvas2 == "canvas2") ? "canvas3": "canvas2"
        linkindex2 = curimageindex2
        curimageindex2 = (curimageindex2 < dropimages2.length - 1) ? curimageindex2 + 1 : 0
    }
     
    function rotatelink2() {
        if (droplinks2[linkindex2] != "") window.location = droplinks2[linkindex2]
    }
     
    function resetit2(what) {
        curpos2 = parseInt(slideshow_width2) * ( - 1)
        var crossobj = document.getElementById(what)
        crossobj.style.left = curpos2 + "px"
    }
     
    function startit2() {
        var crossobj = document.getElementById(curcanvas2)
        crossobj.innerHTML = '<a href="' + droplinks2[curimageindex2] + '"><img src="' + dropimages2[curimageindex2] + '" border=0></a>'
        rotateimage2()
    }
     
    addOnLoad(startit2);
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I'll be tidying up the script for the first slideshow that's on the page and posting progress information on it.

    Here, I've separated the global variables out into a single global slideshow object which helps to keep them away from where they're not wanted.

    Code javascript:
    var images = [
        "images/billsscenic1.jpg",
        ...
        "images/billsscenic35.jpg"
    ];
    var links = [];
    slideshow = new Slideshow({
        'width': '465px',
        'height': '348px',
        'pause': 3000,
        'bgcolor': 'black',
        'images': images,
        'links': links
    });
     
    function Slideshow(obj) {
        this.width = obj.width;
        this.height = obj.height;
        this.pause = obj.pause;
        this.bgcolor = obj.bgcolor;
        this.images = obj.images;
        this.links = obj.links;
        this.curpos = -parseInt(this.width, 10);
        this.degree = 10;
        this.canvasnum = 0;
        this.canvasId = 'canvas' + this.canvasnum;
        this.index = 0;
        this.nextindex = 1;
        this.canvas = document.getElementById(this.canvasId);
        return this;
    }
    createCanvases(slideshow);
    preload(slideshow.images);
    addOnLoad(startit);
    function createCanvases(slideshow) {
        var html = '<div style="position:relative;width:' + slideshow.width + ';height:' + slideshow.height + ' ;overflow:hidden">';
        html += createCanvas('canvas' + slideshow.canvasnum, slideshow.width, slideshow.height, slideshow.bgcolor);
        html += createCanvas('canvas' + slideshow.canvasnum + 1, slideshow.width, slideshow.height, slideshow.bgcolor);
        html += '</div>';
        document.write(html);
    }
    function createCanvas(id, width, height, bgcolor) {
    	return '<div id="' + id + '" style="position:absolute;width:' + width + ';height:' + height + ' ;background-color:' + bgcolor + ';left:-' + width + '"></div>';
    }
    function preload(images) {
        var preloadedimages = [],
            p;
        for (p = 0; p < images.length; p += 1) {
            preloadedimages[p] = new Image();
            preloadedimages[p].src = images[p];
        }
    }
    function startit() {
        var crossobj = document.getElementById(slideshow.canvasId);
        crossobj.innerHTML = '<a href="' + slideshow.links[slideshow.index] + '"><img src="' + slideshow.images[slideshow.index] + '" border=0></a>';
        rotateimage();
    }
    function rotateimage() {
        resetit(slideshow.canvasId);
        var crossobj = document.getElementById(slideshow.canvasId);
        crossobj.style.zIndex += 1;
        window.dropslide = setInterval(movepic, 50);
        slideshow.canvasId = (slideshow.canvasId === "canvas0") ? "canvas1": "canvas0";
        slideshow.index = (slideshow.index < slideshow.images.length - 1) ? slideshow.index + 1 : 0;
    }
    function resetit(what) {
        slideshow.canvas = document.getElementById(what);
        slideshow.canvas.style.left = slideshow.curpos + "px";
    }
    function movepic() {
        if (slideshow.curpos < 0) {
            slideshow.curpos = Math.min(slideshow.curpos + slideshow.degree, 0);
            slideshow.canvas.style.left = slideshow.curpos + "px";
        } else {
            clearInterval(window.dropslide);
            window.nextcanvas = (slideshow.canvasId === "canvas0") ? "canvas0": "canvas1";
            slideshow.canvas = document.getElementById(window.nextcanvas);
            var slideimage = '<img src="' + slideshow.images[slideshow.index] + '" border=0>';
            slideshow.canvas.innerHTML = (slideshow.links[slideshow.index] !== "") ? '<a href="' + slideshow.links[slideshow.index] + '">' + window.slideimage + '</a>' : window.slideimage;
            slideshow.nextindex = (slideshow.nextindex < slideshow.images.length - 1) ? slideshow.nextindex + 1 : 0;
            setTimeout(rotateimage, slideshow.pause);
        }
    }
    function rotatelink() {
        if (slideshow.links[slideshow.index] !== "") {
            window.location = slideshow.links[slideshow.index];
        }
    }

    Next is to move certain functions that modify variables into the slideshow object
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for helping me so much. I have to go to work today, but will check back in tonight.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Well I've been having quite some fun with this slideshow over the weekend.

    A Slideshow class has been created inside of which all the improved code has been placed. This now means that the class itself can be loaded as a single script, and then instantiated when you need it.

    Code html4strict:
    <script src="slideshow.js"> </script>
    <script src="slideshowInit1.js"> </script>
    <script src="slideshowInit2.js"> </script>

    Here is the script to initialise new slideshow

    Code javascript:
    <script src="slideshow.js"> </script>
    <script>
    var images = [
        "images/billsscenic1.jpg",
        ...
        "images/billsscenic35.jpg"
    ];
    var links = [
        "",
        ...
        ""
    ];
    var slideshow1 = new Slideshow({
        'width': '465px',
        'height': '348px',
        'pause': 3000,
        'bgcolor': 'black',
        'images': images,
        'links': links
    });
    slideshow1.init();

    In the class itself, there is still a lot of work that wants to be done.
    Things like separating the image canvases to their own object structures, and targeting an id element for the content instead of writing it out to the window, but for now this now works fine with as many slideshows as you might require.

    Code javascript:
    ////NO need to edit beyond here/////////////
    function Slideshow(obj) {
    	this.name = 'Slideshow';
        this.width = obj.width;
        this.height = obj.height;
        this.pause = obj.pause;
        this.bgcolor = obj.bgcolor;
        this.images = obj.images;
        this.links = obj.links;
        this.startpos = -parseInt(this.width, 10);
        this.curpos = this.startpos;
        this.degree = 10;
        this.canvasNum = 0;
        this.imageId = newCanvasId();
        this.oldImageId = newCanvasId(this.imageId);
        this.image = {};
        this.index = 0;
        this.moveInterval = {};
    	this.init = function () {
    		preload(images);
    		createCanvases(this.imageId, this.oldImageId, this.width, this.height, this.bgcolor);
    		addOnLoad(function (that) {
    			return function () {
    				that.rotateImage();
    			};
    		}(this));
    	};
    	function addOnLoad(newFunction) {
    	    var oldOnLoad = window.onload;
    	    if (typeof oldOnLoad === "function") {
    	        window.onload = function() {
    	            if (oldOnLoad) {
    	                oldOnLoad();
    	            }
    	            newFunction();
    	        }
    	    }
    	    else {
    	        window.onload = newFunction;
    	    }
    	}
        function newCanvasId(baseId) {
        	var canvas = 'canvas',
        		num = 0,
        		canvasId = canvas + num;
        	while (document.getElementById(canvasId) || baseId === canvasId) {
        		num += 1;
        		canvasId = canvas + num;
        	}
        	return canvasId;
        }
    	function preload(images) {
    	var preloaded = [],
    		i;
    		for (i = 0; i < images.length; i += 1) {
    		    preloaded[i] = new Image();
    		    preloaded[i].src = images[i];
    		}
    	};
    	function createCanvases(canvas1, canvas2, width, height, bgcolor) {
    	    var html = '<div style="position:relative;width:' + width + ';height:' + height + ' ;overflow:hidden">';
    	    html += createCanvas(canvas1, width, height, bgcolor);
    	    html += createCanvas(canvas2, width, height, bgcolor);
    	    html += '</div>';
    	    document.write(html);
    	}
    	function createCanvas(id, width, height, bgcolor) {
    		return '<div id="' + id + '" style="position:absolute;width:' + width + ';height:' + height + ' ;background-color:' + bgcolor + ';left:-' + width + '"></div>';
    	}
    	this.rotateImage = function () {
    		this.nextImage();
    	    this.moveInterval = setInterval(function (that) {
    	    	return function () {
    	    		that.movePic();
    	    	}
    	    }(this), 50);
    	    this.switchCanvas();
    	    this.index = (this.index + 1) &#37; this.images.length;
    	};
    	this.nextImage = function () {
    	    this.curpos = -parseInt(this.width);
    	    this.image = document.getElementById(this.imageId);
    	    this.image.style.left = this.curpos + "px";
    	    this.image.style.zIndex++;
    		this.image.innerHTML = this.newImageHTML();
    	}
    	this.newImageHTML = function () {
    	    var index =  this.index,
    	    	html = '<img src="' + this.images[index] + '" alt="' + this.images[index] + '">';
    	    if (this.links[index] != "") {
    	    	html = '<a href="' + this.links[index] + '">' + html + '</a>';
    	    }
    	    return html;
    	};
        this.switchCanvas = function () {
        	var temp = this.oldImageId;
        	this.oldImageId = this.imageId;
        	this.imageId = temp;
        };
    	this.movePic = function () {
    	    if (this.curpos < 0) {
    	        this.curpos = Math.min(this.curpos + this.degree, 0);
    	        this.image.style.left = this.curpos + "px";
    	    }
    	    else {
    			this.waitForNextImage();
    	    }
    	};
    	this.waitForNextImage = function () {
    		clearInterval(this.moveInterval);
    	    setTimeout(function (that) {
    	    	return function () {
    	    		that.rotateImage();
    	    	};
    	    }(this), 3000);
    	};
        return this;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Code:
    var slideshow1 = new Slideshow({
        'width': '465px',
        'height': '348px',
        'pause': 3000,
        'bgcolor': 'black',
        'images': images,
        'links': links
    });
    slideshow1.init();
    You could simplify that syntax by calling this.init within the constructor, then there'd be no need to create a variable to store the object.
    Tab-indentation is a crime against humanity.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Cheers Logic Ali, now it's just the following to create a new slideshow

    Code javascript:
    new Slideshow({
        'width': '465px',
        ...
    });

    because the end of the Slideshow() class has the following change

    Code javascript:
    function Slideshow(obj) {
        ...
        // return this;
        this.init();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gosh, thank you for being such a help and doing all that. So should I now copy and paste this last code for the first slide show to the page? I really appreciate all this help, you are awesome.

    So, do I put all three codes on the page, and if so is there any specific place each needs to go, like the head or the body.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Currently the new Slideshow(...) part of the script behaves as the original one does, it just dumps generated code right where the script is.

    An improvement that I plan for it is to provide an identifier to it, so that the code will be generated in that specified element instead.

    So right now, you would load the slideshow.js file which contains the bulk of the slideshow code. That's the one that start with the comment "NO need to edit beyond here"

    Then, you would place the new Slideshow() parts where you want them to appear on the page.

    Code html4strict:
    <html>
    <head>
    <script src="slideshow.js"> </script>
    </head>
    <body>
        ...
        <script>
            var images = [
                ...
            ];
            var links = [
                ...
            ];
            // create first slideshow
            new Slideshow({
                'width': '465px',
                ...
            };
        </script>
        <!-- more html content -->
        ...
        <script>
            var images = [
                ...
            ];
            var links = [
                ...
            ];
            // create second slideshow
            new Slideshow({
                'width': '465px',
                ...
            };
        </script>
        ...
    </body>
    </html>
    ]
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so I am going to copy and paste that code to notepad and name it slideshow.js and upload it the domain, correct? Then....

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I have a better technique to create each slideshow, which uses code like this:

    Code javascript:
    new Slideshow({
        'width': '465px',
        'height': '348px',
        'pause': 3000,
        'bgcolor': 'black',
        'images': [
    		{'src': 'images/bills1.jpg', 'url': ''},
    		...
    		{'src': 'images/bills105.jpg', 'url': ''}
    	]
    });

    so I'll make some adjustments to the Slideshow script tonight and put through an update tomorrow.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much again, you rock.

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Okay here we go.

    A few minor changes later and the slideshows can be targeted to any identified element on the page.
    The slideshow constructors can be placed anywhere on the page after the initial slideshow script, in the head, end of the body, it doesn't matter.
    The slideshow constructors take an extra parameter now of the target element, referenced by an id value.

    Here's the html for the test page.

    Code javascript:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="js/slideshow.js"> </script>
    <script src="js/billsScenicSlideshow.js"> </script>
    <script src="js/billsSlideshow.js"> </script>
    </head>
    <body>
    Bills Scenic Slideshow
    <div id="billsScenicSlideshow">
    </div>
    Bills Slideshow
    <div id="billsSlideshow">
    </div>
    </body>
    </html>

    Here's what one of the constructors looks like. Note the added target parameter

    Code javascript:
    new Slideshow({
        'target': 'billsSlideshow',
        'width': 465,
        'height': 348,
        'pause': 3000,
        'bgcolor': 'black',
        'images': [
    		{'image': 'images/bills1.jpg', 'url': ''},
    		...
    		{'image': 'images/bills105.jpg', 'url': ''}
    	]
    });

    And here's the updated slideshow script.

    The ability to run from the head comes from placing the createCanvases function inside the onload event.
    The imageId parts have been updated, so that their names are based on the target identifier which makes providing unique names for the image sections a lot easier.
    And the HTML parts of the code have all been removed, and replaced with DOM code that creates the elements instead.

    Here's what the updated slideshow script looks like now.

    Code javascript:
    function Slideshow(obj) {
        this.target = obj.target;
        this.width = obj.width;
        this.height = obj.height;
        this.pause = obj.pause;
        this.bgcolor = obj.bgcolor;
        this.images = obj.images;
        this.startpos = -parseInt(this.width, 10);
        this.curpos = this.startpos;
        this.degree = 10;
        this.canvasNum = 0;
        this.imageId = newImageId(this.target);
        this.oldImageId = newImageId(this.target);
        this.image = newImage();
        this.oldImage = newImage(this.image);
        this.image = {};
        this.index = 0;
        this.moveInterval = {};
    	this.init = function () {
    		preload(this.images);
    		addOnLoad(function (slideshow) {
    			return function () {
    				createCanvases(slideshow.target, slideshow.imageId, slideshow.oldImageId, slideshow.width, slideshow.height, slideshow.bgcolor);
    				slideshow.rotateImage();
    			};
    		}(this));
    	};
    	function addOnLoad(newFunction) {
    	    var oldOnLoad = window.onload;
    	    if (typeof oldOnLoad === "function") {
    	        window.onload = function() {
    	            if (oldOnLoad) {
    	                oldOnLoad();
    	            }
    	            newFunction();
    	        }
    	    }
    	    else {
    	        window.onload = newFunction;
    	    }
    	}
        function newImageId(target) {
        	var canvas = target + 'canvas',
        		num = 0,
        		canvasId = canvas + num;
        	while (document.getElementById(canvasId)) {
        		num += 1;
        		canvasId = canvas + num;
        	}
        	return canvasId;
        }
        function newImage(canvas) {
        	var term = 'canvas',
        		num = 0,
        		canvasId = term + num;
        	if (canvas) {
        		num = canvas.id.split(term)[1];
        	}
        	while (document.getElementById(canvasId)) {
        		num += 1;
        		canvasId = canvas + num;
        	}
        	canvas = document.createElement('div');
        	canvas.id = canvasId;
        	return canvas;
        }
    	function preload(images) {
    	var preloaded = [],
    		i;
    		for (i = 0; i < images.length; i += 1) {
    		    preloaded[i] = new Image();
    		    preloaded[i].src = images[i].image;
    		}
    	};
    	function createCanvases(target, canvas1, canvas2, width, height, bgcolor) {
    		var el = document.getElementById(target);
    		el.style.position = 'relative';
    		el.style.width = width + 'px';
    		el.style.height = height + 'px';
    		el.style.overflow = 'hidden';
    		el.appendChild(createCanvas(canvas1, width, height, bgcolor));
    		el.appendChild(createCanvas(canvas2, width, height, bgcolor));
    	}
    	function createCanvas(id, width, height, bgcolor) {
    		var div = document.createElement('div');
    		div.id = id;
    		div.style.position = 'absolute';
    		div.style.width = width + 'px';
    		div.style.height = height + 'px';
    		div.style.backgroundColor = bgcolor;
    		div.left = -width + 'px';
    		return div;
    	}
    	this.rotateImage = function () {
    		this.nextImage();
    	    this.moveInterval = setInterval(function (slideshow) {
    	    	return function () {
    	    		slideshow.movePic();
    	    	}
    	    }(this), 50);
    	    this.switchCanvas();
    	    this.index = (this.index + 1) &#37; this.images.length;
    	};
    	this.nextImage = function () {
    	    this.curpos = -this.width;
    	    this.image = document.getElementById(this.imageId);
    	    this.image.style.left = this.curpos + "px";
    	    this.image.style.zIndex++;
    	    while (this.image.hasChildNodes()) {
    	        this.image.removeChild(this.image.firstChild);
    	    }
    	    this.image.appendChild(this.newImage(this.index));
    	}
    	this.newImageHTML = function (index) {
    	    	var html = '<img src="' + this.images[index].image + '" alt="' + this.images[index].image + '">';
    	    if (this.images[index].url) {
    	    	html = '<a href="' + this.images[index].url + '">' + html + '</a>';
    	    }
    	    return html;
    	};
        this.newImage = function (index) {
            var link = document.createElement('a');
            var el = document.createElement('img');
            el.setAttribute('src', this.images[index].image);
            el.setAttribute('alt', this.images[index].image);
            if (this.images[index].url) {
                link.setAttribute('href', this.images[index].url);
                link.appendChild(el);
                el = link;
            }
            return el;
        };
        this.switchCanvas = function () {
        	var temp = this.oldImageId;
        	this.oldImageId = this.imageId;
        	this.imageId = temp;
        };
    	this.movePic = function () {
    	    if (this.curpos < 0) {
    	        this.curpos = Math.min(this.curpos + this.degree, 0);
    	        this.image.style.left = this.curpos + "px";
    	    }
    	    else {
    			this.waitForNextImage();
    	    }
    	};
    	this.waitForNextImage = function () {
    		clearInterval(this.moveInterval);
    	    setTimeout(function (slideshow) {
    	    	return function () {
    	    		slideshow.rotateImage();
    	    	};
    	    }(this), 3000);
    	};
        this.init();
    }

    Something that I'll be wanting to do with this next, is to move the info for the separate images off to separate image classes, to provide some appropriate separation of duties.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here's the next iteration of the Slideshow function, which is quite a lot smaller not that the bulk of the work has been offloaded.

    Code javascript:
    function Slideshow(obj) {
    	this.target = obj.target;
    	this.pause = obj.pause;
    	this.images = obj.images;
    	this.index = 0;
    	this.sprite1 = null;
    	this.sprite2 = null;
    	this.moveInterval = null;
    	this.waitForNextImage = function () {
    		clearInterval(this.moveInterval);
    	    setTimeout(function (slideshow) {
    	    	return function () {
    	    		slideshow.nextSprite();
    	    	};
    	    }(this), 3000);
    	};
    	this.swapSprite = function () {
        		var temp = this.sprite2;
        		this.sprite2 = this.sprite1;
        		this.sprite1 = temp;
    	};
    	this.nextSprite = function () {
    	    this.swapSprite();
    	    this.sprite1.nextContent(this.images[this.index]);
    	    this.moveInterval = setInterval(function (slideshow) {
    	    	return function () {
    	    		if (!slideshow.sprite1.nextPosition()) {
    				slideshow.waitForNextImage();
    			}
    	    	}
    	    }(this), 50);
    	    this.index = (this.index + 1) &#37; this.images.length;
    	};
    	this.prepareCanvas = function (el, width, height, bgcolor) {
    		el.style.position = 'relative';
    		el.style.width = width + 'px';
    		el.style.height = height + 'px';
    		el.style.overflow = 'hidden';
    	}
    	this.prepareSlideshow = function (el, width, height, bgcolor) {
    		this.prepareCanvas(el, width, height, bgcolor);
    		// sprites created in backwards order, so that sprite 1 appears in the DOM at a higher visiblility than sprites.
    		this.sprite2 = prepareSprite(el, width, height, bgcolor);
    		this.sprite1 = prepareSprite(el, width, height, bgcolor);
    	}
    	this.init = function (width, height, bgcolor) {
    		preload(this.images);
    		addOnLoad(function (slideshow) {
    			return function () {
    				var el = document.getElementById(slideshow.target);
    				slideshow.prepareSlideshow(el, width, height, bgcolor);
    				slideshow.nextSprite();
    			};
    		}(this));
    	};
    	this.init(obj.width, obj.height, obj.bgcolor);
    }
    function preload(images) {
    var preloaded = [],
    	i;
    	for (i = 0; i < images.length; i += 1) {
    	    preloaded[i] = new Image();
    	    preloaded[i].src = images[i].image;
    	}
    }
    function addOnLoad(newFunction) {
        var oldOnLoad = window.onload;
        if (typeof oldOnLoad === "function") {
            window.onload = function() {
                if (oldOnLoad) {
                    oldOnLoad();
                }
                newFunction();
            }
        }
        else {
            window.onload = newFunction;
        }
    }

    Instead of referring to images, which can often be links containing images, they're being referred to now as sprites. This is particularly apt because sprites are supposed to move around the screen, which these ones do as well.

    Here's the sprite function.

    Code javascript:
    function prepareSprite(el, width, height, bgcolor) {
    	var sprite = newSprite(width, height, bgcolor);
    	sprite.width = width;
    	sprite.height = height;
    	sprite.curpos = -sprite.width;
    	sprite.delta = 10;
    	sprite.updateDisplay = function () {
    		sprite.style.left = sprite.curpos + "px";
    	}
    	sprite.resetPosition = function () {
    		sprite.curpos = -sprite.width;
    		sprite.updateDisplay();
    	}
    	sprite.nextPosition = function () {
    		sprite.curpos += Math.min(sprite.delta, -sprite.curpos);
    	        sprite.updateDisplay();
    		return (sprite.curpos < 0);
    	};
    	sprite.pushZindex = function () {
    		sprite.style.zIndex += parseInt(sprite.style.zIndex) + 1;
    	}
    	sprite.newLink = function (href, content) {
    		var link = document.createElement('a');
    		link.setAttribute('href', href);
    		link.appendChild(content);
    		return link;
    	}
    	sprite.newImage = function (src) {
    		var image = document.createElement('img');
    			image.setAttribute('src', src);
    		image.setAttribute('alt', src);
    		return image;
    	}
    	sprite.newContent = function (obj) {
    		var content = sprite.newImage(obj.image);
    		if (obj.url) {
    			content = sprite.newLink(obj.url, content);
    		}
    		sprite.replaceChild(content, sprite.firstChild);
    	}
    	sprite.nextContent = function (obj) {
    	    sprite.resetPosition();
    	    sprite.pushZindex();
    	    sprite.newContent(obj);
    	}
    	sprite.resetPosition();
    	el.appendChild(sprite);
    	return sprite;
    }
    function newSprite(width, height, bgcolor) {
    	var div = document.createElement('div');
    	div.style.position = 'absolute';
    	div.style.width = width + 'px';
    	div.style.height = height + 'px';
    	div.style.backgroundColor = bgcolor;
    	div.style.zIndex = '0';
    	div.left = -width + 'px';
    	div.appendChild(document.createTextNode(''));
    	return div;
    }

    This could be tinkered around with for quite some time to come, but I think that as things are going well here, that I should l should leave it now and let others enjoy what there is.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now to just figure out how to work it. lol

  24. #24
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am still trying to figure all this out, I am very confused at this point. I was following you in the post before the sprite thing, except for the image part. Is there an easier way to explain this, to a dummy...which I am.

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    It came to me when I realised that it's not an image that is being animated across the screen, because it is the container that hold the image that gets animated. This is because it can also be a link that contains an image that's in the container.

    Code javascript:
    <div><img src="..."></div> // one of these
    <div><a href="..."><img src="..."></a></div> // or one of these

    So because it's not the image that's getting animated, references to animating an image in the code are misleading and wrong.

    So, what is it that gets animated across the screen with x and y coordinates as well as other properties? That in the realm of computer graphics is called a sprite.
    http://en.wikipedia.org/wiki/Sprite_(computer_graphics)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •