Creating a simple Photo Gallery using jQuery

In this post we’ll demonstrate how to create a simple photo or image gallery using jQuery and CSS. The gallery is easy 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

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.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 600×350 images, resized, cropped and optimised in Photoshop.

Other images used are:

9 Comments on Creating a simple Photo Gallery using jQuery

  1. I think this is one of the so much significant info for
    me. And i’m satisfied studying your article. However should remark on some normal issues,
    The web site taste is great, the articles is really nice : D.
    Good task, cheers

  2. Howdy are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and
    set up my own. Do you need any coding knowledge to make your
    own blog? Any help would be really appreciated!

    • Hi there! Yep, this a WordPress Blog. You don’t need any coding knowledge to set up your own blog.
      If you want to customize it, the WordPress Support Forum is probably the best resource around to help out with that.

  3. I just couldn’t go away your website before suggesting that I actually enjoyed the standard info an individual supply on your guests?

    Is gonna be again often to check up on new posts

  4. I truly love your site.. Pleasant colors & theme. Did you make this site yourself?
    Please reply back as I’m looking to create my own website and want to know where you got this from or just what the theme
    is named. Many thanks!

1 Trackbacks & Pingbacks

  1. My Homepage

Leave a Reply

Your email address will not be published.


*



*