Results 1 to 2 of 2

Thread: Help with Image Gallery

  1. #1
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Image Gallery

    Hi

    I found the image-library code below and it is fantastic. I have used it in my website, www.rockandrail.co.uk

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

    But, for some reason I seem to be getting additional padding down the right-hand side on some images.

    Any idea why?

    Thanks
    Chris

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    It seems that this "width: 360px;" is causing the problem
    Code:
    .thumbnail:hover span {
        left: 410px;
        top: 0;
        visibility: visible;
        width: 360px;
        z-index: 50;
    }
    Maybe you could delete it ?



    Edit:
    Playing around with the gallery.css for your page and I think this looks quite all right
    Code:
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    }
    
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: black;
    left: -1000px;
    border: 0;
    visibility: hidden;
    color: white;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border: 0;
    padding:2px 0px 2px 5px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 410px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    a.thumbnail { 
    	text-decoration: none;
    }
    Last edited by azoomer; 03-12-2011 at 02:47 PM.

Bookmarks

Posting Permissions

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