#Smoothzoom A jQuery plugin to responsively zoom inline page images by Kevin Thornbloom.
##Demo Open demo in new window
##Features
- Lightweight script
- Zooms scaled down images, or wrap in an anchor to use thumbnails
- Zoomed images will always fit the screen in the best way
##Usage
- Include CSS in the header.
<link rel="stylesheet" href="css/smoothzoom.css">
- Include and call javascript in the footer.
<script type="text/javascript" src="js/smoothzoom.min.js"></script>
<script type="text/javascript">
$(window).load( function() {
$('img').smoothZoom({
// Options go here
});
});
</script>
- Add rel="zoom" to any image you want to zoom
<img src="images/1.jpg" rel="zoom">
- To use thumbnails, set the smaller image in the img tag. Then wrap it in an anchor that points to the larger.
<a href="images/3.jpg"><img src="images/3-THUMB.jpg" rel="zoom"></a>
- Available Options:
Option
Description
Values
zoominSpeed
Time (in milliseconds) the zoom-in lasts
800
zoomoutSpeed
Time (in milliseconds) the zoom-out lasts
400
resizeDelay
Check if window resized every X milliseconds
400
zoominEasing
jQuery easing method on zoom-in (requires easing plugin)
easeOutExpo
zoomoutEasing
jQuery easing method on zoom-out (requires easing plugin)
easeOutExpo
##Licensing Free to use and modify personally or commercially. Not for resale.
##Help & Feedback Connect with me on twitter.