Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    CSS image gallery question

    Hi,

    I have created an image gallery based on this link:

    http://www.dynamicdrive.com/style/cs...image-gallery/

    Everything is working fine. My issue is that I have so many images in the gallery, that when someone scrolls to the bottom of the gallery page, the large "hover" image is stuck at the top of the screen, away from view. So I'd like to know if there's a way to wrap all the thumbnails in an iframe-like div without affecting the placement of the larger image. I'd link directly to it but I won't be able to upload anything to my site until later.

    For the time being, this is the code I am using:

    Code:
    <html>
        <head>
            <title>Test Page</title>
            <link rel="stylesheet" href="styles.css" type="text/css">
        </head>
        
        <body>
    <div class="gallerycontainer">
        <a class="thumbnail" target="_blank" href="images/001.jpg"><img src="images/001-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/001-preview.jpg" /><br /><div class="cap">Background 001</div></span></a>
        <a class="thumbnail" target="_blank" href="images/002.jpg"><img src="images/002-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/002-preview.jpg" /><br /><div class="cap">Background 002</div></span></a>
        <a class="thumbnail" target="_blank" href="images/003.jpg"><img src="images/003-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/003-preview.jpg" /><br /><div class="cap">Background 003</div></span></a>
        <a class="thumbnail" target="_blank" href="images/004.jpg"><img src="images/004-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/004-preview.jpg" /><br /><div class="cap">Background 004</div></span></a>
        <a class="thumbnail" target="_blank" href="images/005.jpg"><img src="images/005-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/005-preview.jpg" /><br /><div class="cap">Background 005</div></span></a>
        <a class="thumbnail" target="_blank" href="images/006.jpg"><img src="images/006-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/006-preview.jpg" /><br /><div class="cap">Background 006</div></span></a>
        <a class="thumbnail" target="_blank" href="images/007.jpg"><img src="images/007-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/007-preview.jpg" /><br /><div class="cap">Background 007</div></span></a>
        <a class="thumbnail" target="_blank" href="images/008.jpg"><img src="images/008-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/008-preview.jpg" /><br /><div class="cap">Background 008</div></span></a>
    and the CSS:

    Code:
    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    margin-right: 7px;
    margin-bottom: 7px;
    border: 2px solid gray;
    -moz-box-shadow: 3px 3px 4px lightGray;
    -webkit-box-shadow: 3px 3px 4px lightGray;
    box-shadow: 3px 3px 4px lightGray;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    text-decoration:none;
    }
    
    .thumbnail:hover img{
     
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    float: left;
    margin-left: 310px;
    visibility: hidden;
    color: black;
    text-decoration: none;
    font-family: arial, helvetica, sans-serif;
    color: gray;
    font-size: 14px;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    
     
    }
    
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    Hopefully I've explained the issue properly, thanks for any help.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option is to use position: fixed on the container holding the enlargement image.

    In this demo, as you scroll down the screen the thumbnails scroll with the browser but the enlargement container remains "fixed" near the top right hand corner of the window in full view.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 20px auto 0px auto;
                    position: relative;
                }
                #container {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
                #enlargementContainer {
                    position: fixed;
                    top: 0px;
                    right: 20px;
                    display: none;
                }
                #container img {
                    display: block;
                    width: 300px;
                }
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    var oThumbs = document.getElementById('container').getElementsByTagName('img');
                    for(i=0; i < oThumbs.length; i++){
                        oThumbs[i].onmouseover=function(){
                            document.getElementById('imgEnlarge').src = this.src;
                            document.getElementById('enlargementContainer').style.display='block';
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="wrapper">
                <div id="container">
                    <img src="pic1.jpg" alt="" />
                    <img src="pic2.jpg" alt="" />
                    <img src="pic3.jpg" alt="" />
                    <img src="pic4.jpg" alt="" />
                    <img src="pic5.jpg" alt="" />
                </div>
                <div id="enlargementContainer">
                    <img id="imgEnlarge" src="" alt="" />
                </div>
            </div>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    sterlingcooper (04-04-2011)

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks much bullant, this is already working out way better than what I had going, much cleaner and easier.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •