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

codingrider/Smoothzoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

17 Commits

Repository files navigation

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

About

Zoom inline page images to and from their original location.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.8%
  • CSS 3.2%

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