/    Sign up×
Community /Pin to ProfileBookmark

image scroller

Hi expert! Is there any free javscript for the image to scroll automatically and horizontally? Appreciate it!

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@KelonMar 11.2009 — Lot's if you search for it, all of them different, only you know what you precisely want, so rather than a lot of people sending you on wild goose chases, you'll find it less frustrating and more knowledge enhancing if you wade in yourself.... best of luck.
Copy linkTweet thisAlerts:
@NaviauthorMar 12.2009 — Thanks for your reply! I found a script, but I have some questions on it.

  • 1. After click the link, how to run the page in the same window?


  • 2. In the firefox, the script doesn't run well after the first click. After the user click the first link and then goes back, there is no hyperlink on the scroller and sometimes the scroller freezes. Your help will be greatly appreciated! The following is the code:


  • <TITLE>Horizontal Image Scroller 4</TITLE>



    <script type="text/javascript">



    hs4Arr=[



    ["pic1.jpg","page1.asp","Alt Text 1"],

    ["pic2.jpg","page2.asp","Alt Text 1"],

    ["pic3.jpg","pages3.asp","Alt Text 1"],

    ["pic4.jpg","page4.asp",""],

    ["pic5.jpg","page5.asp",""],

    ["pic6.jpg","page6.asp",""],

    ["pic7.jpg","page7.asp",""],

    ["pic8.jpg","page8.asp",""],

    ["pic9.jpg","page9.asp",""],

    ["pic10.jpg","page10.asp",""] // no comma at the end of last index



    ]



    dir=0 // 0 = left 1 = right

    speed=3

    imageSize=100 // % set to zero to use fixedWidth and fixedHeight values

    fixedWidth=100 // set a fixed width

    fixedHeight=60 // set a fixed height

    spacerWidth=20 // space between images



    alwaysCenter=1 // center the popup 0 = no 1 = yes

    popupLeft=0 // popup default left, use if not centering

    popupTop=0 // popup default top, use if not centering



    biggest=0

    ieBorder=0

    totalWidth=0

    hs4Timer=null



    preload=new Array()

    for(var i=0;i<hs4Arr.length;i++){

    preload[i]=new Image()



    preload[i].src=hs4Arr[i][0]



    }







    function initHS4(){



    scroll1=document.getElementById("scroller1")







    for(var j=0;j<hs4Arr.length;j++){







    scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+hs4Arr[j][2]+'" title="'+hs4Arr[j][2]+'" onclick="showBigPic('+j+')">'







    if(imageSize!=0){ // use percentage size



    newWidth=preload[j].width/100*imageSize



    newHeight=preload[j].height/100*imageSize



    }



    else{ // use fixed size



    newWidth=fixedWidth



    newHeight=fixedHeight



    }







    document.getElementById("pic"+j).style.width=newWidth+"px"



    document.getElementById("pic"+j).style.height=newHeight+"px"







    if(document.getElementById("pic"+j).offsetHeight>biggest){



    biggest=document.getElementById("pic"+j).offsetHeight



    }







    document.getElementById("pic"+j).style.marginLeft=spacerWidth+"px"







    totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth







    }







    totalWidth+=1







    for(var k=0;k<hs4Arr.length;k++){ // vertically center images



    document.getElementById("pic"+k).style.marginBottom = (biggest-document.getElementById("pic"+k).offsetHeight)/2+"px"



    }







    scrollBox=document.getElementById("scroll_box")







    if(document.uniqueID && scrollBox.currentStyle && document.compatMode!="CSS1Compat"){



    ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2



    }







    if(document.getElementById&&document.all){



    ieBorder=parseInt(scrollBox.style.borderTopWidth)*2



    }







    scrollBox.style.height=biggest+ieBorder+"px"







    scroll1.style.width=totalWidth+"px"







    scroll2=document.getElementById("scroller2")



    scroll2.innerHTML=scroll1.innerHTML



    scroll2.style.left= scroll1.offsetWidth+"px"



    scroll2.style.top= 0+"px"



    scroll2.style.width=totalWidth+"px"







    if(dir==1){



    speed= -speed



    }







    scrollHS4()



    }











    function scrollHS4(){



    if(paused==1){return}



    clearTimeout(hs4Timer)







    scroll1Pos=parseInt(scroll1.style.left)



    scroll2Pos=parseInt(scroll2.style.left)







    scroll1Pos-=speed



    scroll2Pos-=speed







    scroll1.style.left=scroll1Pos+"px"



    scroll2.style.left=scroll2Pos+"px"







    hs4Timer=setTimeout("scrollHS4()",50)







    if(dir==0){



    if(scroll1Pos< -scroll1.offsetWidth){



    scroll1.style.left=scroll1.offsetWidth+"px"



    }







    if(scroll2Pos< -scroll1.offsetWidth){



    scroll2.style.left=scroll1.offsetWidth+"px"



    }



    }







    if(dir==1){



    if(scroll1Pos>parseInt(scrollBox.style.width)){



    scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"



    }







    if(scroll2Pos>parseInt(scrollBox.style.width)){



    scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"



    }



    }







    }







    st=null



    function pause(){



    clearTimeout(hs4Timer)



    clearTimeout(st)



    }







    function reStartHS4(){



    clearTimeout(st)



    st=setTimeout("scrollHS4()",100)



    }







    paused=0



    picWin=null







    function showBigPic(p){







    if(hs4Arr[p][1]!=""){



    paused=1







    if(picWin&&picWin.open&&!picWin.closed){picWin.close()} // if picWin exists close it







    if(hs4Arr[p][1].indexOf("jpg")!=-1){



    bigImg=new Image()



    bigImg.src=hs4Arr[p][1]







    if(alwaysCenter==1){



    popupLeft = (screen.availWidth - bigImg.width) / 2



    popupTop = (screen.availHeight - bigImg.height) / 2



    }







    data="n<center>n<img src='"+bigImg.src+"'>n</center>n"







    var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"







    picWin=window.open("","win1",winProps)



    picWin.document.write("<HTML>n<HEAD>n<TITLE></TITLE>n")



    picWin.document.write("</HEAD>n")



    picWin.document.write("<BODY style='background-color:black;margin-top:10px;margin-left:10px'>n")



    picWin.document.write("<div id="display">"+data+"</div>")



    picWin.document.write("n</BODY>n</HTML>")



    }



    else{



    picWin=window.open(hs4Arr[p][1])



    }







    }







    }







    window.onfocus=function(){



    paused=0



    scrollHS4()



    }







    onunload=function(){ // close the popup when leaving page



    if(picWin&&picWin.open&&!picWin.closed){



    picWin.close()



    }



    }







    </script>







    <style>







    #scroller1 img, #scroller2 img{



    border:4px solid #7777aa;



    }







    </style>







    </HEAD>



    <BODY onload="initHS4()">



    <h1>Horizontal Image Scroller 4</h1>







    <center>







    <DIV id="scroll_box" style="position:relative;width:600px;overflow:hidden;background-color:#ddddee;border:4px solid #bbbbcc;text-align:left" onmouseover="pause()" onmouseout="reStartHS4()">







    <div id="scroller1" style="position:absolute;left:0px;top:0px"></div>



    <div id="scroller2" style="position:absolute"></div>







    </DIV>







    </center>







    </BODY>



    </HTML>











    </body>







    </html>
    ×

    Success!

    Help @Navi spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...