Results 1 to 4 of 4

Thread: photo gallery

  1. #1
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default photo gallery

    I want to create a photo gallery that shows the big image when click on small image, not when I'm with the mouse hover de image. how can I do that?

    this is the code:

    Code:
    .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: lightyellow;
    padding: 5px;
    left: -100px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: -100px;
    left: 100px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    You only posted the CSS - we need to see the script and HTML to know what were working with so please post a link to your website.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Looking at what you've got so far leads me to suggest a pre-written script from the DD library.

    If youre server supports php, why not use this script here: http://www.dynamicdrive.com/dynamici...photoalbum.htm

    You can mimic your current image gallery setup but improve it somewhat by limiting the number of thumbnails displayed on the (initial) page. The script auto-paginates so maybe you can set a gallery thumbnail grid of 6x3 or 6x4, which would look much neater and reduce the length of the page (visitors hate to scroll) and page loading times.
    Another benefit is that once the gallery is set up, you can dump all your pics in a folder (and keep on dumping thereafter) without ever needing to fiddle with the HTML of your page every again.

    Its a much simpler way than you're currently working so I think you'll like it once you've got it installed on your site.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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
  •