Creating a basic Photo Gallery using jQuery

This tip demonstrates how to create a photo or image gallery using jQuery and CSS. The gallery is simple to create, does not need any downloaded plugins and is very lightweight. The CSS for the photo gallery is 4KB and the JavaScript code is 5KB in size.

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
  • Simple CSS and JavaScript to make customisation easy
  • Tested in Internet Explorer and Firefox

The demo below shows a photo gallery with thumbnails, previous and next buttons, 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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

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 600x350 images, resized, cropped and optimised in Photoshop.

Other images used are:

Comments

blog comments powered by Disqus

Send us your feedback

If you want to send any feedback, corrections, contact request or just voice your opinion, please drop us a line using our feeback form.

Send feedback

Do you have a similar website?

If you have a similar website and want to become a website partner or simply to share links, feel free to drop us a line.

Send request