25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available

June 18, 2013 · 72 comments

by Lars

best-jquery

JavaScript frameworks like jQuery, prototype (and script.aculo.us), Dojo and mootools have become very popular because they are making the creation of dynamic effects much easier without using fx. flash. jQuery has become one of the most used JavaScript libraries today and can be found in the core of popular products like WordPress and Drupal.The community is providing a huge amount of free plugins making it possible to find good solutions to nearny any need you may have. This article will introduce you to more than 25 jQuery plugins providing enhancements to how you can display images on your web pages. This is essential for creating dynamic state of the art web solutions. Lets get started!

By the way. tripwire magazine have provides several articles covering javascript frameworks that I will recommend you take a look at:


ElegantThemes
ThemeForest

Advertisement

CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.). This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.

best-jquery

Highslide JS

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is an excellent, unobtrusive lightbox-style script with a multitude of uses. It is free for non commercial uses.

best-jquery

These are some of it’s features:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

best-jquery

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.

best-jquery

Easiest Tooltip and Image Preview Using jQuery

An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

best-jquery

Animated InnerFade

Full w3c compliant animated slideshow with sliding effect on large images. Check it you you need to see the effect.

best-jquery

jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose.

best-jquery

prettyPhoto a jQuery lightbox clone

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

best-jquery

jQuery virtual tour

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

best-jquery

crop, labelOver and pluck

Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

best-jquery

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

best-jquery

jQuery Cycle plugin

This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!

best-jquery

Fancy Box

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.

best-jquery

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.

best-jquery

Jcrop

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.

javascript-frameworks

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

javascript-frameworks

ImgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

best-jquery

PanView

This plugin allows your visitors view details of a big image and move around with the mouse.

best-jquery

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

lightwindow

Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

shadowbox

Image Cross Fade Transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

View the working example and the source

image-cross-fade-transition

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

javascript-frameworks

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

javascript-frameworks

Image Loading

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

javascript-frameworks

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

polaroid_photo_viewer

{ 49 comments… read them below or add one }

sanderz November 11, 2013 at 3:45 pm

thanks this info is useful may god bless you

Reply

Gelinlik March 8, 2013 at 10:31 am

oh good….

Reply

davetiye February 24, 2013 at 4:13 pm

good information.. thanks..

Reply

ukash February 13, 2013 at 8:08 pm

Hello, thank you very much for this information. I want to share this information on my own website

Reply

davetiye February 2, 2013 at 1:19 pm

good information.. thanks for sharing

Reply

davetiye January 2, 2013 at 10:54 pm

they are very good information, thank you for your help

Reply

bestphotos24.com December 10, 2012 at 9:56 am

Thanks for your information . I have added slider on my header

Reply

D mondal September 1, 2012 at 12:26 pm

very beautiful………………link

Reply

Bollywood movies database March 25, 2012 at 11:43 am

thanks……………great work

Reply

Brautkleider December 13, 2011 at 11:37 am

very beautiful Comment Thanks you….

Reply

davetiye October 29, 2011 at 10:51 pm

very very beautifull post thk.

Reply

tuba September 19, 2011 at 10:34 pm

Very nice jQuery collection, thanks man!

Reply

Dheeraj @ Techreuters September 18, 2011 at 8:01 am

It is awesome, Thanks So much for sharing it. using jquery is considered as the best SEO practices rather that flash.

Reply

Ratulacs September 15, 2011 at 6:34 pm

Thank you, its awesome…..

Reply

davetiye August 20, 2011 at 12:12 pm

thank you so much… very beatiful :)

Reply

nikah ?ekeri August 18, 2011 at 2:23 pm

thank you wery much. super code

Reply

Sonia May 27, 2011 at 7:54 pm

I have actually tried the First one and i think it’s quite helpful eventhough i almost messed it up but now its all Good Thanks

Reply

lvraa May 27, 2011 at 10:58 pm

Good that it works for you Sonia, thanks for the comment!

Reply

Akif August 7, 2011 at 9:30 pm

I did the same but glad i found support for that :)

Reply

Davetiye May 3, 2011 at 12:56 am

Thats amazing. You are really cool. These codes are very useful for me. I am really glad to see them all together.

Reply

mike March 23, 2011 at 11:07 pm

Does anybody know where to find the source code for this script

http://www.jquerylabs.com/full-screen-image-gallery.html

Reply

davetiye August 1, 2013 at 5:13 pm

thank you so much… very beatiful

Reply

davetiye March 8, 2011 at 9:59 am

Congratulation!! I’m looking for a nice full code

Reply

Terrence Coins February 9, 2011 at 3:40 am

Can I just say what a reduction to find someone who truly is aware of what theyre talking about on the internet. You positively know the right way to deliver a difficulty to gentle and make it important. More folks need to read this and understand this side of the story. I cant imagine youre not more popular since you positively have the gift.

Reply

davetiye1 November 10, 2010 at 2:07 am

very good. thankyou very much

Reply

klima fiyatlar? October 28, 2010 at 7:56 pm

Thanks for the good stuff…

Reply

matbaa September 7, 2010 at 2:17 pm

thank you very much….

Reply

davetiye September 7, 2010 at 2:16 pm

Thanks for the good stuff

Reply

Michael August 27, 2010 at 9:07 pm

Thanks for the good stuff. These are really useful for me…

Reply

Cost Effective SEO Services July 30, 2010 at 2:00 pm

Great post..
Thanks for sharing such an informative article.
Keep up the good work.

Smita
Cost Effective SEO Services
Free Tutorials

Reply

Paarth June 13, 2010 at 11:45 am

Great collection of good jQuery image galleries effects

Reply

davetiye June 6, 2010 at 12:05 am

thank you wery much

Reply

dr john May 6, 2010 at 7:47 pm

These are so good, showing just what can be done with JQuery, I’ve had to go out and buy a book on JQuery.

Now all I need is a dose of inspiration to do something clever…

Reply

Greg Babula May 1, 2010 at 11:55 pm

Great collection, thanks

Reply

swapnil March 5, 2010 at 1:12 pm

This is really cool collection of jquery libraries, thanks for sharing such great knowledge.

Reply

wespai December 29, 2009 at 8:45 am

thx collect some to

ajax.wespai.com

Reply

kilian güntner December 14, 2009 at 8:46 pm

Great list, thanks!

Reply

neel September 17, 2009 at 6:05 pm

Nice list of good jquery image galleries

Reply

Justin Ryan August 30, 2009 at 5:23 am

I just wanted to point out that Highslide is not a jQuery plugin. It is written in JavaScript, but is independent of any framework.

Reply

tripwiremag August 30, 2009 at 7:52 am

@Justin Ryan, thanks for your input. I double checked and It’s true. Still it is a brilliant solution so I will leave it in the article.

Reply

hasfa August 29, 2009 at 5:24 pm

Congratulation!! I think ur collection of image effect script is so wonderful. I must try and tell my group about this. Thanks guys. U’ve make a god job.

Reply

tripwiremag August 29, 2009 at 11:01 pm

@hasfa, thanks for the feedback.

Reply

math August 27, 2009 at 7:42 am

Thx for this list

Reply

Aneslin July 31, 2009 at 3:34 pm

Thanks a lot for this bunch of jquery tips.
i tried some of these, but that image zoom things are bit new to me, need to play with it.
thx again mate

Reply

Jackson July 29, 2009 at 7:06 pm

Cool article, but you might want to mention which of these plugins are actually commercial products.

I read all about the usage and features and options of one package, and then realized at the very end that it was a commercial jQuery solution, requiring $22.00 to $55.00

(I’m not complaining, just suggesting)

Thanks again!

Reply

tripwiremag July 29, 2009 at 8:33 pm

@Jackson, I could only agree with you it should have been more clear to avoid anyone getting in that situation! What solution did you like? There may be a free alternative out there so please share.

Reply

Phaoloo July 29, 2009 at 11:23 am

Great collection!

Reply

Ed July 28, 2009 at 9:39 pm

Another jquery carousel plugin is http://www.agilecarousel.com. I’m working on the next version. Any feedback would be great.

Reply

Webstandard-Team July 28, 2009 at 6:47 am

Very nice jQuery-Collection, but if you are interested in more jQuery, you don’t have to miss the following two articles: “Creative Image-Galleries by jQuery” or “Webdesign inspired by jQuery and Twitter”!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 23 trackbacks }

Previous post:

Next post:


Web Analytics