Latest Tutorials and Scripts
This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are "pre-loaded".This method can be used either vertically, as shown, or horizontally.
This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page.
With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS).
You have a set of images on the left hand side of your screen and as you hover over them you only get a white border, but as you click each image the page background is dimmed, and the full size image is loaded right onto the screen. To get back to the images simply click the image your viewing and it will be closed. This one is a more advanced gallery and also worth looking at.
When you hover over an image you are shown the description for the image, and when you click an image you are redirected to the full size image with the description on top. It's not too complicated so this would be another good one for beginners to look at and mess around with because there's not a lot of extra code to get confused about.
This post explains how to dynamically add captions to all pictures with a specific class applied. Text for the captions is taken from each pictures' title attribute. It also covers absolute positioning of an element relative to its container (rather than the page as a whole) and CSS opacity support in mainstream browsers. This is used to allow pictures to partially show through the background of their captions.
Ramin B. has put together yet another image gallery. This time it is using jQuery as the library, and has a bunch of rich effects such as transitions, reflections, and the use of thumbnails.
A great script that generates a lightbox slideshow effect for your images with further options allowing you to email the image to your friends.