Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixed issue where image was element firing event instead of a. Update…

…d README.
  • Loading branch information...
commit 60f6f392de831a1aacfc749b5a95388d6c25bd01 1 parent c322537
@jnunemaker authored
Showing with 30 additions and 19 deletions.
  1. +29 −18 README
  2. +1 −1  js/fancyzoom.js
View
47 README
@@ -3,24 +3,35 @@
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
-2. Start zooming.
- <script type="text/javascript">
- $(document).observe('dom:loaded', function() {
- $$('a.fancy').each(function(el) { new FancyZoom(el); });
+2. Start zooming.
+ new FancyZoom(id) where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:
+
+ <a href="#small_box" id="small">Small Box!</a>
+ <div id="small_box">
+ <p>Here is the contents that will appear in the zoom.</p>
+ </div>
+ <script type="text/javascript">
new FancyZoom('small');
- new FancyZoom('medium');
- // width and height are optional. defaults to css specifications of width and height.
- // if width and height are passed in, they override whatever may be in css.
- new FancyZoom('large', {width:600, height:400});
- });
- </script>
+ </script>
- new FancyZoom(id) where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:
+ // other examples
+ <script type="text/javascript">
+ $(document).observe('dom:loaded', function() {
+ $$('a.fancy').each(function(el) { new FancyZoom(el, {width:500, height:300}); });
+ new FancyZoom('small');
+ new FancyZoom('medium');
+ // width and height are optional. defaults to css specifications of width and height.
+ // if width and height are passed in, they override whatever may be in css.
+ new FancyZoom('large', {width:600, height:400});
+ });
+ </script>
- <a href="#small_box" id="small">Small Box!</a>
- <div id="small_box">
- <p>Here is the contents that will appear in the zoom.</p>
- </div>
- <script type="text/javascript">
- new FancyZoom('small');
- </script>
+ If the images are not in a directory named 'images' that is relative to the html file you can configure it like so:
+
+ <script type="text/javascript">
+ FancyZoomBox.directory = 'http://foobar.com/images/zoom'; // no need for trailing slash
+ $(document).observe('dom:loaded', function() {
+ new FancyZoom('small');
+ });
+ </script>
+
View
2  js/fancyzoom.js
@@ -102,7 +102,7 @@ var FancyZoomBox = {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
- var element = e.element();
+ var element = e.findElement('a');
var related_div = element.content_div;
var width = (element.zoom_width || related_div.getWidth()) + 30;
var height = (element.zoom_height || related_div.getHeight()) + 10;
Please sign in to comment.
Something went wrong with that request. Please try again.