Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 270404468d5a9e06567e2e4521e394e3110a5715 Jack Moore committed Nov 12, 2011
Showing with 147 additions and 0 deletions.
  1. BIN daisy.jpg
  2. +42 −0 demo.html
  3. BIN icon.png
  4. +5 −0 jquery.zoom-min.js
  5. +91 −0 jquery.zoom.js
  6. +9 −0 readme.md
  7. BIN roxy.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset='utf-8'/>
+ <title>jQuery Zoom Demo</title>
+ <style>
+ * { border:0; margin:0; padding:0; }
+
+ .zoomIcon {
+ width:33px;
+ height:33px;
+ position:absolute;
+ top:0;
+ right:0;
+ background:url(icon.png);
+ }
+
+ .zoom {
+ display:inline-block;
+ }
+
+ .zoom img {
+ display: block;
+ }
+ </style>
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
+ <script src='jquery.zoom.js'></script>
+ <script>
+ $(document).ready(function(){
+ $('span').zoom();
+ });
+ </script>
+</head>
+<body>
+ <span class='zoom'>
+ <img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
+ </span>
+ <span class='zoom'>
+ <img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
+ </span>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
@@ -0,0 +1,91 @@
+// Zoom 1.0 - jQuery image zooming plugin
+// (c) 2011 Jack Moore - jacklmoore.com
+// license: www.opensource.org/licenses/mit-license.php
+
+(function ($) {
+ var defaults = {
+ url: false,
+ icon: true,
+ duration: 200
+ };
+
+ $.fn.zoom = function (options) {
+ return this.each(function () {
+ var
+ root = this,
+ $root = $(root),
+ img = new Image(),
+ $img = $(img),
+ $icon,
+ position = $root.css('position'),
+ settings = $.extend({}, defaults, options || {});
+
+ $root.css({
+ position: /(absolute|fixed)/.test(position) ? position : 'relative',
+ overflow: 'hidden'
+ });
+
+ if (!settings.url) {
+ settings.url = $root.find('img:first')[0].src;
+ if (!settings.url) {
+ return;
+ }
+ }
+
+ if (settings.icon) {
+ $icon = $('<div class="zoomIcon">').appendTo($root);
+ }
+
+ img.onload = function () {
+ var
+ outerWidth,
+ outerHeight,
+ xRatio,
+ yRatio;
+
+ function ratio() {
+ outerWidth = $root.outerWidth();
+ outerHeight = $root.outerHeight();
+ xRatio = -(img.width - outerWidth) / outerWidth;
+ yRatio = -(img.height - outerHeight) / outerHeight;
+ }
+
+ ratio();
+
+ $img
+ .addClass('zoomImg')
+ .css({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ opacity: 0,
+ width: img.width,
+ height: img.height,
+ border: 'none'
+ })
+ .hover(
+ function () {
+ ratio();
+
+ // Skip the fade-in for IE8 and lower since it chokes on fading-in
+ // and changing position based on mousemovement at the same time.
+ $img.stop().fadeTo($.support.opacity ? settings.duration : 0, 1);
+
+ },
+ function () {
+ $img.stop().fadeTo(settings.duration, 0);
+ }
+ )
+ .mousemove(function (e) {
+ img.style.left = (e.pageX - root.offsetLeft) * xRatio + 'px';
+ img.style.top = (e.pageY - root.offsetTop) * yRatio + 'px';
+ })
+ .appendTo($root);
+ };
+
+ img.src = settings.url;
+ });
+ };
+
+ $.fn.zoom.defaults = defaults;
+}(jQuery));
@@ -0,0 +1,9 @@
+## Zoom
+
+A small jQuery plugin for zooming images on mouseover.
+
+### Online Demo:
+http://jacklmoore.com/zoom/
+
+### License:
+http://www.opensource.org/licenses/mit-license.php
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2704044

Please sign in to comment.