#Smoothzoom A jQuery plugin to zoom and scroll through images
##Demo Open demo in new window
##Features
- Images zoom from their location on the page when clicked, and zoom back when closed.
- Minimal, clean interface
- Keyboard accessable for previous(left arrow), next(right arrow), and close(esc or down arrow) functions.
- Responsive
- 'Lightbox' type viewer for groups of images Note: not for use with text links
##Usage
- Include CSS in the header.
<link rel="stylesheet" href="css/smoothzoom.css"> - Include the load.gif image in the images folder
- Include and call javascript in the footer. jQuery and jQuery easing are used by this plugin.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript" src="js/smoothzoom.min.js"></script> <script type="text/javascript"> $(window).load( function() { $('img').smoothZoom({ // Options go here }); }); </script> - Create an image tag with your thumbnail. To add an optional caption, use the alt tag. Wrap the whole thing in a link pointing to the full size image. Add data-smoothzoom="group1" to the link. You may change group1 to anything you'd like. Use different names for different groupings of images.
<a href="images/1-large.jpg" data-smoothzoom="group1"><img src="images/1-small.jpg" alt="This is a caption"></a> - Available Options:
| Option | Description | Default |
| zoominSpeed | Time (in milliseconds) the zoom-in lasts | 800 |
| zoomoutSpeed | Time (in milliseconds) the zoom-out lasts | 400 |
| zoominEasing | jQuery easing method on zoom-in (requires easing plugin) | easeOutExpo |
| zoomoutEasing | jQuery easing method on zoom-out (requires easing plugin) | easeOutExpo |
| navigationButtons | Set 'true' or 'false' for previous and next buttons. Buttons will not appear unless there is a group of images. | true |
| closeButton | Set 'true' or 'false' for a close button on the modal window. | false |
| showCaption | Set 'true' or 'false' to show captions. | true |
##Browser Support Chrome ✓ Firefox ✓ Safari ✓ IE - should work, but untested. Let me know how it goes!
##Licensing Free to use and modify personally or commercially. Not for resale.
##Help & Feedback Connect with me on twitter.
