Permalink
Browse files

added enable/disable method

  • Loading branch information...
1 parent a333a02 commit 639eaa1bbab133fe0cb23650da8ba4b056f9a90a @Mottie Mottie committed Jun 21, 2012
Showing with 74 additions and 12 deletions.
  1. +18 −0 README.markdown
  2. +10 −2 double.html
  3. +20 −6 js/jquery.anythingzoomer.js
  4. +2 −2 js/jquery.anythingzoomer.min.js
  5. +1 −1 package.json
  6. +23 −1 use.html
View
@@ -11,6 +11,24 @@
## Changelog
+### Version 2.1 (6/21/2012)
+* Added a method to enable or disable AnythingZoomer.
+
+ ```javascript
+ $('.zoom').anythingZoomer('disable'); // disable AnythingZoomer
+ $('.zoom').anythingZoomer('enable'); // enable AnythingZoomer
+ ```
+
+ or use the internal function directly or from a callback:
+
+ ```javascript
+ $('.zoom').data('zoomer').setEnabled(false); // disable AnythingZoomer
+ $('.zoom').data('zoomer').setEnabled(true); // enable AnythingZoomer
+ ```
+
+ The [double](http://mottie.github.com/AnythingZoomer/double.html) demo has been updated to show this new method. What isn't shown there is that when AnythingZoomer is disabled, the zoom window automatically closes and the small area content is shown.
+
+
### Version 2.0 (6/11/2012)
* AnythingZoomer can now be updated to change both the small and large content dynamically.
* To update the content, just call anythingZoomer without any options: `$('#zoom').anythingZoomer();`.
View
@@ -24,6 +24,13 @@
$(".zoom:last").anythingZoomer();
+ $("button").click(function(){
+ var state = $(this).text(); // enable or disable
+ $(".zoom:eq(" + $(this).attr('data-id') + ")").anythingZoomer(state);
+ $(this).text( (state === "enable") ? "disable" : "enable" );
+ return false;
+ });
+
});
</script>
</head>
@@ -53,12 +60,13 @@
<ul class="info">
<li>Mouse over either section below to see the zoom window.</li>
<li>Double click within the section to toggle between the large and small versions.</li>
+ <li>Use the enable/disable button to turn AnythingZoomer on or off.</li>
</ul>
</p>
<hr>
- <p><strong>Text Demo</strong></p>
+ <p><strong>Text Demo <button data-id="0">disable</button></strong></p>
<div class="zoom">
@@ -72,7 +80,7 @@
<br>
- <p><strong>Image Demo</strong></p>
+ <p><strong>Image Demo <button data-id="1">disable</button></strong></p>
<div class="zoom second">
@@ -1,5 +1,5 @@
/*!
- AnythingZoomer v2.0
+ AnythingZoomer v2.1
Original by Chris Coyier: http://css-tricks.com
Get the latest version: https://github.com/Mottie/AnythingZoomer
*/
@@ -20,6 +20,7 @@
// true when small element is showing, false when large is visible
base.state = true;
+ base.enabled = true;
base.$wrap.addClass(n.wrap).wrapInner('<span class="' + n.wrapInner + '"/>');
base.$inner = base.$wrap.find('.' + n.wrapInner);
@@ -34,15 +35,15 @@
base.$inner
.bind('mouseenter' + n.namespace, function(){
- if (base.state){
+ if (base.state && base.enabled){
base.$zoom.stop(true,true).fadeIn(o.speed);
if (o.overlay) { base.$overlay.addClass(n.overlay); }
base.$smInner.addClass(n.hovered);
base.$wrap.trigger('zoom', base);
}
})
.bind('mouseleave' + n.namespace, function(){
- if (base.state){
+ if (base.state && base.enabled){
// delay hiding to prevent flash if user hovers over it again
// i.e. moving from a link to the image
base.timer = setTimeout(function(){
@@ -53,7 +54,7 @@
}
})
.bind('mousemove' + n.namespace, function(e){
- if (base.state){
+ if (base.state && base.enabled){
clearTimeout(base.timer);
// get current offsets in case page positioning has changed
// Double demo: expanded text demo will offset image demo zoom window
@@ -62,6 +63,7 @@
}
})
.bind(o.switchEvent + (o.switchEvent !== '' ? n.namespace : ''), function(){
+ if (!base.enabled) { return; }
// toggle visible image
if (base.state){
base.showLarge();
@@ -288,6 +290,14 @@
base.lastKey = null;
};
+ base.setEnabled = function(enable){
+ base.enabled = enable;
+ if (!enable) {
+ base.showSmall();
+ base.hideZoom();
+ }
+ };
+
// Initialize zoomer
base.init();
@@ -338,8 +348,12 @@
} else {
(new $.anythingZoomer(this, options));
}
- } else if ( anyZoom && ( typeof options === 'string' || (!isNaN(options) && !isNaN(second)) ) ){
- anyZoom.setTarget(options, second, sx, sy);
+ } else if ( anyZoom && ( typeof options === 'string' )) {
+ if (/(en|dis)able/.test(options)) {
+ anyZoom.setEnabled( options === 'enable' );
+ } else if (!isNaN(options) && !isNaN(second)) {
+ anyZoom.setTarget(options, second, sx, sy);
+ }
}
});
};
Oops, something went wrong.
View
@@ -1,6 +1,6 @@
{
"name": "AnythingZoomer",
- "version": "2.0",
+ "version": "2.1",
"title": "AnythingZoomer",
"author": {
"name": "Chris Coyier",
View
@@ -302,6 +302,14 @@ <h2 id="parameters">All Parameters</h2>
<h2 id="methods">Methods</h2>
+ <h3>Enable or Disable AnythingZoomer</h3>
+ <p>To enable or disable AnythingZoomer, call the plugin with the appropriate text:</p>
+
+<pre class="js">$('.zoom').anythingZoomer('disable'); // disable AnythingZoomer
+$('.zoom').anythingZoomer('enable'); // enable AnythingZoomer</pre>
+
+ <p>This method is demonstrated in the <a href="double.html">Double</a> demo page. What isn't shown there is that when AnythingZoomer is disabled, the zoom window automatically closes and the small area content is shown.</p>
+
<h3>Control Zoom Window Externally</h3>
<p>You can open the zoom window using an external link using these methods. This would be useful to highlight portions of the content in say instructions on how to use an app or name the presidents in the image demo.</p>
@@ -441,15 +449,22 @@ <h3 id="arguments">Callback and Events Arguments and Functions</h3>
<h4>zoomer.options.{name}</h4>
<ul>
<li>Access any of the zoomer options (e.g. <code>zoomer.options.edge</code>).</li>
- <li>Trying to set the options this way may break the zoomer.</li>
+ <li>Trying to set the options this way is possible, but may break the zoomer.</li>
</ul>
<h4>zoomer.setTarget('selector', [xOffset, yOffset], [zoomW, zoomH])</h4>
<ul>
<li>This function is called when controlling the zoom window externally.</li>
+ <li>Call this function if you are using a jQuery selector to target an element; use <code>zoomer.zoomAt()</code> if you have specific coordinates to set.</li>
<li>Please refer to the methods section for more details on how to set the parameters.</li>
</ul>
+ <h4>zoomer.zoomAt(x, y, [zoomW, zoomH])</h4>
+ <ul>
+ <li>This function is called by the <code>zoomer.setTarget()</code> function after it calculates the x and y coordinates.</li>
+ <li>Call this function directly if you already know the coordinates.</li>
+ </ul>
+
<h4>zoomer.showSmall()</h4>
<ul>
<li>This function is called when switching from the large content to the small content.</li>
@@ -466,6 +481,13 @@ <h3 id="arguments">Callback and Events Arguments and Functions</h3>
<li>The "unzoom" callback will not be triggered.</li>
</ul>
+ <h4>zoomer.setEnabled(boolean)</h4>
+ <ul>
+ <li>This function will enable (if boolean is true) or disable (if boolean is false) AnythingZoomer.</li>
+ <li>When the plugin is disabled, any open zoom window will be closed and the large content will be hidden.</li>
+ <li>This function is called directly from the shortcut method which allows you to call the plugin using 'enable' or 'disable'.</li>
+ </ul>
+
</div>
</div>

0 comments on commit 639eaa1

Please sign in to comment.