@@ -8,7 +8,7 @@ <script type="text/javascript" src="js/fancyzoom.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { - $('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true}); + $('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true, edgy:true}); $('#medium_box_link').fancyZoom({width:400, height:300}); $('#large_box_link').fancyZoom(); $('#flash_box_link').fancyZoom(); jquery/index.html @@ -3,37 +3,55 @@ jQuery.fn.fancyZoom = function(options){ var options = options || {}; var directory = options && options.directory ? options.directory : 'images'; var zooming = false; + var is_edgy = options && options.edgy ? options.edgy : false; + + // Set the extra width/height based on is_edgy + var extraWidth = (is_edgy) ? 40 : 60; + var extraHeight = (is_edgy) ? 40 : 60; if ($('#zoom').length == 0) { - var ext = $.browser.msie ? 'gif' : 'png'; - - var html = '<div id="zoom" style="display:none;"> \ - <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \ - <tbody> \ - <tr> \ - <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ - <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \ - <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ - </tr> \ - <tr> \ - <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \ - <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \ - <div id="zoom_content"> \ - </div> \ - </td> \ - <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y; width:20px; overflow:hidden;" /> \ - </tr> \ - <tr> \ - <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ - <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \ - <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ - </tr> \ - </tbody> \ - </table> \ - <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \ - <img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \ - </a> \ - </div>'; + switch(is_edgy) { + case true: + console.log('test'); + var html = '<div id="zoom" class="edgy" style="display:none;"> \ + <div id="zoom_content"> \ + </div> <!-- /zoom_content --> \ + <a href="#" title="Close" id="zoom_close"> \ + <img src="' + directory + '/closebox.png" alt="Close" /> \ + </a> \ + </div> <!-- /zoom -->'; + break; + case false: + var ext = $.browser.msie ? 'gif' : 'png'; + var html = '<div id="zoom" style="display:none;"> \ + <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \ + <tbody> \ + <tr> \ + <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ + <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \ + <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ + </tr> \ + <tr> \ + <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \ + <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \ + <div id="zoom_content"> \ + </div> \ + </td> \ + <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y; width:20px; overflow:hidden;" /> \ + </tr> \ + <tr> \ + <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ + <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \ + <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ + </tr> \ + </tbody> \ + </table> \ + <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \ + <img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \ + </a> \ + </div>'; + break; + } $('body').append(html); @@ -71,8 +89,8 @@ jQuery.fn.fancyZoom = function(options){ var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop); var window_size = {'width':width, 'height':height, 'x':x, 'y':y} - var width = (zoom_width || content_div.width()) + 60; - var height = (zoom_height || content_div.height()) + 60; + var width = (zoom_width || content_div.width()) + extraWidth; + var height = (zoom_height || content_div.height()) + extraHeight; var d = window_size; // ensure that newTop is at least 0 so it doesn't hide close button jquery/js/fancyzoom.js @@ -10,7 +10,7 @@ <script type="text/javascript" charset="utf-8"> $(document).observe('dom:loaded', function() { $$("div.photo a").each(function(el) { new FancyZoom(el, {edgy:true}); }) - new FancyZoom('medium_box_link', {width:400, height:300}); + new FancyZoom('medium_box_link', {width:300, height:100}); new FancyZoom('large_box_link'); new FancyZoom('flash_box_link'); }); prototype/index.html @@ -47,44 +47,45 @@ var FancyZoomBox = { Prototype.Browser['IE' + version.toString()] = true; Prototype.Browser.ltIE7 = (version < 7) ? true : false; } - - if(is_edgy) { - var html = '<div id="zoom" class="edgy" style="display:none;"> \ - <div id="zoom_content"> \ - \ - </div> <!-- /zoom_content --> \ - <a href="#" title="Close" id="zoom_close"> \ - <img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" /> \ - </a> \ - </div> <!-- /zoom -->'; - } else { - var html = '<div id="zoom" style="display:none;"> \ - <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \ - <tbody> \ - <tr> \ - <td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ - <td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \ - <td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ - </tr> \ - <tr> \ - <td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \ - <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \ - <div id="zoom_content"> \ - </div> \ - </td> \ - <td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \ - </tr> \ - <tr> \ - <td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ - <td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \ - <td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ - </tr> \ - </tbody> \ - </table> \ - <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \ - <img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \ - </a> \ - </div>'; + switch(is_edgy) { + case true: + var html = '<div id="zoom" class="edgy" style="display:none;"> \ + <div id="zoom_content"> \ + </div> <!-- /zoom_content --> \ + <a href="#" title="Close" id="zoom_close"> \ + <img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" /> \ + </a> \ + </div> <!-- /zoom -->'; + break; + case false: + var html = '<div id="zoom" style="display:none;"> \ + <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \ + <tbody> \ + <tr> \ + <td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ + <td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \ + <td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \ + </tr> \ + <tr> \ + <td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \ + <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \ + <div id="zoom_content"> \ + </div> \ + </td> \ + <td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \ + </tr> \ + <tr> \ + <td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ + <td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \ + <td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \ + </tr> \ + </tbody> \ + </table> \ + <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \ + <img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \ + </a> \ + </div>'; + break; } var body = $$('body').first(); @@ -226,7 +227,6 @@ var FancyZoom = Class.create({ initialize: function(element) { this.options = arguments.length > 1 ? arguments[1] : {}; this.edgy = (this.options.edgy) ? true : false; - console.log('edgy? '+this.edgy); FancyZoomBox.init(this.edgy); this.element = $(element); if (this.element) { prototype/js/fancyzoom.js 08f2bdf812638bdfcb6e17143f62ceee6cc7f7c9 Micheal Stickel mike@ma0301b-dhcp200.apple.com http://github.com/stickel/fancy-zoom/commit/708eaac65b866cc35b6702438ea9cf0b01563399 708eaac65b866cc35b6702438ea9cf0b01563399 2008-09-05T17:37:25-07:00 2008-09-05T17:37:25-07:00 Getting rid of some log's and cruft in the Prototype version, and adding an edgy jQuery version 7bbb9e6736e7b6d0866a82cdaa188def5b3fc91b Micheal Stickel mike@ma0301b-dhcp200.apple.com