photo gallery

[alexdog1805]

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:


.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;
}

[Beverleyh]

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.

[alexdog1805]

http://otisweb.ro/tcimachinetools/photo.html

[Beverleyh]

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/dynamicindex4/php-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.