Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

first commit

  • Loading branch information...
commit 270404468d5a9e06567e2e4521e394e3110a5715 0 parents
Jack Moore authored
BIN  daisy.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 demo.html
@@ -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>
BIN  icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 jquery.zoom-min.js
@@ -0,0 +1,5 @@
+// Zoom 1.0 - jQuery image zooming plugin
+// (c) 2011 Jack Moore - jacklmoore.com
+// license: www.opensource.org/licenses/mit-license.php
+
+(function(a){var b={url:!1,icon:!0,duration:200};a.fn.zoom=function(c){return this.each(function(){var d=this,e=a(d),f=new Image,g=a(f),h,i=e.css("position"),j=a.extend({},b,c||{});e.css({position:/(absolute|fixed)/.test(i)?i:"relative",overflow:"hidden"});if(!j.url){j.url=e.find("img:first")[0].src;if(!j.url)return}j.icon&&(h=a('<div class="zoomIcon">').appendTo(e)),f.onload=function(){function k(){b=e.outerWidth(),c=e.outerHeight(),h=-(f.width-b)/b,i=-(f.height-c)/c}var b,c,h,i;k(),g.addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:f.width,height:f.height,border:"none"}).hover(function(){k(),g.stop().fadeTo(a.support.opacity?j.duration:0,1)},function(){g.stop().fadeTo(j.duration,0)}).mousemove(function(a){f.style.left=(a.pageX-d.offsetLeft)*h+"px",f.style.top=(a.pageY-d.offsetTop)*i+"px"}).appendTo(e)},f.src=j.url})},a.fn.zoom.defaults=b})(jQuery);
91 jquery.zoom.js
@@ -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));
9 readme.md
@@ -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
BIN  roxy.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.