New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opr8+

jQuery Image Warp script

  Author: Dynamic Drive

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.

Demos

Non hyperlinked images, warp factor=2.5, duration=1 second:

Non hyperlinked images (except last one), warp factor=1.5, duration=1 second:

Directions Developer's View

Simply add the below code inside the <HEAD> section of the page:

Select All

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 "imagewarp", for example:

<img src="ocean.gif" class="imagewarp" style="width:200px; height:150px" />

<a href="http://dynamicdrive.com"><img src="ocean.gif" class="imagewarp" style="width:200px; height:150px;" border="0"/></a>

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
duration: 1000, //default duration of animation, in millisec

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 class="imagewarp" for example). Inside the code of Step 1, you would modify the invocation code:

<script type="text/javascript">

jQuery(document).ready(function($){
 $('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})

</script>

to target the desired collection instead. For example, the following invocation code applies the warp effect to just images that are links:

<script type="text/javascript">

jQuery(document).ready(function($){
 $('a>img:first').imageWarp() //apply warp effect to images that are hyperlinked
})

</script>

Plugin options

When calling the imageWarp() method, you can optionally pass in the following options to customize the increase factor of the enlarged image plus the animation duration for applied set of images.

options Description
warpfactor The final size of the enlarged image as a factor of the original image. A value of 2 represents 2x the original image's size, 1.5 represent 1.5 times etc.
duration The duration of the warp animation, in milliseconds. 2000 represents 2 seconds for example.

The following invocation code causes the enlarged images to expand to 3 times the size of the original in 2 seconds:

<script type="text/javascript">

jQuery(document).ready(function($){
 $('img.imagewarp').imageWarp({warpfactor:3, duration:2000})
})

</script>