Image Scroller

Discussion in 'Web Design and Development' started by Anna2, May 1, 2012.

  1. Anna2 macrumors newbie

    Joined:
    May 1, 2012
    Location:
    Greece
    #1
    Hello,

    I've got a problem with the image scroller on my website.

    It worked fine from my Mac and PC in Safari, Explorer, Chrome and Firefox, but when it went online it didn't work properly in Safari.

    Only Safari had the problem. In all the other browsers it was fine. In Safari though, the images were all squashed up and there were large gaps between them.

    The example on the site where I got the script works fine in Safari though - http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../imagery/imgscroll3h.htm

    Does anyone know if there is anything I should change in the script to make it work in Safari too. I changed the image size and spacing a lot from the example, so maybe that has messed it up.

    Thanks in advance..

    Here's a link to my site, where the problem is. http://annanicola.eu/


    Code:
    <script type="text/javascript">
    data=[
    ["images/beach31wm","Alt / Title text for image 6","greece","Alt / Title text for image 7","beeflows42wm"],
    ["images/ifestos58wm","Alt / Title text for image 8","greece"],
    ["images/ladybugvetch20wm","Alt / Title text for image 9","wildlife"],
    ["images/limanaki13wm","Alt / Title text for image 10","marina"],
    ["images/prow37wm","Alt / Title text for image 10","marina"],
    ["images/wetland21wm","Alt / Title text for image 10","greece"],
    ["images/speed119wm","Alt / Title text for image 10","marina"],
    ["images/redadmiral86wm","Alt / Title text for image 12","wildlife"] // no comma at end of last index
    ]
    
    imgPlaces=3 // number of images visible
    imgWidth=320 // width of the images
    imgHeight=180 // height of the images
    imgSpacer=20 // space between the images
    
    dir=0 // 0 = left, 1 = right
    
    newWindow=0 // 0 = Open a new window for links 0 = no  1 = yes
    
    
    
    moz=document.getElementById&&!document.all
    
    step=1
    timer=""
    speed=50
    nextPic=0
    initPos=new Array()
    nowDivPos=new Array()
    
    function initHIS3(){
    
    for(var i=0;i<imgPlaces+1;i++){ // create image holders
    newImg=document.createElement("IMG")
    newImg.setAttribute("id","pic_"+i)
    newImg.setAttribute("src","")
    newImg.style.position="absolute"
    newImg.style.width=imgWidth+"px"
    newImg.style.height=imgHeight+"px"
    newImg.style.border=0
    newImg.alt=""
    newImg.i=i
    newImg.onclick=function(){his3Win(data[this.i][2])}
    document.getElementById("display_area").appendChild(newImg)
    }
    
    containerEL=document.getElementById("his3container")
    displayArea=document.getElementById("display_area")
    pic0=document.getElementById("pic_0")
    
    containerBorder=(document.compatMode=="CSS1Compat"?0arseInt(containerEL.style.borderWidth)*2)
    containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
    containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
    containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"
    
    displayArea.style.width=containerWidth+"px"
    displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
    displayArea.onmouseover=function(){stopHIS3()}
    displayArea.onmouseout=function(){scrollHIS3()}
    
    imgPos= -pic0.width
    
    for(var i=0;i<imgPlaces+1;i++){
    currentImage=document.getElementById("pic_"+i)
    
    if(dir==0){imgPos+=pic0.width+imgSpacer} // if left
    
    initPos[i]=imgPos
    if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left
    
    if(dir==1){ // if right
    document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
    imgPos+=pic0.width+imgSpacer
    }
    
    if(nextPic==data.length){nextPic=0}
    
    currentImage.src=data[nextPic][0]
    currentImage.alt=data[nextPic][1]
    currentImage.i=nextPic
    currentImage.onclick=function(){his3Win(data[this.i][2])}
    nextPic++
    }
    
    scrollHIS3()
    }
    
    timer=""
    function scrollHIS3(){
    clearTimeout(timer)
    for(var i=0;i<imgPlaces+1;i++){
    currentImage=document.getElementById("pic_"+i)
    
    nowDivPos[i]=parseInt(currentImage.style.left)
    
    if(dir==0){nowDivPos[i]-=step}
    if(dir==1){nowDivPos[i]+=step}
    
    if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){
    
    if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
    if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}
    
    if(nextPic>data.length-1){nextPic=0}
    
    currentImage.src=data[nextPic][0]
    currentImage.alt=data[nextPic][1]
    currentImage.i=nextPic
    currentImage.onclick=function(){his3Win(data[this.i][2])}
    
    nextPic++
    
    }
    else{
    currentImage.style.left=nowDivPos[i]+"px"
    }
    
    }
    timer=setTimeout("scrollHIS3()",speed)
    
    }
    
    function stopHIS3(){
    clearTimeout(timer)
    }
    
    function his3Win(loc){
    if(loc==""){return}
    if(newWindow==0){
    location=loc
    }
    else{
    //window.open(loc)
    newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
    newin.focus()
    }
    }
    
    // add onload="initHIS3()" to the opening BODY tag
    
    // -->
    </script>
    
    
    <body onload="initHIS3()">
    <DIV id="his3container" style="position:relative;  width:0px;height:0px; border:20px solid  black;overflow:hidden;background-color:black;">
    
    <div id="display_area" style="position:absolute; left:0; top:0; width:0px; height:0px; clip:rect(0,0,0,0)"></div>
    
    </DIV>
    </body>
     
  2. Dunmail, May 2, 2012
    Last edited: May 2, 2012

    Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    I've not run the code but I noticed this line:

    Code:
    containerBorder=(document.compatMode=="CSS1Compat"?0arseInt(containerEL.style.borderWidth)*2)
    OarseInt should be parseInt and I'd pass it a radix as a second parameter so

    Code:
    containerBorder=(document.compatMode=="CSS1Compat"?parseInt(containerEL.style.borderWidth, 10)*2)
    In addition you are using the ternary operator on this line but there's bits missing, it should be something like:

    Code:
    val= (test) ? true: false;
    If you are prepared to get depressed then run the code through jslint, though you really need to understand what it's telling you. I just tried it and it got to line 15 before there were too many errors for it to continue!
     

Share This Page