Seven jQuery Plugins That Let You Do Cool Stuff With Images

In a recent post, I wrote about jQuery plugins that let you easily add a stylish galleries and slideshows to your site. Today, we have six plugins that let you add some cool functionality and interesting effects to images. As a designer, I found plugins like this to be so useful because I would never be able to write or develop functionality like this myself. So thank you generous developer community for sharing all this great work. And now on to the plugins…

jParallax
jParallax turns a selected element into a ‘window.’ Through this window you can see a number of absolutely positioned layers. The layers move in response to the mouse, giving a parallax effect. The parallax effect was utilized on the popular Silverback application website last year.

To download the plugin and see working demos, visit the plugin website.

parallax

jQuery 360 Virtual Tour

This is a really nice plugin that allows you to add a panoramic image to your site with additional interactivity. Users can pan around the image and also click on hotspots for a closer view.

Download plugin.

View Demo.

panorama

Illuminated letters is also made by the Open Studio. They created the 360 Virtual Tour plugin.

This plugin lets you add a decorative drop cap to your text. The drop caps are images provided in a zip file with the plugin. I imagine it would be reasonably straightforward to replace the provided images with your own letter images if you wanted to use a different style.

illuminatedLetters

Download and view working examples on the website. Just to mention, most of the info on this page is in French.

jCrop lets users choose part of a large image and crop it to produce a second smaller image. This would be ideal for situations such as creating an avatar or thumbnail image for example.

Demos here.

Download here.

jcrop

Image Annotation lets you choose hotspots on an image where you can add tooltips or notes which display with a mouse rollover. You’ve probably seen this effect numerous times if you use Flickr.

Demo here.

Download here.

imageannotation

jCaption plugin lets you easily add a caption to an image. As simple as that.
Demo here.

Download here.

jcaption

Maybe not one you’ll use too often but it could be a fun feature on a certain type of site, maybe for children, jQPuzzle lets you turn an image into a sliding puzzle.
Demo here.

Download here.

jqpuzzle

Have you any image related jQuery plugins that you love? Please feel free to share them.

Related Reading:

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.firenetdesigns.com squire

    Nice collection! Thanks for the post.

  • Anonymous

    Wonderful post. I will use them in my upcoming projects. Thanks.

  • http://www.clearwind.nl peach

    Thanks a lot for the jParallax link, I hadnt seen it yet. Definitely going to have some fun with that

  • http://www.webdesign-gm.co.uk/cheltenham-web-design.php TomBradshaw

    Havn’t come across most of these yet. I’ve seen something similar to jParallax and really like the effect – just need the idea to be able to work it into a future design!

  • Ajey

    great work!!!
    Really nice, i can hardly wait to implement in my projects.

  • http://fvsch.com Florent V.

    Thanks for the links. I don’t like the parallax effect. The plugin is nice, but the effect itself has never really convinced me; there may be some tasteful uses of this effect, but most of what i’ve seen was just distracting and added no value to the website (the Silverback example is nice because it’s more like an easter egg, as you’re not likely to see it in normal use).

    For me, the highlights in these plugins are the 360 Virtual Tour, jCrop and the Image Annotation plugin. Jcrop is amazing. I have worked with a similar plugin in the past, but Jcrop is so better, more flexible, well thought-out, with an API for adapting it to your needs. You could actually use Jcrop as a way to select a part of an image, then use the coordinates in order to create your own Image Annotation mechanism.

  • TrafficBug

    Great collection, image annotation plugin seems to be very helpful.

  • nssy

    Just Great