Web Analytics Made Easy -
StatCounter Image gallery with scrollable thumbnails - CodingForum

Announcement

Collapse
No announcement yet.

Image gallery with scrollable thumbnails

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image gallery with scrollable thumbnails

    I have an image gallery and when you click on a thumbnail a larger picture appears above it. The only way to view more thumbnails is using a mouse.
    It works fine in IE but not in Mozilla. How can i get it to work in mozilla?

    Any help will be appreciated


    Code for scrollable thumbnails using a mouse

    Code:
    <style type="text/css">
    img { border: 1px solid #000 }
    
    #container {
    text-align: center;
    border: 0px solid #000;
    margin: 0 auto;
    height: 300px;
    width: 600px;
    padding: 20px
    }
    
    #leftcol img {
    margin: 10px;
    width: 100px;
    height: 100px
    }
    
    #rightcol img {
    margin: 10px;
    width: 200px;
    height: 200px;
    }
    
    </style>
    
    <style>
    
    #motioncontainer a img{ /*image border color*/
    border: 1px solid #ccc;
    }
    
    #motioncontainer a:hover img{ /*image border hover color*/
    border: 1px solid navy;
    }
    
    #motioncontainer a:hover{
    color: red; /* Dummy definition to overcome IE bug */
    }
    
    #statusdiv{
    position: absolute;
    padding: 2px;
    left: -300px;
    background-color: lightyellow;
    border: 0px solid gray;
    visibility: hidden;
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for source code
    * Last updated Mar 15th, 04'. Added "End of Gallery" message.
    * This copyright notice must stay intact for legal use
    ***********************************************/
    
    var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
    var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    var endofgallerymsg="<span style='font-size: 11px'></span>" //3) message to show at end of gallery. Enter "" to disable message.
    
    function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
    var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
    var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height
    var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
    window.open(path,"", winattributes)
    }
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var iedom=document.all||document.getElementById
    var scrollspeed=0
    var movestate=""
    
    var actualwidth=''
    var cross_scroll, ns_scroll
    var loadedyes=0
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function creatediv(){
    statusdiv=document.createElement("div")
    statusdiv.setAttribute("id","statusdiv")
    document.body.appendChild(statusdiv)
    statusdiv=document.getElementById("statusdiv")
    statusdiv.innerHTML=endofgallerymsg
    }
    
    function positiondiv(){
    menuheight=parseInt(crossmain.offsetHeight)
    mainobjoffsetH=getposOffset(crossmain, "top")
    statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
    statusdiv.style.top=menuheight+mainobjoffsetH+"px"
    }
    
    function showhidediv(what){
    if (endofgallerymsg!="")
    statusdiv.style.visibility=what
    }
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function moveleft(){
    if (loadedyes){
    movestate="left"
    if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    lefttime=setTimeout("moveleft()",10)
    }
    
    function moveright(){
    if (loadedyes){
    movestate="right"
    if (iedom&&parseInt(cross_scroll.style.left)<0){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    righttime=setTimeout("moveright()",10)
    }
    
    function motionengine(e){
    var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
    var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
    var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
    curposy-=mainobjoffset-dsocx
    var leftbound=(menuwidth-restarea)/2
    var rightbound=(menuwidth+restarea)/2
    if (curposy>rightbound){
    scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed
    if (window.righttime) clearTimeout(righttime)
    if (movestate!="left") moveleft()
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
    if (window.lefttime) clearTimeout(lefttime)
    if (movestate!="right") moveright()
    }
    else
    scrollspeed=0
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function stopmotion(e){
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    if (window.lefttime) clearTimeout(lefttime)
    if (window.righttime) clearTimeout(righttime)
    movestate=""
    }
    }
    
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
    menuwidth=parseInt(crossmain.style.width)
    mainobjoffset=getposOffset(crossmain, "left")
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
    actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
    
    crossmain.onmousemove=function(e){
    motionengine(e)
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e)
    showhidediv("hidden")
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv()
    positiondiv()
    }
    }
    window.onload=fillup
    </script>
    <div id="container" style="width: 859px; height: 520px">
    
    <div id="rightcol">
    <img name="ImageOnly" src="CLIP.GIF" width="350" height="350" />
    <p>&nbsp;</div>
    <div id="motioncontainer" style="position:relative;width:500px;height:200px;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;" align="center">
    
    <nobr id="trueContainer"><a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
    <div id="leftcol">
    <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
    <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
    <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
    <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
    <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
    <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
    <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
    <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
    <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
    </nobr>
    
    </div>
    </div>
    <p>&nbsp;</p>
    Last edited by mw2005; Aug 1, 2005, 09:29 AM.
    Get Mozilla Firefox

  • #2
    thats coz does not mind if the id is not set if the name is set...but firefox is more particular about the id being set before you can access the element

    Code:
    <img [COLOR=DarkSlateBlue]id="ImageOnly"[/COLOR] name="ImageOnly" src="CLIP.GIF" width="350" height="350" />
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

    Comment


    • #3
      I don't understand what you mean because it didn't make any difference.
      Last edited by mw2005; Aug 1, 2005, 12:08 PM.
      Get Mozilla Firefox

      Comment

      Working...
      X