www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scrolling Picture Gallery - Safari

Threaded View

  1. #1
    Join Date
    Dec 2011
    Location
    Greece
    Posts
    12

    Question Scrolling Picture Gallery - Safari

    Hi everyone,

    I'm very new to JavaScript, so apologies if this is a stupid question.

    I'm trying to make a scrolling picture gallery using the script on - http://www.huntingground.freeserve.c...mgscroll3h.htm

    It works fine in Firefox, Chrome and Explorer, but in Safari the pictures have huge gaps between them in some places but are all squashed up in others.
    However it works in Safari when it's not online.

    http://annanicola.eu/

    Does anyone know how I can fix this for Safari?

    Thanks in advance...

    This is the header 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>


    And this is the body code:

    <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>
    Last edited by ac11; 04-30-2012 at 06:55 AM.

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