Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Contributors 3

AltStyle によって変換されたページ (->オリジナル) /