diff --git a/demos/click-zoom.html b/demos/click-zoom.html new file mode 100644 index 0000000..ff9cf6e --- /dev/null +++ b/demos/click-zoom.html @@ -0,0 +1,355 @@ + + + + OKZoom + + + + + + + + + + + + + + + + + + +
+ + +
+

OKZoom by OKFocus

+

+ OKZoom is a JQuery plugin that produces a portable loupe of variable size and shape. + All other jQuery 'zoom' plugins we have encountered implement a square magnifying area. + Ours is a circle. You want a circle. +

+ +

Usage

+

+ Bind OKZoom to one or many image elements. The easiest way is to have a large image + that is sized down using HTML or CSS: the loupe will show the full-size image on hover. +

+ +
+ +
+ + 
+$('img').okzoom({
+  width: 200,
+  height: 200,
+  round: true,
+  background: "#fff",
+  backgroundRepeat: "repeat",
+  shadow: "0 0 5px #000",
+  border: "1px solid black"
+});
+ +

+ You can also apply OKZoom to every image on a page by binding to $('img'). + If the source of the bound image changes -- say on an image gallery with several thumbnails + under a main image -- the loupe will automatically update. +

+ +

+ Alternatively, add a HTML5 data attribute data-okimage to your image tag containing + the url to the image you want to see inside the loupe. Using this technique, + OKZoom may be applied to any element -- hover over this paragraph to see an example. +

+ +

+ Finally, the id of the loupe itself is ok-loupe. +

+ +

Smoke Tests

+ +

+ Use these basic tests to get started with OKZoom as quickly as possible. +

+ + + +

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
widthof the loupe, in pixels150
heightof the loupe, in pixels150
scaleWidthoptionally force magnification of imagenull
roundround loupe if true, square if falsetrue
backgroundcolor for image off the edge of the loupe#fff
backgroundRepeatrepeat the image within the loupeno-repeat
borderborder around the loupe0
shadowbox-shadow on the loupe0 0 5px #000
+ +

Download OKZoom or Contribute on Github

+ + +

+

License

+ 
+Copyright © 2012 OKFocus, http://okfoc.us
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+“Software”), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+
+ +
+ + + diff --git a/readme.textile b/readme.textile index 6219ca0..49ce118 100644 --- a/readme.textile +++ b/readme.textile @@ -21,14 +21,15 @@ $('img').okzoom({ background: "#fff", backgroundRepeat: "repeat", shadow: "0 0 5px #000", - border: "1px solid black" + border: "1px solid black", + click: false }); h3. Options -|Usage||| +|*Usage*|*Description*|*Default Value*| |width|(in pixels}|150| |height|(in pixels}|150| |scaleWidth|optionally resize the loupe image|null| @@ -37,6 +38,7 @@ h3. Options |backgroundRepeat|repeat the image within the loupe|no-repeat| |border|border around the loupe|0| |shadow|box-shadow on the loupe|0 0 5px #000| +|click|Require user to click rather than just hover to zoom|false| h3. Data Attribute diff --git a/src/okzoom.js b/src/okzoom.js index d55a027..490767a 100644 --- a/src/okzoom.js +++ b/src/okzoom.js @@ -33,20 +33,34 @@ $(function($){ $('body').append(loupe); base.loupe = loupe; + var clicked = false; + base.clicked = clicked; + base.$el.data("okzoom", base); base.options = options; - $(base.el).bind('mouseover', (function(b) { - return function(e) { $.fn.okzoom.build(b, e); }; - }(base))); - base.$listener.bind('mousemove', (function(b) { + if(base.options.click) { + $(base.el).bind('click', function(e) { + return function(e) { $.fn.okzoom.click(base, e); }; + }()); + + $(base.$listener).click(function(event) { + return $.fn.okzoom.click(base, event); + }); + } else { + $(base.el).bind('mouseover', function(b) { + return function(e) { $.fn.okzoom.build(b, e); }; + }(base)); + } + + base.$listener.bind('mousemove', function(b) { return function(e) { $.fn.okzoom.mousemove(b, e); }; - }(base))); + }(base)); - base.$listener.bind('mouseout', (function(b) { + base.$listener.bind('mouseout', function(b) { return function(e) { $.fn.okzoom.mouseout(b, e); }; - }(base))); + }(base)); base.options.height = base.options.height || base.options.width; @@ -76,7 +90,8 @@ $(function($){ "background": "#fff", "backgroundRepeat": "no-repeat", "shadow": "0 0 5px #000", - "border": 0 + "border": 0, + "click": false }; $.fn.okzoom.build = function(base, e){ @@ -147,6 +162,15 @@ $(function($){ $.fn.okzoom.mousemove(base, e); }; + $.fn.okzoom.click = function (base, e) { + if(base.clicked) { + return $.fn.okzoom.mouseout(base, e); + } else { + base.clicked = true; + return $.fn.okzoom.build(base, e); + } + }; + $.fn.okzoom.mousemove = function (base, e) { if (!base.initialized) return; var shimLeft = base.options.width / 2; @@ -169,7 +193,8 @@ $(function($){ base.loupe.style.display = "none"; base.loupe.style.background = "none"; base.listener.style.display = "none"; - document.body.style.cursor = "auto"; + document.body.style.cursor = "auto" + base.clicked = false;; }; });