In this post I’ve collected some resources that can be useful to enhance the images in many web projects. A complete list of plugins and tutorials that will be useful to improve the quality of your next works. Enjoy!
Don’t forget, you are free to suggest additional resources in the comments to this post.
Plugins and Scripts
Supersized – Full Screen Background/Slideshow jQuery Plugin
So, what exactly does Supersized do? 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
Easy Slider 1.7 – Numeric Navigation jQuery Slider
Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. 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.
jQuery Corner Demo
Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. 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.
jQuery maxImage Plugin
Jcrop, the jQuery Image Cropping Plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
jQuery Infinite Carousel Plugin 1.2 Released
jQuery LightBox Plugin
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.
piroBox Version 1.1 for jQuery 1.3.1
Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site. It stays fixed with one edge to its original coordinates, so that a sense of cohesiveness is created in the user interface and interaction.
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.
From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.
Create a Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.
Animate Curtains Opening with jQuery
This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. They have included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.
Secondly, in addition to the standard jQuery file, they are also using the easing plugin. They have worked with this plugin in previous tutorials but in this case they will use it to provide a bounce effect when the rope is pulled.
BBC Radio 1 Zoom Tabs
jQuery virtual tour
Creating a polaroid photo viewer with CSS3 and jQuery
Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.
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).
Create a unique gallery by using z-index and jQuery
Make Your Header Responses To Mouse Movements with jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.
Creating a “Filterable” Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
Horizontal Scrolling Menu made with CSS and jQuery
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.
Create a Thumbnail with Fading Caption Using jQuery
Other great Resources on the Web
The following lists of jQuery plugins will help you to improve the usability of your website.