50 jQuery Photo Gallery Plugins

13年前
1. How to Create a Simple Slideshow using Mootools / JQuery

When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.
1

View Live Demo

2. jbgallery 2.0

jbgallery is a UI widget webpage written in javascript on top of the jQuery library.
Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a site’s background, in a “dialog” mode or as a common pop-up.1

View Live Demo

3. Minimalistic Slideshow Gallery with jQuery

In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.
1

View Live Demo

4. Galleria

Galleria is an image gallery framework, written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices.
1

View Live Demo

5. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
1

View Live Demo

6. 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. 1

View Live Demo

7. Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.1

View Live Demo

8. Nivo Slider

1

View Live Demo

9. Advanced jQuery background image slideshow

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that’s on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).1

View Live Demo

10. The Lof Jsidernews Plugin

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.1

View Live Demo

11. A Zoomable jQuery Image Gallery Called jPhotoGrid

This plugin takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed.
1

View Live Demo

12. jQuery Blinds

1

View Live Demo

13. jQuery Carousel

.1

View Live Demo

14. 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.1

View Live Demo

15. Pikachoos

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, and if you need help, I can install PikaChoose on your website for you. 1

View Live Demo

16. Image Flow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery. For more information about ImageFlow read the features list, take a look at the documentation and check the blog. For anything else simply drop a line in the shoutbox. 1

View Live Demo

17. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self.1

View Live Demo

18. Multiple Image Cross Fade

Today we learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen. 1

View Live Demo

19. EOGallery

EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.1

View Live Demo

20. Pirobox

1

View Live Demo

21. Gradually

Gradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.1

View Live Demo

22. COIN SLIDER

1

View Live Demo

23. AnythingSlider jQuery Plugin

This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.
1

View Live Demo

24. Slider Gallery

1

View Live Demo

25. Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling. Unobtrusive and smooth is the key here.
1

View Live Demo

26. Supersized

1

View Live Demo

27. Create Beautiful jQuery slider tutorial

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

View Live Demo

28. VFancy Thumbnail Hover Effect w/ jQuery

Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.
1

View Live Demo

29. 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.
1

View Live Demo

30. jQuery Cycle Plugin

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

View Live Demo

31. AD Gallery – a jQuery gallery plugin

I got inspired by myself when I wrote the Editable Select plugin, so I decided to write another one. It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox.
1

View Live Demo

32. FancyBox

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

View Live Demo

33. Simple Controls Gallery

Want to display images as an automatic slideshow that can also be explicitly played or paused by the user? Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.
1

View Live Demo

34. Sliding Image Gallery jQuery Plug-in

The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. 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.
1

View Live Demo

35. slideViewerPro

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.
1

View Live Demo

36. Spacegallery

1

View Live Demo

37. jQuery Panel Gallery Plugin

1

View Live Demo

38. Using the Wonderful jFlow Plugin

It seems that the obsession of the web design industry right now is the ability to create a “featured section”. While it once may have required a great deal of skill, that is no longer the case. In this screencast, I’ll show you how to easily create a scrollable featured section using one of Theme Forest’s popular themes as a reference. Let’s get into it!
1

View Live Demo

39. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

When speaking about design, there is one company that is impossible to go without. Apple values design – being a new product, a fancy catalog or their website – there is always something to admire.
1

View Live Demo

40. 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.
1

View Live Demo

41. Moving Boxes

Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!
1

View Live Demo

42. Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
1

View Live Demo

43. jQuery Infinite Carousel

With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.
1

View Live Demo

44. Create a unique Gallery by using z-index and jQuery

In this tutorial we will combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures
1

View Live Demo

45. Making a Content Slider with jQuery UI

In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.
1

View Live Demo

46. BBC Radio 1 Zoom Tabs

Gareth Edward asked how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
1

View Live Demo

47. Building a jQuery Image Scroller

In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
1

View Live Demo

48. Creating a polaroid photo viewer with CSS3 and jQuery

Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
1

View Live Demo

49. A jQuery Portfolio Plugin that’s Interactive and Filterable

1

View Live Demo

50. Build a Content Slider with jQuery

There are a ton of tutorials already out there about creating content sliders with jQuery.
So why bother writing another one? While I don’t think that the existing tutorials are
incorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs.
1

View Live Demo