The photo gallery features:
- Large image display, with maximum width of 600px and maximum height of 350px for each image
- Image preview thumbnails
- Animated scroller
- Image counter
- Image description text and date added, unique to each image
- Preloaded images to make full-size images load faster
- Previous/Next navigation buttons
- Previous/Next navigation functionality on large image mouse-hover
- Easily configurable settings
- Tested in Internet Explorer and Firefox
Click here to see a demo of the photo gallery with thumbnails, previous and next arrows, scroller controls and image descriptions.
Photo gallery HTML code
The view the HTML used in the above demo, simply View Source on this page using using web browser and look for the <div class=”gallery-carousel”> wrapper.
Photo gallery CSS
The CSS code used in the above demo is photo-gallery.css.
Photo gallery jQuery code
You need to include the jQuery files core library
I have simply linked to the jQuery core (User Interface) libraries in the Google APIs library.
Alternatively, you can download jQuery core from the official jQuery download page.
The jQuery code used in the above demo is photo-gallery.js.
Photo gallery images
The images shown in the photo gallery are 600×350 images, resized, cropped and optimised in Photoshop.
Other images used are: