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.
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
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 "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>