Permalink
Browse files

add files

  • Loading branch information...
1 parent 54808b8 commit 9b89dc3e8dbcf752e752013aa4b2969652ef1a09 @creaven committed Apr 12, 2010
View
BIN Demo/girl-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN Demo/girl.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN Demo/gomer-small.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN Demo/gomer.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
26 Demo/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
+ <head>
+ <title>Zoomer</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="../Source/Zoomer.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function(){
+ //new Zoomer('#homer');
+ new Zoomer('#girl', {
+ big: 'girl.jpg',
+ smooth: 10
+ });
+ $('#homer').zoomer({smooth: 10});
+ });
+ </script>
+ </head>
+ <body>
+ <h2>Homer</h2>
+ <img src="gomer-small.jpg" id="homer" big="gomer.jpg"/>
+ <br><br>
+ <h2>Queen</h2>
+ <img src="girl-thumb.jpg" id="girl" style="border:solid 1px gray;padding:3px;margin:10px"/>
+ </body>
+</html>
View
6,240 Demo/jquery.js
6,240 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
0 README
No changes.
View
62 README.md
@@ -0,0 +1,62 @@
+Zoomer
+=====
+Zoomer is simple and nice image zoom class. It's shows zoomed image inside original.
+
+![Screenshot](http://mifjs.net/assets/images/queen.jpg)
+
+How to use
+----------
+
+[demo](http://mifjs.net/misc/zoomer/)
+
+*Example 1:*
+
+html
+
+ #html
+ <img src="gomer-small.jpg" id="homer" big="gomer.jpg"/>
+js
+
+ #js
+ new Zoomer('homer');
+
+**big** attribute - big image src.
+
+
+*Example 2:*
+
+html
+
+ #html
+ <img src="girl-thumb.jpg" id="girl"/>
+
+js
+
+ #js
+ new Zoomer('girl', {
+ big: 'girl.jpg',
+ smooth: 10
+ });
+
+*Example 3:*
+
+html
+
+ #html
+ <img src="girl-thumb.jpg" id="girl"/>
+
+js
+
+ #js
+ $('#girl').zoomer({
+ big: 'girl.jpg',
+ smooth: 10
+ });
+
+
+
+
+options:
+
+* **big** - big image src
+* **smooth**(integer) - smooth
View
160 Source/Zoomer.js
@@ -0,0 +1,160 @@
+/*
+---
+
+name: Zoomer
+description: Class to show zoomed image inside original. MooTools Zoomer port
+license: MIT-Style License (http://mifjs.net/license.txt)
+copyright: Anton Samoylov (http://mifjs.net)
+authors: Anton Samoylov (http://mifjs.net)
+requires: jQuery1.4
+provides: Zoomer
+
+...
+*/
+
+var Zoomer = function(element, options){
+ this.initialize.apply(this, arguments);
+ return this;
+};
+
+
+Zoomer.prototype = {
+
+ version: '1.8',
+
+ initialize: function(element, options){
+ var dflt = {
+ smooth: 6
+ };
+ this.options = $.extend(dflt, options || {});
+ this.small = $(element);
+ var self = this;
+ if(!this.small[0].complete){
+ this.small.bind('load', function(){
+ self.prepareSmall();
+ });
+ }else{
+ this.prepareSmall();
+ }
+ var src = this.options.big || this.small.attr('big');
+ this.big = $('<img src="' + src + '"></img>').css({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ cursor: 'crosshair'
+ }).hide();
+ if(!this.big[0].complete){
+ this.big.bind('load', function(){
+ self.prepareBig();
+ });
+ }else{
+ this.prepareBig();
+ }
+ },
+
+ prepareSmall: function(){
+ this.small.wrap('<div class="zoomer-wrapper"></div>');
+ this.wrapper = this.small.parent();
+ var self = this;
+ $.each(['margin', 'left', 'top', 'bottom', 'right', 'float', 'clear', 'border', 'padding'], function(i, p){
+ var style = self.small.css(p);
+ var dflt = 'auto';
+ if($.inArray(p, ['float', 'clear', 'border']) != -1) dflt = 'none';
+ if(p == 'padding') dflt = '0';
+ try{
+ self.small.css(p, dflt);
+ self.wrapper.css(p, style);
+ }catch(e){};
+ });
+ this.wrapper.css({
+ width: this.small[0].offsetWidth,
+ height: this.small[0].offsetHeight,
+ position: 'relative',
+ overflow: 'hidden'
+ });
+ this.smallSize = {
+ width: this.small[0].width,
+ height: this.small[0].height
+ };
+ if(this.bigPrepared){
+ this.ready();
+ }else{
+ this.smallPrepared = true;
+ }
+ },
+
+ prepareBig: function(){
+ this.bigSize = {
+ width: this.big[0].width,
+ height: this.big[0].height
+ };
+ if(this.smallPrepared){
+ this.ready();
+ }else{
+ this.bigPrepared = true;
+ }
+ },
+
+ ready: function(){
+ this.big.appendTo(this.wrapper);
+ this.big.wrap('<div class="zoomer-wrapper-big"></div>');
+ this.bigWrapper = this.big.parent();
+ this.bigWrapper.css({
+ position: 'absolute',
+ overflow: 'hidden',
+ top: this.small.offset().top - this.wrapper.offset().top - parseInt(this.wrapper.css('border-top-width'), 10),
+ left: this.small.offset().left - this.wrapper.offset().left - parseInt(this.wrapper.css('border-left-width'), 10),
+ width: this.small[0].offsetWidth,
+ height: this.small[0].offsetHeight,
+ background: 'url(_)'
+ }).mouseenter($.proxy(this.startZoom, this))
+ .mouseleave($.proxy(this.stopZoom, this))
+ .mousemove($.proxy(this.move, this));
+ },
+
+ move: function(event){
+ this.dstPos = {x: event.pageX, y: event.pageY};
+ },
+
+ startZoom: function(){
+ this.position = this.small.offset();
+
+ /** precalculations **/
+ this.ratio = {
+ x: 1 - this.bigSize.width / this.smallSize.width,
+ y: 1 - this.bigSize.height / this.smallSize.height
+ };
+ this.current = {
+ left: parseInt(this.big.css('left'), 10),
+ top: parseInt(this.big.css('top'), 10)
+ };
+
+ this.timer = setInterval($.proxy(this.zoom, this), 10);
+ this.big.fadeIn();
+ },
+
+ stopZoom: function(){
+ clearInterval(this.timer);
+ this.big.fadeOut();
+ },
+
+ zoom: function(){
+ if(!this.dstPos) return;
+ var steps = this.options.smooth;
+ var dst = {
+ left: parseInt((this.dstPos.x - this.position.left) * this.ratio.x, 10),
+ top: parseInt((this.dstPos.y - this.position.top) * this.ratio.y, 10)
+ };
+ this.current.left -= (this.current.left - dst.left) / steps;
+ this.current.top -= (this.current.top - dst.top) / steps;
+
+ this.big.css(this.current);
+ }
+
+};
+
+$.fn.zoomer = function(options){
+ for(var i = 0, l = this.length; i < l; i++){
+ new Zoomer(this[i], options);
+ }
+};
View
26 package.yml
@@ -0,0 +1,26 @@
+name: Zoomer
+
+web: [http://github.com/creaven/Zoomer/](http://github.com/creaven/Zoomer/)
+
+description: shows zoomed image inside original
+
+authors: [Anton Samoylov](http://mifjs.net)
+
+license: MIT License
+
+copyright: &copy; [Anton Samoylov](http://mifjs.net)
+
+author: magmoro
+
+category: Effects
+
+tags: [image, zoom]
+
+sources:
+ - "Source/Zoomer.js"
+
+demo: http://mifjs.net/misc/zoomer/
+
+current: 1.8
+
+

0 comments on commit 9b89dc3

Please sign in to comment.