
Add a gush of style to the plain images in your website using this collection of jQuery Image Effect plugins, that help enhance images, create galleries, scrollers and bring in life to the plain images.
1. Image splitting effect with CSS and JQuery
In this tutorial we are going to make an image splitting effect. What is that? It is simillar to a sliding door effect where the image slides to left or right side and reveals the text behind it, but the thing that makes this different is that the effect looks like the image is splitted into half and one goes left and the other one goes right. One thing that is very important is that there will not be 2 images, its only one ![]()

2. imJQMosaic – A jQuery plugin to create mosaic pattern using an image
With this jQuery plugin, you can create the desired mosaic pattern using an image. I have been often asked by people who have visited my website, if the home page design was a Flash or how to create that kind of effect in HTML along with menus, etc. Well, considering the curiosity of my viewers and readers, I went back into my code and extracted the logic into a jQuery plugin called, imJQMosaic.

3. jQuery Virtual Tour Plugin
Want to roma around in a virtual world? Then do it with this jQuery Virtual Tour Plugin. This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

4. jQuery Image Warp script
jQuery ImageWarp adds an interesting warp effect to select images on your page so clicking on them causes the image to expand temporarily before reverting back to the image original dimensions. It is most useful applied to hyperlinked images to create a delayed effect before the user is taken to the actual link. Customize the duration of the effect plus the warped image final dimensions relative to the original

5. jQuery Image Magnify
Description: jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the users screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original di

6. Photo Effects using jQuery Plugin
A jquery plugin that bring life to your image by letting it bounce and shake in accordance with mouse by tracking mouseover/mouseout.

7. jQuery spherical panorama viewer Plugin
A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

8. imgAreaSelect jQuery Plugin
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

9. Creating a polaroid photo viewer with CSS3 and jQuery
Placing images on simple polaroids on a webpage simply did not do it for me. I wanted to drag them around, rotate them and still have a fun time. That iss 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 will see the shadow. When it is placed down, it iss rotated to the left or the right (random).

10. Crop jQuery Plugin
Crop an image easily using this jQuey plugin. The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.

11. Animated InnerFade with JQuery
Create an animated image transition effect with inner fade using this wonderful jQuery plugin.

12. Image Preview Using jQuery
I love jQuery and the way it makes developers life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can not deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up wit

13. jQ Zoom jQuery Plugin
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.

14. CrossSlide jQuery Plugin
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 animation facility, so it is as portable across browsers as jQuery itself (a lot.)

15. jQuery Thumbnail with Zooming Image and Fading Caption Tutorial
Learn how to build thumbnail gallery with zooming effect and fadein and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.
![]()
16. jQuery image slide on hover effect
This is a simple technique to animate an image when hovering using jQuery animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.

17. S3 Slider jQuery Plugin
The s3Slider jQuery plugin is made by example of jd smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self. It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

18. Using the Wonderful jFlow Plugin
It seems that the obsession of the web design industry right now is the ability to create a featured section. While it once may have required a great deal of skill, that is no longer the case. In this screencast, I will show you how to easily create a scrollable featured section using one of Theme Forests popular themes as a reference. Let us get into it!

19. Simple JQuery Image Slide Show with Semi-Transparent Caption
I will show you how to create a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.

20. Image hover effect using jQuery
In this post, I will show you how to make a image hover effect using div in jquery.Take a look at a telebid.com if you put the mouse over the bid button it will be changed to login and afterwards it become bid button.

21. jQuery Fancybox Plugin
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

22. Zoomimage – jQuery plugin
Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

23. Supersized jQuery Plugin
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

24. Image Loading with jQuery
This tutorial will show how to load images in the background, and once loaded handle the event and create your own response.

25. Blink and bounce effect on image or object using jquery
In this jQuery tutorial I will show you how you can add bounce or blink effect to an image or div using jQuery.

26. 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 content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

27. jQuery Tutorial – Create A Fancy Thumbnail Hover Effect With jQuery
Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.

In this tutorial we will combine the CSS property “z-index” and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures.
29. Create an Image Rotator with Description using jQuery and CSS
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.
30. jQuery Image Cube

A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube. The current version is 1.2.0 and is available under the GPL and MIT licences. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.









[...] This post was mentioned on Twitter by Mike Sprague and Don Souta, Igor Sidorenko. Igor Sidorenko said: 30 Amazing jQuery Image Effect Plugins To Enhance Your Images http://is.gd/4vZ9w [...]
[...] 30 Amazing jQuery Image Effect Plugins To Enhance Your Images [...]
[...] 23. 30 Amazing jQuery Image Effect Plugins To Enhance Your Images [...]
Thanks.. its a great collection!!! I’m gonna try jqzoom.