@@ -34,7 +34,7 @@ div#zoom h2 {margin:10px 0 10px;} div#zoom p {line-height:1.6;} - + div#wrapper {background:#fff; width:560px; margin:0 auto; padding:20px; border:10px solid #bc8c46; border-width:0 10px;} div#header {position:relative; border-bottom:1px dotted; margin:0 0 10px; padding:0 0 10px;} div#header p {margin:0; padding:0;} @@ -45,4 +45,20 @@ div#content {} div#content p {line-height:1.6;} div#footer {clear:both; margin:40px 0 0; border-top:1px dotted; padding:10px 0 0;} + +/* ---- The Zoom box ---- */ + /* Fancy border radii */ + div#zoom.edgy { background: #fff; height: 600px; width: 520px; -webkit-border-radius: 4px; -moz-border-radius: 5px; -o-border-radius: 4px; -khtml-border-radius: 4px; -webkit-box-shadow: rgba(20,20,20,0.75) 0 2px 10px; } + /* And now for some IE love, since they don't understand radii */ + div#zoom.edgy { *border: 3px solid rgba(30,30,30,0.75); } + + div#zoom.edgy a#zoom_close { border: 0; margin: 0; padding: 0; position: absolute; top: -10px; left: -10px; } + div#zoom.edgy #zoom_content { margin: 20px; position: relative; } +} +/* Show some mozilla love */ +/* Change domain to your site domain */ +/* Remove the border property if FF 3.1 is more popular than FF 3 */ +@-moz-document domain(exile.local) +{ + div#zoom.edgy { border: 4px solid rgba(30,30,30,0.4); -moz-box-shadow: rgba(30,30,30,0.75) 0 2px 10px; } } \ No newline at end of file css/common.css @@ -6,33 +6,34 @@ jQuery.fn.fancyZoom = function(options){ 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>'; + + 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>'; $('body').append(html); jquery/js/fancyzoom.js @@ -9,7 +9,7 @@ <script type="text/javascript" src="js/fancyzoom.js"></script> <script type="text/javascript" charset="utf-8"> $(document).observe('dom:loaded', function() { - $$("div.photo a").each(function(el) { new FancyZoom(el); }) + $$("div.photo a").each(function(el) { new FancyZoom(el, {edgy:true}); }) new FancyZoom('medium_box_link', {width:400, height:300}); new FancyZoom('large_box_link'); new FancyZoom('flash_box_link'); prototype/index.html @@ -33,44 +33,59 @@ var FancyZoomBox = { zooming : false, setup : false, - init: function(directory) { + init: function(is_edgy, directory) { if (FancyZoomBox.setup) return; FancyZoomBox.setup = true; - + + // Let's set the box padding differently if we're using the edgy version + extraWidth = (is_edgy) ? 40 : 60; + extraHeight = (is_edgy) ? 40 : 60; + var ie = navigator.userAgent.match(/MSIE\s(\d)+/); - if (ie) { + if (ie && !is_edgy) { var version = parseInt(ie[1]); Prototype.Browser['IE' + version.toString()] = true; Prototype.Browser.ltIE7 = (version < 7) ? true : 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>'; + 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>'; + } var body = $$('body').first(); body.insert(html); @@ -80,8 +95,10 @@ var FancyZoomBox = { FancyZoomBox.zoom_close = $('zoom_close'); FancyZoomBox.zoom_content = $('zoom_content'); FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide); - FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten(); - FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td'); + if (!is_edgy) { + FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten(); + FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td'); + }; // hide zoom if click fired is not inside zoom $$('html').first().observe('click', function(e) { @@ -101,7 +118,7 @@ var FancyZoomBox = { }); // just use gifs as ie6 and below suck - if (Prototype.Browser.ltIE7) { + if (Prototype.Browser.ltIE7 && !is_edgy) { FancyZoomBox.switchBackgroundImagesTo('gif'); } }, @@ -112,8 +129,8 @@ var FancyZoomBox = { FancyZoomBox.zooming = true; var element = e.findElement('a'); var related_div = element.content_div; - var width = (element.zoom_width || related_div.getWidth()) + 60; - var height = (element.zoom_height || related_div.getHeight()) + 60; + var width = (element.zoom_width || related_div.getWidth()) + extraWidth; + var height = (element.zoom_height || related_div.getHeight()) + extraHeight; var d = Window.size(); var yOffset = document.viewport.getScrollOffsets()[1]; // ensure that newTop is at least 0 so it doesn't hide close button @@ -208,7 +225,9 @@ var FancyZoomBox = { var FancyZoom = Class.create({ initialize: function(element) { this.options = arguments.length > 1 ? arguments[1] : {}; - FancyZoomBox.init(); + this.edgy = (this.options.edgy) ? true : false; + console.log('edgy? '+this.edgy); + FancyZoomBox.init(this.edgy); this.element = $(element); if (this.element) { this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, '')); prototype/js/fancyzoom.js d69e0564380a699109d3d9eb56a21207ed0ed28f Micheal Stickel mike@ma0301b-dhcp200.apple.com http://github.com/stickel/fancy-zoom/commit/08f2bdf812638bdfcb6e17143f62ceee6cc7f7c9 08f2bdf812638bdfcb6e17143f62ceee6cc7f7c9 2008-09-05T13:49:57-07:00 2008-09-05T13:49:57-07:00 Modifying the prototype version to have an 'edgy' option 16374c35543b84de425c1fa68490e71ae6d5fdd5 Micheal Stickel mike@ma0301b-dhcp200.apple.com