Skip to content

kthornbloom/Smoothzoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Zoom inline page images to and from their original location.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published