Bookmark to del.icio.us
FF1+ IE6+ Opr8+
jQuery Image Warp script
Description: 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's original dimensions. It's 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's final dimensions relative to the original.
Non hyperlinked images, warp factor=2.5, duration=1 second:
Non hyperlinked images (except last one), warp factor=1.5, duration=1 second:
Simply add the below code inside the <HEAD> section of the page:
The above code references the external .js file "jquery.imageWarp.js", which you need to download (right click, and select "Save As").
Step 2: Then, to apply the warp effect to an image on
your page, just give it a CSS class of "
class="imagewarp" style="width:200px; height:150px" />
To modify the default increase factor of the enlarged image relative to the original, plus the animation duration, do so inside the .js file:
warpfactor: 1.5, //default increase factor
of enlarged image
ImageWarp as a jQuery Plugin
If you're familiar with jQuery, ImageWarp is a jQuery Plugin and
as such can
also be called on any collection of images (instead of those with
to target the desired collection instead. For example, the following invocation code applies the warp effect to just images that are links:
When calling the
The following invocation code causes the enlarged images to expand to 3 times the size of the original in 2 seconds: