Permalink
Browse files

Updated documentation, added a maximum width option, demonstrated usi…

…ng events for dynamic loading of images, now using google ajax api for mootools proper
  • Loading branch information...
1 parent 41536b3 commit e3f69bcd296d1b417ffb535ca5deea3c730a6c8f @vanpelt vanpelt committed Dec 16, 2008
Showing with 123 additions and 3,871 deletions.
  1. BIN mootools/images/loading.gif
  2. +68 −12 mootools/index.html
  3. +54 −42 mootools/js/fancyzoom.js
  4. +1 −1 mootools/js/fancyzoom.min.js
  5. +0 −3,816 mootools/js/mootools.1.2.js
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -2,13 +2,34 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>Fancy Zoom by John Nunemaker</title>
+ <title>Fancy Zoom by Chris Van Pelt &amp; John Nunemaker</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
- <script type="text/javascript" src="js/mootools.1.2.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEvent('domready', function() {
- $$("div.photo a").each(function(el) { new FancyZoom(el, {scaleImg:true}); })
+ $$("div.photo a").each(function(el) {
+ new FancyZoom(el, {
+ scaleImg:true,
+ onShow: function(e) {
+ var fancy = this
+ var a = fancy.content_div.getElement('a')
+ if(a && a.getElement('.loading')) {
+ var loaded = function() {
+ fancy.loaded = true
+ fancy.options.width = this.width
+ fancy.options.height = this.height
+ a.empty().adopt(this)
+ FancyZoom.show(e)
+ }
+ var image = new Image()
+ image.onload = loaded
+ image.src = a.href
+ }
+ },
+ max: 480
+ })
+ })
new FancyZoom('medium_box_link', {width:400, height:300});
new FancyZoom('large_box_link');
new FancyZoom('flash_box_link');
@@ -47,20 +68,24 @@
</div>
<div class="photo">
<a href="#hotdog">
- <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Github helmet" />
+ <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Hotdog" />
</a>
</div>
<div class="photo">
<a href="#turtles">
- <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Github helmet" />
+ <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Turtles" />
</a>
</div>
-
+
<div id="github">
- <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg" alt="helmet" />
+ <a href="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg#helmet">
+ <img src="./images/loading.gif" alt="loading" class="loading" />
+ </a>
</div>
<div id="hotdog">
- <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg" alt="Hot dog" />
+ <a href="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg#hotdog">
+ <img src="./images/loading.gif" alt="loading" class="loading" />
+ </a>
</div>
<div id="turtles">
<img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455.jpg" alt="Turtles" />
@@ -101,7 +126,7 @@
<p>Add the following scripts and checkout the notes below (or view the source of this page).</p>
-<pre><code>&lt;script type="text/javascript" src="js/mootools.1.2.js"&gt;&lt;/script&gt;
+<pre><code>&lt;script "http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/fancyzoom.js"&gt;&lt;/script&gt;</code></pre>
<h2>Notes</h2>
@@ -117,13 +142,44 @@
// other examples
&lt;script type="text/javascript"&gt;
- $(document).observe('dom:loaded', function() {
+ window.addEvent('domready', function() {
$$('a.fancy').each(function(el) { new FancyZoom(el, {width:500, height:300}); });
+
new FancyZoom('small', {scaleImg: true}); // Scales images inside while zooming
+
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});
+
+ /* This is an example of loading the image dynamically once the zoom is initiated.
+ * This particular example assumes that you have a link inside of your content div
+ * which contains an element (a spinning gif loader) with the class loading. eg:
+ * &lt;a href="#"&gt;&lt;img src="/images/loading.gif" alt="loading" class="loading"/&gt;&lt;/a&gt;
+ * The first two images above are loaded this way
+ */
+ new FancyZoom('custom', {
+ scaleImg: true,
+ onShow: function(e) {
+ var fancy = this
+ var a = fancy.content_div.getElement('a')
+ if(a.getElement('.loading')) {
+ var loaded = function() {
+ fancy.loaded = true
+ fancy.options.width = this.width
+ fancy.options.height = this.height
+ a.empty().adopt(this)
+ FancyZoom.show(e)
+ }
+ var image = new Image()
+ image.onload = loaded
+ image.src = a.href
+ }
+ },
+ //Make the images no wider than 480
+ max:480
+ })
});
&lt;/script&gt;</code></pre>
@@ -138,8 +194,8 @@
<div id="footer">
<p>
- Created by <a href="http://addictedtonew.com/about/">John Nunemaker</a> of <a href="http://orderedlist.com/">Ordered List</a> |
- <a href="http://orderedlist.com/contact/">Hire me</a>
+ Created by <a href="http://vandev.com">Chris Van Pelt</a> of <a href="http://doloreslabs.com/">Dolores Labs</a> | original implementation by
+ <a href="http://orderedlist.com/contact/">John Nunemaker</a>
</p>
</div>
</div>
View
@@ -1,22 +1,26 @@
var FancyZoom = new Class({
- Implements: Options,
+ Implements: [Options, Events],
options: {
- //The directory option is global to all future instances of FancyZoom on the same page
- directory : 'images',
+ /*
+ onShow: $empty,
+ onHide: $empty,
+ */
scaleImg: false,
+ // The directory option is global to all future instances of FancyZoom on the same page
+ directory : 'images',
width: null,
- height: null
+ height: null,
+ // This directive will force the zoom to scale to a maximum of 1024px wide
+ max: 1024
},
initialize: function(element, options) {
this.setOptions(options)
if(!$('zoom'))
this.setup()
this.element = $(element)
if (this.element) {
- this.element.store('content_div', $(this.element.get('href').match(/#(.+)$/)[1]).setStyles({display:'block', position:'absolute', visibility:'hidden'}));
- this.element.store('scaleImg', this.options.scaleImg)
- this.element.store('zoom_width', this.options.width);
- this.element.store('zoom_height', this.options.height);
+ this.content_div = $(this.element.get('href').match(/#(.+)$/)[1]).setStyles({display:'block', position:'absolute', visibility:'hidden'});
+ this.element.store('fancy', this)
this.element.addEvent('click', FancyZoom.show);
}
},
@@ -50,32 +54,34 @@ var FancyZoom = new Class({
$(document.body).grab(new Element('div', {id:"zoom", style:"display:none", html: html}));
//Setup the FX as class methods
FancyZoom.showFx = new Fx.Morph($('zoom'), {
- duration: 500,
+ link: 'cancel',
onStart: function(element) {
- if (element.retrieve('scaleImg')) {
- $('zoom_content').set('html', element.retrieve('content_div').get('html'));
- $$('#zoom_content img').setStyle('width', '100%');
- } else {
+ var fancy = element.retrieve('fancy')
+ if(fancy.options.scaleImg) {
+ fancy.content_div.getElements('img').setStyles({'width': 50, 'height':'auto'})
+ $('zoom_content').set('html', fancy.content_div.get('html'));
+ //This is still broken in IE
+ $$('#zoom_content img').tween('width', this.to.width[0].value - 60)
+ } else
$('zoom_content').set('html','');
- }
- // middle row height must be set for IE otherwise it tries to be "logical" with the height
- if (Browser.trident) {
- $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten().setStyle('height', (height-40));
- }
},
onComplete: function(element) {
FancyZoom.zoomed = true;
- if (!element.retrieve('scaleImg'))
- $('zoom_content').set('html', element.retrieve('content_div').get('html'));
+ var fancy = element.retrieve('fancy')
+ fancy.loaded = false
+ if (!fancy.options.scaleImg)
+ $('zoom_content').set('html', fancy.content_div.get('html'));
+ // middle row height must be set for IE otherwise it tries to be "logical" with the height
+ if(Browser.Engine.trident)
+ $$('td.ml, td.mm, td.mr').setStyle('height', this.to.height[0].value - 60);
$('zoom_close').setStyle('display', '');
FancyZoom.unfixBackgroundsForIE();
}
})
FancyZoom.hideFx = new Fx.Morph($('zoom'), {
- duration: 500,
onStart: function(element) {
- if (!element.retrieve('scaleImg'))
- $('zoom_content').set('html', '')
+ if (!element.retrieve('fancy').scaleImg)
+ $('zoom_content').set({'html': '', 'style':''})
$('zoom_close').setStyle('display', 'none');
},
onComplete: function(element) {
@@ -102,28 +108,33 @@ FancyZoom.zoomed = false;
FancyZoom.show = function(e) {
e.stop();
var element = $(e.target).match('a') ? e.target : e.target.getParent('a');
- var content_div = element.retrieve('content_div')
- var width = (element.retrieve('zoom_width') || content_div.getWidth()) + 60;
- var height = (element.retrieve('zoom_height') || content_div.getHeight()) + 60;
- var d = window.getSize();
- var yOffset = window.getScrollTop();
+ var fancy = element.retrieve('fancy')
+ var width = (fancy.options.width || fancy.content_div.getWidth()) + 60;
+ var height = (fancy.options.height || fancy.content_div.getHeight()) + 60;
+ //Make the image a maximum of 1024px wide
+ var height = (Math.min(fancy.options.max, width) / width) * height
+ var width = Math.min(fancy.options.max, width)
+ var d = Window.getSize();
+ var yOffset = Window.getScrollTop();
// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.y/2) - (height/2) + yOffset, 0);
var newLeft = (d.x/2) - (width/2);
- // store this FancyZooms info in the zoom container
- $('zoom').store('curTop', e.client.y);
- $('zoom').store('curLeft', e.client.x);
- $('zoom').store('content_div', content_div)
- $('zoom').store('scaleImg', element.retrieve('scaleImg'))
- $('zoom').setStyles({
- position : 'absolute',
- display : 'block',
- opacity : 0,
- top : e.client.y,
- left : e.client.x,
- width : 1,
- height : 1
- });
+ if(!fancy.loaded) {
+ $('zoom').store('curTop', e.page.y);
+ $('zoom').store('curLeft', e.page.x);
+ $('zoom').store('fancy', fancy);
+ $('zoom').setStyles({
+ position : 'absolute',
+ display : 'block',
+ opacity : 0,
+ top : e.page.y,
+ left : e.page.x,
+ width : 1,
+ height : 1
+ });
+ //So we need a delay for IE to be happy....
+ fancy.fireEvent('show', {stop:$empty, target:element, page: e.page}, 100)
+ }
FancyZoom.fixBackgroundsForIE();
FancyZoom.showFx.start({
opacity: 1,
@@ -136,6 +147,7 @@ FancyZoom.hide = function(e) {
if(!FancyZoom.zoomed)
return
e.stop();
+ $('zoom').retrieve('fancy').fireEvent('hide')
FancyZoom.fixBackgroundsForIE();
FancyZoom.hideFx.start({
left: $('zoom').retrieve('curLeft'),
Oops, something went wrong.

0 comments on commit e3f69bc

Please sign in to comment.