20 jQuery Image Enhancers

Sam Deering
Tweet

It’s really amazing to see what one can create using jQuery. Developers just don’t stop making incredibly interactive web applications every now and then. Tutorials below demonstrate excellent examples of the best jQuery Image Enhancer-plugins. Enjoy while learning!


1. jQuey Sliders (Slider Gallery)

A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items.
jQuery-slider-gallery.jpg
Source


2. jQuey Sliders (Accessible Slider)

Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.
jQuery-Accessible-Slider.jpg
Source


3. jQuery manipulating Images

Creates sliding-image puzzles based on containers that have images.
jQuery-creating-a-sliding-image-puzzle.jpg
Source


4. jQuery Featured Content Glider

Showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. Supports two different display modes- “manual” and “slideshow.”
jQuery-featured-content-glider.jpg
Source


5. jQuery Simple Effects

Nice animation effects that can easily toggle, hide, show, fade, slide elements.
jQuery-simple-effects.jpg
Source


6. jQuery Slide out and Drawer Effect

Commonly known as an accordion effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed.
jQuery-slide-show-and-drawer-effects.jpg
Source


7. jQuery Fading Header

A simple example using jQuery and CSS that shows you how to create the fading header technique.
jQuery-creating-a-fading-header.jpg
Source


8. jQuery Coda Bubble

A demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site (http://www.panic.com/coda/)

Source


9. jQuery Slider

Featuring 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.
jQuery-nivo-slider.jpg
Source


10. jQueryGlobe

Featuring slick effect, no flash needed, 2K reusable on multiple containers, cycles items via slideshow, can be styled with custom HTML/CSS.
jQuery-globe.jpg
Source


11. jQuery LightBox Plugin 0.5

It is simple, elegant, and unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
jQuery-lightbox.jpg
Source


12. Galleriffic jQuery Plgin

Provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
jQuery-galleriffic.jpg
Source


13. jQuery Image Scroller

jQuery’s excellent animation effects. Image scrollers are of course nothing new. Most of them are user-initiated. This scroller is far way different amongst others because this one is completely autonomous and will begin scrolling once the page loads.
jQuery-image-scroller.jpg
Source


14. jQuery Image Rotator

A great way to display portfolio pieces, eCommerce product images, or even as an image gallery.
jQuery-image-Rotator.jpg
Source


15. jQuery Circular Image Gallery

Another excellent animation effects that you might want to learn. Autonomous and will begin scrolling once the page loads.
jQuery-circular-image-gallery.jpg
Source


16. jQuery Image Strip

An image strip matched with a bit of animation makes for a very nice looking effect. These sorts of tricks are really nice for times when you want to look like your using Flash without actually using it.
jQuery-Image-Strip.jpg
Source


17. jQuery Be Funky Photo Effects

Allows everyday people to easily create photographically rich and artistic results from their digital images without the need for any technical knowledge.
jQuery-Be-funky-photo-effects.jpg
Source


18. jQuery Imagic Photo Enhancer

An easy to use digital photo enhancement software that instantly transforms your pictures into rich, glowing, beautiful images. Now you can give all your pictures a professional touch without the need for fancy, expensive studio equipment.
jQuery-image-photo-enhancer.jpg
Source


19. Resizable Image Grid with jQuery

Now you can make grids that smoothly scale at the simple drag of a slider, no need your desktop applications like iPhoto or Picasa.
jQuery-resizable-image-grid.jpg
Source


20. Simple JQuery Image Slide Show

Here will be shown how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display news headlines, or an image slide show on your websites homepage.
jQuery-image-slide-show-with-semi-transparent.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.