19 Beautiful jQuery Image Gallery/Slideshow Tutorials and Plugins


We all know how the jQuery slideshow and image galleries are becoming popular with the masses. This is because jQuery apps and digital image and slideshow galleries are really cool and efficient. They are spectacular and stunning. Moreover, these galleries are good for storing unlimited number of images and slideshow frames for the future. However, there are almost countless galleries and storage applications. It would be difficult to actually choose a single jQuery image gallery or slideshow application among this ambitious variety. However, we can definitely look at some of the good ideas for galleries and plugins.

Few days ago, we posted on WDB 19 useful jQuery Slider plugins and tutorials, and today we’ll post 19 best and beautiful jQuery Image Gallery/Slideshow Tutorials and Plugins. These are best for your range of purposes and activities. You can arrange and display your images and videos in an attractive and creative manner. One of the good jQuery applications is the Sliding Panel Photo Gallery. In this digital gallery, you can arrange your favorite photos in a sliding panel format. There are also other digital photo and slideshow galleries. One another recommendation would be to choose Create LightBox gallery. Here, you can make your ordinary images look really unique and spectacular. There are also other ideal options for you.

TN3 Gallery

TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.

Live DemoDownload




  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles backgrounds via slideshow with transitions and preloading
  • Core version is available for those that just want background resizing.
  • Navigation controls with keyboard support
  • Integration with Flickr – pull photos by user, set, or group
  • Head over to the project page for all the details.

Live DemoDownload

Mosaic Sliding Box and Captions jQuery Plugin


So, what exactly does Mosaic do?

  • Automatically generates sliding boxes & captions
  • Allows slide & fade animations with custom directions
  • Preloads images within boxes

Live DemoDownload

Sliding Image Gallery jQuery Plug-in

The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).

Live DemoDownload

Full Page Image Gallery with jQuery

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

Live DemoDownload


slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

Live DemoDownload

Galleriffic jQuery Plugin

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

Live DemoDownload

Slider Gallery with jQuery

This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen. The thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens. Navigating though the images will make them slide in and out from the sides, moving the underlying thumbnails container. When the preview is closed, the full image will fade back to the thumbnail.

Live DemoDownload


jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects, including Wave, Zipper, Curtain, Fountain Top, Random Top, and so on. The plugin is fully tested and is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Live DemoDownload

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

Live DemoDownload

Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

Live DemoDownload

Sliding Panel Photo Wall Gallery with jQuery

This tutorial will help you create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

Live DemoDownload

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

Live DemoDownload

Fresh Sliding Thumbnails Gallery with jQuery and PHP

In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.

Live DemoDownload

Create image gallery in 4 lines of jQuery

This is really a great image gallery jquery tutorial, it has large image and few thumbnails . The large image have bar with description. When user click on thumb large image and description will change.

Live DemoDownload

jqGalViewII (Photo Gallery)

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

Live DemoDownload

Animate Panning Slideshow with jQuery

Making a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

Live DemoDownload


Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.

Live DemoDownload

Interactive Photo Desk with jQuery and CSS3

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

Live DemoDownload

Multimedia Gallery for Images, Video and Audio

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images.

Live DemoDownload


Blogger from UK. A person that really likes technology, design, photography and web design. He is the New Owner of Web Design Burn & Founder of Lava360. Following WDB on Twitter.

Interesting News From

  • http://www.incirclemedia.com Incircle Media

    Excellent collection.

  • Pingback: Weekly Link Post 198 « Rhonda Tipton's WebLog

  • Raju

    Good Job

  • http://www.lovelyseen.com jozaf

    this is a best collection of galleries but my desire that a software should be developed which handle all properties of visitor desire

  • http://www.nirmal.com.np Nirmal Gyanwali

    very nice collection!

  • http://www.uktonercartridges.co.uk/ ink cartridges for printers

    ultimate image gallery work is so much good,i become a big fan of you

  • Hamdy Ahmed

    Beautiful Sliders And Viewers

  • http://www.codum.pl/blog/ Informacje

    For me the best slideshow is jqFancyTransitions.

  • http://twitter.com/sevenboy7 trần công nghiệp


  • GageMedina

    There are certainly a lot of details like that to take into
    consideration. That?s a great point to bring up. I offer the thoughts
    above as general inspiration but clearly there are questions like the
    one you bring up where the most important thing will be