37 Fresh jQuery Image And Gallery Display Solutions

Posted in Coding, Freebies, JS & AJAX5 years ago • Written by 17 Comments

jQuery is already very popular because it is very fast and concise Javacript library simplifing and different event handling, smooth animation with very little code. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively!

Here you’ll have more than 35 different unique jQuery Javascript solutions for beautiful image galleries and great ways to display your images with light code.

To make it even easier for you to choose, I also added live demo link under every jQuery plugin!

This article has been updated on May 17,2012 and we just have put together fresh 2012 list of image sliders and galleries. Check it out!

Before you start out, I thought it would be good idea to get a little bit of inspiration of high quality and creative solutions how you can implement galleries and jquery image effects in your own website!


Build Flat Responsive Website from Scratch – Complete Course


Zstudio

Zstudio has an unusual, yet awesome, solution. They’re using a slider in their Recent Work to show various screenshot in each project. When images slide they attract your attention, yet they dont take too much space! Check their site for inspiration!

Preview

Of course, there are many various solutions in the list as well. Implementing large backgrounds, zooming images, optimizing them for retina displays, responsive/mobile friendly, using videos in your galleries – you’ll find it all below.

Slider Revolution

Slider Revolution

Slider Revolution is a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimisation (all content always readable for search engines). See the heaps of custom
transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

It’s a premium plugin, but I will tell you that you worth the penny you spend.

Few other important benefits to Slider Revolution:

  • Image and Thumbs fully resizable
  • Using CSS Animation with FallBack to jQuery
  • Unlimited Caption Layers
  • Captions like Video, Image and html tags can be easily Created
  • Unlimited Slides
  • iPhone & Android Swipe Touch enabled
  • jQuery Conflict free plugin
  • Customizable 100% via Plugin Backend
  • Easy installation in your Website

Worried about coding skills? Slider Revolution had a Video Support which is easy to follow no advance coding skills required, easy as cooking bacon. Ah..but what am I saying just check for yourself – Kenburner Responsive Jquery Slider has pretty good feature rundown and live examples.

1. GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

gallery-view-jquery-image-slideshow-tools-free

View Demo

2. Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

View Demo

3. 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).

sliding-gallery-jquery-image-slideshow-tools-free

View Demo

4. PrettyPhoto jQuery Lightbox Clone

PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

prettyphoto-gallery-jquery-image-slideshow-tools-free

View Demo

5. Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

beautiful-gallery-jquery-image-slideshow-tools-free

View Demo

6. AD Gallery – a jQuery gallery plugin

A highly customizable gallery/showcase plugin for jQuery.

ad-gallery-jquery-image-slideshow-tools-free

View Demo

7. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

fancybox-gallery-jquery-image-slideshow-tools-free

View Demo

8. Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

shadowbox-gallery-jquery-image-slideshow-tools-free

View Demo

8.1.AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.
It comes with an image preloader so the slider starts when images are ready to be shown. No clumsy animations with half loaded images.

View Demo

9. Galleriffic

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.

galleriffic-gallery-jquery-image-slideshow-tools-free

View Demo

10. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3.

colorbox-gallery-jquery-image-slideshow-tools-free

View Demo

11. The Lightbox Clones Matrix

Comparison of various scripts that display images and other objects in somehow cool CSS popups

lightbox-clones-jquery-image-slideshow-tools-free

12. Full screen image gallery using jQuery and Flickr

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.

fs-gallery-jquery-image-slideshow-tools-free

View Demo

13. Moving Boxes

moving-boxes-gallery-jquery-image-slideshow-tools-free

View Demo

13.1. DDSlider – 10 Transitions – Inline Content Support

DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page.

View Demo

14. Creating a Slick Auto-Playing Featured Content Slider

featured-slider-jquery-image-slideshow-tools-free

View Demo

15. Start/Stop Slider

start-stop-gallery-jquery-image-slideshow-tools-free

View Demo

16. SlideViewerPro 1.0

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.

slide-viewer-jquery-image-slideshow-free-tools

View Demo

17. Pirobox V.1.2.1

pirobox-gallery-jquery-image-slideshow-tools-free

View Demo

18. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

s3slider-gallery-jquery-image-slideshow-tools-free

View Demo

18.1. Advanced Slider – jQuery XML slider

Advanced Slider is a jQuery plugin that allows you to easily create powerfull sliders using either XML , thus making the slider much easier to setup and maintain, or using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the slider and make it possible to integrate it into your own application. Please take a look at the list of features below.

View Demo

19. CSS and Jquery – Creating an Image Slider

slider-gallery-jquery-image-slideshow-tools-free

View Demo
[showmyads]

20. Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

rotator-gallery-jquery-image-slideshow-tools-free

View Demo

21. jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

panorama-gallery-jquery-image-slideshow-tools-free

View Demo

22. Zoomimage – jQuery plugin

Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

zoom-gallery-jquery-image-slideshow-tools-free

View Demo

23. Building a jQuery Image Scroller

scroller-jquery-image-slideshow-tools-free

View Demo

24. Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content

cssglobe-gallery-jquery-image-slideshow-tools-free

View Demo

25. jQuery Panel Gallery Plugin

  • No slicing or editing of the images is needed
  • It’s just 5K
  • Easily configurable
  • Reusable on multiple containers

panel-jquery-image-slideshow-free-tools

View Demo

25.1. uBillboard – Premium Slider for WordPress

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.

View Demo

26. Supersized – Full Screen Background/Slideshow jQuery Plugin

supersized-gallery-jquery-image-slideshow-tools-free

View Demo

27. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

pikachoose-jquery-image-slideshow-free-tools

View Demo

28. jQuery Image Overlay Plugin

The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.

overlay-jquery-image-slideshow-tools-free

View Demo

29. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

  • Highly configurable
  • Customizable with CSS styling
  • Handles scaled images
  • Keyboard support for moving and resizing the selection
  • Supports callback functions
  • Provides API functions for easier integration with other application components
  • Lightweight — the packed version is less than 8KB

imgarea-select-gallery-jquery-image-slideshow-tools-free

View Demo

30. PFeloader

This is a preloader, it scans DOM and loaded StyleSheet’s for occurence of images (in sheet, style, as element).

StyleSheet file has to be in the same domain as page using it.

loading-gallery-jquery-image-slideshow-tools-free

View Demo

30.1. jQuery Horizontal Image Scroller w/ Lightbox

This is a jQuery image scroller with lightbox. The scroll bar/indexes and directional buttons allow for easy navigation of your image gallery. Image click can either open the included lightbox or a regular link. The scroller is also re-sizable and fully configurable through the plugin’s parameters.

View Demo

31. Image Reveal using jQuery

enlargement-gallery-jquery-image-slideshow-tools-free

View Demo

32. The jQuery Cycle Plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

cycle-gallery-jquery-image-slideshow-tools-free

View Demo

33. Galleria Plugin

This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

galleria-jquery-image-slideshow-tools-free

View Demo

34. CrossSlide jQuery plugin

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)

crosslide-jquery-image-slideshow-tools-free

View Demo

35. Fancy Thumbnail Hover Effect w/ jQuery

fancy-gallery-jquery-image-slideshow-tools-free

View Demo

36. Apple-like Slideshow Gallery

apple-gallery-jquery-image-slideshow-tools-free

View Demo

36.1. li JQuery Slider/Image Rotator

li jQuery Image Slider / Banner Image Rotator is carefully crafted slider/image rotator, full of features, very easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, li jQuery Image slider will do the job with ease!

This robust and yet elegant guy, has everything you need to build your next “to-impress” image slider.

View Demo

37. JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

jqzoom-gallery-jquery-image-slideshow-tools-free

View Demo

38. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

flow-gallery-jquery-image-slideshow-tools-free

View Demo

This article has been updated on May 17,2012 and we just have put together fresh 2012 list of image sliders and galleries. Check it out!  If you are searching for even more alternatives with Flash, plain CSS or another Javascript library, check out this post.

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

17 Comments Best Comments First
  • Dave

    Saturday, March 24th, 2012 06:29

    17

    hi guys,
    how do I disable the slide show when the screen size is less than 480 or on mobile device.
    Help is much appreciated.

    +14
  • Rico Figliolini

    Thursday, March 1st, 2012 15:42

    15

    I like these jquery galleries, but can anyone point me in the right direction for a mashable like gallery with a slide box? It seems to be a lightbox based gallery. I really like the slide box on the right that can contain caption text and a google adense ad.

    +8
  • Alex Flueras

    Friday, January 8th, 2010 09:44

    4

    Nice round-up. I am using PrettyPhoto a lot. Thanks for sharing.

    +6
  • Ivan Mišić

    Wednesday, January 6th, 2010 13:15

    2

    Nice collection in one place. I think I can use some of them.

    +6
  • Kurzweg

    Monday, June 6th, 2011 08:47

    7

    amazing gallerys!!!!! What I’m wondering, are there maybe also a jQuery solution to design a gallery in a book style (with animation), like I always found in Flash…

    +3
  • B.K.

    Monday, March 19th, 2012 18:01

    16

    Very nice post. I’m also wondering if does anybody have fullscreen background slideshow plugin with control keys, html descriptions and screen resolution stretching features?

    thanks!

    -1
  • Matt

    Saturday, January 21st, 2012 14:34

    12

    Any ideas on how I can achieve a silder similar to this one, where it auto slides but also lets previous ones be clicks on back from the left?
    Matt

    -2
  • Manny

    Wednesday, February 29th, 2012 07:42

    14

    Awesome thanks for sharing.

    -3
  • jamsheer

    Thursday, December 29th, 2011 12:30

    11

    How can we integrate this in asp.net page ?

    -5
  • Cory

    Wednesday, January 6th, 2010 02:50

    1

    I’ve been using the nyroModal jquery plugin for my lightwindow solution…it has proven to be the most flexible of the ones I’ve tried out. Great list though. Thanks.

    -5
  • Jai

    Thursday, February 2nd, 2012 16:08

    13

    Which of these plugins do have options like next or previous image and helps us in increasing pageviews..?

    -5
  • Kenny

    Saturday, December 10th, 2011 11:31

    10

    I’m so glad to find this article! Thanks for great list of jQuery galleries.

    -5
  • Manish Kumar

    Wednesday, August 3rd, 2011 07:33

    8

    Many Many thanks for sharing ….

    -7
  • Razibul Hassan

    Friday, August 5th, 2011 00:00

    9

    Some of the very best jQuery image slide collection ever.. Thanks for the awesome collection.

    -9
  • Srinivas

    Tuesday, May 24th, 2011 12:25

    6

    Hi,

    I strucked with looped jquery slide show. I was able to do pause on mouse over, but I couldnt get how to make a slide show with numbering.
    Can anyone help me to come out from that.
    Kindly please do reply.

    Regards,
    Srinivas Nudurupati

    -9
  • ion

    Wednesday, January 26th, 2011 07:47

    5

    Is using a longdesc=”#URL” property inside an valid?

    -11
  • Carik

    Thursday, January 7th, 2010 19:40

    3

    Thank you. This is probably the most high-quality and comprehensive set of galleries on jQuery.

    -14
  • Dave

    Saturday, March 24th, 2012 06:29

    17

    hi guys,
    how do I disable the slide show when the screen size is less than 480 or on mobile device.
    Help is much appreciated.

    +14
  • B.K.

    Monday, March 19th, 2012 18:01

    16

    Very nice post. I’m also wondering if does anybody have fullscreen background slideshow plugin with control keys, html descriptions and screen resolution stretching features?

    thanks!

    -1
  • Rico Figliolini

    Thursday, March 1st, 2012 15:42

    15

    I like these jquery galleries, but can anyone point me in the right direction for a mashable like gallery with a slide box? It seems to be a lightbox based gallery. I really like the slide box on the right that can contain caption text and a google adense ad.

    +8
  • Manny

    Wednesday, February 29th, 2012 07:42

    14

    Awesome thanks for sharing.

    -3
  • Jai

    Thursday, February 2nd, 2012 16:08

    13

    Which of these plugins do have options like next or previous image and helps us in increasing pageviews..?

    -5
  • Matt

    Saturday, January 21st, 2012 14:34

    12

    Any ideas on how I can achieve a silder similar to this one, where it auto slides but also lets previous ones be clicks on back from the left?
    Matt

    -2
  • jamsheer

    Thursday, December 29th, 2011 12:30

    11

    How can we integrate this in asp.net page ?

    -5
  • Kenny

    Saturday, December 10th, 2011 11:31

    10

    I’m so glad to find this article! Thanks for great list of jQuery galleries.

    -5
  • Razibul Hassan

    Friday, August 5th, 2011 00:00

    9

    Some of the very best jQuery image slide collection ever.. Thanks for the awesome collection.

    -9
  • Manish Kumar

    Wednesday, August 3rd, 2011 07:33

    8

    Many Many thanks for sharing ….

    -7
  • Kurzweg

    Monday, June 6th, 2011 08:47

    7

    amazing gallerys!!!!! What I’m wondering, are there maybe also a jQuery solution to design a gallery in a book style (with animation), like I always found in Flash…

    +3
  • Srinivas

    Tuesday, May 24th, 2011 12:25

    6

    Hi,

    I strucked with looped jquery slide show. I was able to do pause on mouse over, but I couldnt get how to make a slide show with numbering.
    Can anyone help me to come out from that.
    Kindly please do reply.

    Regards,
    Srinivas Nudurupati

    -9
  • ion

    Wednesday, January 26th, 2011 07:47

    5

    Is using a longdesc=”#URL” property inside an valid?

    -11
  • Alex Flueras

    Friday, January 8th, 2010 09:44

    4

    Nice round-up. I am using PrettyPhoto a lot. Thanks for sharing.

    +6
  • Carik

    Thursday, January 7th, 2010 19:40

    3

    Thank you. This is probably the most high-quality and comprehensive set of galleries on jQuery.

    -14
  • Ivan Mišić

    Wednesday, January 6th, 2010 13:15

    2

    Nice collection in one place. I think I can use some of them.

    +6
  • Cory

    Wednesday, January 6th, 2010 02:50

    1

    I’ve been using the nyroModal jquery plugin for my lightwindow solution…it has proven to be the most flexible of the ones I’ve tried out. Great list though. Thanks.

    -5

Comments are closed.

54.242.18.232 - unknown - unknown - US