• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

The Top: 12 Best jQuery Image Galleries

May 6, 2010 By Hyde

There are countless of jQuery image galleries out there, here we gathered the best ones for you.

Full screen image gallery using jQuery and Flickr

A gallery based on the Flickr API, using full browser.

jQuery Gallery

Features

  • Flickr search using jQuery and JSON
  • Full screen with kept ratio using CSS only
  • A png raster to even out up-scaled jpegs
  • Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
  • A preloader loads the large images one by one for super-fast viewing
  • Fetches the biggest image from flickr using their API
  • Caption that can be turned on or off
  • Navigate by clicking on either half of the image, or use the thumbnails.

View Demo

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.

jQuery Gallery

View Demo

Galleria

Galleria is a Javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

jQuery Gallery

Features

  • Unobtrusive javascript
  • Degrades gracefully if the browser doesn’t support javascript or CSS
  • Lightweight (4k packed)
  • Displays the thumbnail when the actual image is loaded
  • CSS powered – create your own gallery style
  • Super fast image browsing since the images are preloaded one at a time in the background
  • Can scale thumbnails and crop to fit in thumbnail container
  • Can be used with custom thumbnails
  • Stylable caption from image or anchor title
  • jQuery plugin – takes one line to implement
  • Browserproof
  • Can adjust the history object and enable the back button in your browser
  • Can fire events so you can customize the images behaviour onLoad

View Demo

Supersized: A Full Screen Background/Slideshow jQuery Plugin


Features

  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles Images/backgrounds via slideshow with transitions and preloading
  • Navigation controls allow for pause/play and forward/back

jQuery Gallery

View Demo

A ‘Pro’ jQuery Image Slider Built On A Single Unordered List

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.

jQuery Gallery

View Demo

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.

jQuery Gallery

View Demo

AD Gallery – a jQuery gallery plugin

jQuery Gallery

Features

  • Choose effect, should the image slide in, or fade in?
  • Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
  • jQuery call returns gallery instances, which enables you to change settings on the fly like the “Change to fade effect” link above
  • Keyboard arrows to move back and forth
  • Click on the edge of the big image to go to the next/previous
  • Images are preloaded, and if the aren’t finished loading when they are supposed to be displayed, a loading image will appear
  • Slideshow count down only begins when the image has loaded and is visible
  • Image title, can either be set in the title attribute, or in elm.data(‘ad-title’, ‘My title here’). $.data takes precedence over the title attribute
  • Image descriptions, can either be set in the longdesc attribute, or in elm.data(‘ad-desc’, ‘My description here’). $.data takes precedence over the longdesc attribute
  • Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
  • Takes the dimensions of the image container div and scales down images that are larger than it
  • Image is positioned in the middle if it’s smaller than the container div
  • Images that are larger than the container are scaled down to fit inside the container

View Demo

Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

jQuery Gallery

Features

  • Smart image preloading after the page is loaded
  • Thumbnail navigation (with pagination)
  • jQuery.history plugin integration to support bookmark-friendly URLs per-image
  • Slideshow (with optional auto-updating url bookmarks)
  • Keyboard navigation
  • Events that allow for adding your own custom transition effects
  • API for controlling the gallery with custom controls
  • Support for image captions
  • Flexible configuration
  • Graceful degradation when javascript is not available
  • Support for multiple galleries per page

View Demo

s3Slider jQuery Plugin

jQuery Gallery

View Demo

EOGallery

EOGallery is XHTML 1.0 strict valid and almost CSS valid, it has been tested on Firefox, Safari, Internet Explorer 6 and works even with non-javascript and/or non-css browsers.

jQuery Gallery

View Demo

Nivo Slider

The Nivo slider script excels in its size. Size as in ‘too small too even mention’, we are speaking 7kb. SBut size shouldn’t mean featureless or ugly. Instead the Nivo Slider is on top there with larger libraries when it comes to transition grace and looks. Lightweight as it may be, this should be one of the first addresses to look at if you need a sliding gallery for your design.

Features

  • 9 unique transition effects
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Built in directional and control navigation
  • Packed version only weighs 7kb
  • Supports linking images
  • Keyboard Navigation
  • Free to use and abuse under the MIT license

Demo and instructions.

Smooth Gallery

John Design’s Smooth Gallery was probably one of the first, and smoothest, image rotators available. Based on MooTools it is complete standards compliant and comes with as many options as you think of: from transition speed to captions, image titles and linking images. Additionally, it’s only 24kb in size and the first image will display already while the others load in the background, thanks to the implementation of a preloader. This gallery doesn’t slow down the content load times. You can even link to a particular place in the rotating gallery.
For jQuery users there is also a name-spaced version available.

Demo (There are several different demos in the showcase).


Friday Focus 04/16/10: Slanted

April 16, 2010 By Sophia Lucero

This week on Friday Focus: designs that tilt to one side and keep the perpendicular lines away.

Designs of the Week

Synch Media

Love the warm hues, transparency, and even the tiny polka dots. Everything blends in nicely.

Crealo design

I like how the logo is used as a prominent design element, not just as a header. One thing you will notice with these slanting designs is how they usually mean they’re left-aligned too. More often than not that leaves a lot of whitespace on the right side, which may be a good or bad thing.

Living Lyric

Really simple design, but looks fresh with the bold colors changing in each page and the boxy look.

Incrediblend

The nice thing about a vertical user-generated gallery is you only have to browse from top to bottom and not from left to right. I really like how the fixed footer has the logo slashed out!

ASOS plc

Forget rounded corners, slanting edges is the next big thing! Love the subtle, translucent shapes in the background and behind the content area.

Adesivos Decorativos Coolar

An extremely fun-looking design with not one traditional design pattern in sight! Love how the plus icons turn into arrows.

SWAG Designs

Instead of the usual horizontal lines to separate sections of a one-page site, this design slopes them upward.

Amanda Wakeley

There’s something about slashes and slanted shapes that just fit with designy sites including fashion. Love the hover effect in the inner pages reinforcing this.

Ignaty Nikulin

That other trend that’s also getting popular, circles, is in here too, but there’s an animated twist. The rainbow-colored header breaks the gray-filled design.

The Student Project

The hand-drawn effect is always a good way to add to slanting lines.

Panic Blog

And finally: the easiest, most modern way to implement the slanting look in your design? Use CSS3 transforms!

Social Media Weekly

Design – Holistic Web Browsing: Trends Of The Future
“The future of the Web is everywhere. The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.”

Design – Designing with Lenses
“A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.”

HTML – Introduction to HTML 5
“Are you interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles yet?”

JavaScript – RequireJS
“RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimization tool without needing to change your markup.”

Friday Focus 03/26/10: Full Bloom

March 26, 2010 By Sophia Lucero

Let’s celebrate the new season with stunning designs that display the best nature has to offer. Happy Friday Focus!

Designs of the Week

ktgardens.cz - příběh vaší zahrady

Wonderful design. The hover effects are brilliant. I also like how the layout is open and flowing. Both the photographs and the inner page designs are full of personality.

Modstudio

The integration of nature here is simple and limited but the effect is still eye-catching.

Solace Beeswax Candles

I can’t stop looking at this site. The art is topnotch. It’s warm and relaxing but still a strong color palette; I want to put it on my desktop or hang it on my wall. The animated candles are a nice, subtle touch.

Visualwild.com :: Portfolio for James Ricks

Despite its darkness, the has the same effect on me as the previous one—the design has a great scene that puts you in a certain mood. The typography and other graphic details are also excellent. Tiny gripe: the contact icons and CSS awards could have been blended in better.

Arvorecer

Despite some cliche elements (the man with outstretched arms and the glowing tree), there are some great graphic details on this site. My favorite would have to be the borders turned twisting ribbons turned hills, with leaf-like patterns—how do you even describe this? The brown, orange, gold, and green colors blending into one another is just great.

Social Media Weekly

User Experience – Five User Experience Trends I’ll be Watching in 2010
“Today I’m sharing five trends I’ll be watching over the coming year (and beyond) along with some thoughts about how they might change our industry. And even if I’m wrong about some of these, I’ll be interested to see where they go.”

CSS – 11 CSS3 Code Generators to make CSS3 development a breeze
“CSS3 is awesome, but the new syntax is sometimes hard to get your head around. Thankfully though, a few kind souls have created some very useful tools to generate the code for you.”

CSS – A Killer Collection of Global CSS Reset Styles
“I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information.”

jQuery – jQuery Presentation Plugin: Say NO to Keynote!
“I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github.”

Design – 7 Steps To A More Effective And Productive Web-Design Process
“The tips and tricks below are my personal experience. It has worked for me and I’ve learned many of them from working with other designers, too. They’re little insights into my own design process. I hope you find it useful.”

Friday Focus 03/12/10: Grit & Grime

March 12, 2010 By Sophia Lucero

Going dirty has never looked this good! It’s grungy websites this week on Friday Focus.

Designs of the Week

Sickdesigner

It’s interesting how despite the chaotic background you can still make out the boxiness. A nice contrast.

Inferno Band from Cyprus

I like how the site is designed as this screaming poster for the band. The content for each page is minimal and concentrated in the middle. The style is a bit of old school webdesign with the custom scrollbars and whatnot, but impact looks like the top priority here.

Nicola Gatti

Again, this looks chaotic but at first but you’ll find the screen divided into three: the navigation area, the content area, and the slideshow area. Simple.

Matt Salik

I just love how well-integrated the navigation is into the design, which happens to be a bit cheery and not just the usual angsty grunge. Another thing I like: the custom background for the lightbox overlay—a lot of people don’t bother changing that, and here it matches the design.

Mediasoldier

Truth is, only the background is the grungy part. The foreground is a very interesting folded paper texture, which even influences how the logo looks. Also interesting is the treatment of the portfolio items.

Social Media Weekly

CSS – Progressive enhancement: pure CSS speech bubbles
“Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.”

Usability – 5 Can’t-Miss Usability Tips for Mobile Website Designs
“Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.”

JavaScript – The Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery (Part 2)
“If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.”

Add Pizazz Without Using Flash

February 1, 2010 By Lorraine

Using less Flash was on my list of New Year’s Resolutions for Web Designers, and it’s something I’ve personally been trying to do for a long time. I say “trying” because many clients do request Flash, and there are some cases when nothing else will do.

Then, just yesterday, Steve Jobs said “No one will be using Flash. The world is moving to HTML5.”

Now, despite being a self-proclaimed Apple fangirl, I do think that Flash has it’s place online. The truth is, though, that depending on your needs, there are alternative ways of doing things. Let’s take a look at some of them:

Interactive Map (jQuery)

This jQuery plug-in allows you to build zoomable, interactive, absolutely awesome maps without Flash. Look at this demo to see just how awesome.

SmoothGallery (MooTools)

JonDesign’s image gallery and slideshow “system” is built with MooTools, with some gorgeous effects and an elegant interface that’s still fully standard-compliant. See the demo.

CSS Image Gallery

This one’s been around a long time, and is just one of many cool things you can do using pure CSS.

HTML5’s <video> element

Here at Devlounge, we’ve been excited about HTML5 for a long time now- and while we’re not completely there yet, it’s important to realize that we’re getting there. It all depends on what browser supports what. But for some examples, see Dailymotion’s HTML5 Video Demos, or join YouTube’s HTML5 Beta. Also highly recommended: go read Dive Into HTML5’s post on the <video> element.

« Previous Page
Next Page »

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

4 Reasons to Schedule Your 9-5 Staff Members

Search