Skip to content
This repository
Browse code

Deleted files that were no longer needed.

  • Loading branch information...
commit 21a59da2873b4c688d15ece2b2c65fbf2c35f0b6 1 parent b7e6a95
Steve Smith orderedlist authored
BIN  images/bl.gif
BIN  images/bl.png
BIN  images/bm.gif
BIN  images/bm.png
BIN  images/br.gif
BIN  images/br.png
BIN  images/closebox.gif
BIN  images/closebox.png
BIN  images/ml.gif
BIN  images/ml.png
BIN  images/mr.gif
BIN  images/mr.png
BIN  images/tl.gif
BIN  images/tl.png
BIN  images/tm.gif
BIN  images/tm.png
BIN  images/tr.gif
BIN  images/tr.png
144 index.html
... ... @@ -1,144 +0,0 @@
1   -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2   -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3   -<head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5   - <title>Fancy Zoom by John Nunemaker</title>
6   - <link rel="stylesheet" href="css/common.css" type="text/css" />
7   - <script type="text/javascript" src="js/prototype.js"></script>
8   - <script type="text/javascript" src="js/scriptaculous.js"></script>
9   - <script type="text/javascript" src="js/fancyzoom.js"></script>
10   -
11   - <script type="text/javascript" charset="utf-8">
12   - $(document).observe('dom:loaded', function() {
13   - $$("div.photo a").each(function(el) { new FancyZoom(el); })
14   - new FancyZoom('medium_box_link', {width:400, height:300});
15   - new FancyZoom('large_box_link');
16   - new FancyZoom('flash_box_link');
17   - });
18   - </script>
19   -
20   - <style type="text/css" media="screen">
21   - #large_box {width:800; height:600;}
22   - </style>
23   -</head>
24   -<body>
25   -<div id="wrapper">
26   - <div id="header">
27   - <h1>Fancy Zoom</h1>
28   - <p>Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser.</p>
29   -
30   - <ul id="nav">
31   - <li><a href="http://github.com/jnunemaker/fancy-zoom/">Github</a></li>
32   - <li><a href="http://jnunemaker.lighthouseapp.com/projects/16389-fancyzoom/overview">Lighthouse</a></li>
33   - </ul>
34   - </div>
35   -
36   - <div id="content">
37   - <p>This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.</p>
38   -
39   - <h2>Demos</h2>
40   -
41   - <div id="photos">
42   - <h3>Images</h3>
43   - <div class="photo">
44   - <a href="#github">
45   - <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25_s.jpg" alt="Github helmet" />
46   - </a>
47   - </div>
48   - <div class="photo">
49   - <a href="#hotdog">
50   - <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Github helmet" />
51   - </a>
52   - </div>
53   - <div class="photo">
54   - <a href="#turtles">
55   - <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Github helmet" />
56   - </a>
57   - </div>
58   -
59   - <div id="github">
60   - <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg" alt="helmet" />
61   - </div>
62   - <div id="hotdog">
63   - <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg" alt="Hot dog" />
64   - </div>
65   - <div id="turtles">
66   - <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455.jpg" alt="Turtles" />
67   - <p id="turtles_caption">It's true, they do bite!</p>
68   - </div>
69   - </div>
70   -
71   - <div id="text">
72   - <h3>Text</h3>
73   - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. <a href="#medium_box" id="medium_box_link">Here is a medium box</a> blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. <a href="#large_box" id="large_box_link">Here is a large box</a>. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula. <a href="#flash_box" id ="flash_box_link">You can even embed flash</a>.</p>
74   -
75   - <div id="medium_box">
76   - <h2>Here is a medium box</h2>
77   - <p><strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
78   -
79   - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
80   - </div>
81   -
82   - <div id="large_box">
83   - <h2>Here is a large box</h2>
84   - <p><strong>The width and height for this box are inferred from css. See the style tag in the &lt;head&gt; of this document.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
85   -
86   - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
87   - </div>
88   -
89   - <div id="flash_box">
90   - <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.flickr.com/apps/video/stewart.swf?v=59154" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377"></param> <param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=59154"></param> <param name="bgcolor" value="#000000"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=59154" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377" height="300" width="400"></embed></object>
91   - </div>
92   - </div>
93   -
94   - <h2>Installation</h2>
95   -
96   - <p>Add the following scripts and checkout the notes below (or view the source of this page).</p>
97   -
98   -<pre><code>&lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt;
99   -&lt;script type="text/javascript" src="js/scriptaculous.js"&gt;&lt;/script&gt;
100   -&lt;script type="text/javascript" src="js/fancyzoom.js"&gt;&lt;/script&gt;</code></pre>
101   -
102   - <h2>Notes</h2>
103   - <p>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:</p>
104   -
105   - <pre><code>&lt;a href="#small_box" id="small"&gt;Small Box!&lt;/a&gt;
106   -&lt;div id="small_box"&gt;
107   - &lt;p&gt;Here is the contents that will appear in the zoom.&lt;/p&gt;
108   -&lt;/div&gt;
109   -&lt;script type="text/javascript"&gt;
110   - new FancyZoom('small');
111   -&lt;/script&gt;
112   -
113   -// other examples
114   -&lt;script type="text/javascript"&gt;
115   - $(document).observe('dom:loaded', function() {
116   - $$('a.fancy').each(function(el) { new FancyZoom(el, {width:500, height:300}); });
117   - new FancyZoom('small');
118   - new FancyZoom('medium');
119   - // width and height are optional. defaults to css specifications of width and height.
120   - // if width and height are passed in, they override whatever may be in css.
121   - new FancyZoom('large', {width:600, height:400});
122   - });
123   -&lt;/script&gt;</code></pre>
124   -
125   - <p>If the images are not in a directory named 'images' that is relative to the html file you can configure it like so:</p>
126   -
127   -<pre><code>&lt;script type="text/javascript"&gt;
128   - FancyZoomBox.directory = 'http://foobar.com/images/zoom'; // no need for trailing slash
129   - $(document).observe('dom:loaded', function() {
130   - new FancyZoom('small');
131   - });
132   -&lt;/script&gt;</code></pre>
133   -
134   - </div>
135   -
136   - <div id="footer">
137   - <p>
138   - Created by <a href="http://addictedtonew.com/about/">John Nunemaker</a> of <a href="http://orderedlist.com/">Ordered List</a> |
139   - <a href="http://orderedlist.com/contact/">Hire me</a>
140   - </p>
141   - </div>
142   -</div>
143   -</body>
144   -</html>
204 js/fancyzoom.js
... ... @@ -1,204 +0,0 @@
1   -Object.extend(String.prototype, {
2   - // if a string doesn't end with str it appends it
3   - ensureEndsWith: function(str) {
4   - return this.endsWith(str) ? this : this + str;
5   - },
6   -
7   - // makes sure that string ends with px (for setting widths and heights)
8   - px: function() {
9   - return this.ensureEndsWith('px');
10   - }
11   -});
12   -
13   -Object.extend(Number.prototype, {
14   - // makes sure that number ends with px (for setting widths and heights)
15   - px: function() {
16   - return this.toString().px();
17   - }
18   -});
19   -
20   -var Window = {
21   - // returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
22   - size: function() {
23   - var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
24   - var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
25   - var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
26   - var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
27   - return {'width':width, 'height':height, 'x':x, 'y':y}
28   - }
29   -}
30   -
31   -var FancyZoomBox = {
32   - directory : 'images',
33   - zooming : false,
34   - setup : false,
35   -
36   - init: function(directory) {
37   - if (FancyZoomBox.setup) return;
38   - FancyZoomBox.setup = true;
39   -
40   - var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
41   - if (ie) {
42   - var version = parseInt(ie[1]);
43   - Prototype.Browser['IE' + version.toString()] = true;
44   - Prototype.Browser.ltIE7 = (version < 7) ? true : false;
45   - }
46   -
47   - var html = '<div id="zoom" style="display:none;"> \
48   - <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
49   - <tbody> \
50   - <tr> \
51   - <td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
52   - <td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \
53   - <td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
54   - </tr> \
55   - <tr> \
56   - <td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \
57   - <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
58   - <div id="zoom_content"> \
59   - </div> \
60   - </td> \
61   - <td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
62   - </tr> \
63   - <tr> \
64   - <td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \
65   - <td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \
66   - <td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \
67   - </tr> \
68   - </tbody> \
69   - </table> \
70   - <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \
71   - <img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \
72   - </a> \
73   - </div>';
74   -
75   - var body = $$('body').first();
76   - body.insert(html);
77   -
78   - FancyZoomBox.zoom = $('zoom');
79   - FancyZoomBox.zoom_table = $('zoom_table');
80   - FancyZoomBox.zoom_close = $('zoom_close');
81   - FancyZoomBox.zoom_content = $('zoom_content');
82   - FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
83   - FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
84   - FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
85   -
86   - // just use gifs as ie6 and below suck
87   - if (Prototype.Browser.ltIE7) {
88   - FancyZoomBox.switchBackgroundImagesTo('gif');
89   - }
90   - },
91   -
92   - show: function(e) {
93   - e.stop();
94   - if (FancyZoomBox.zooming) return;
95   - FancyZoomBox.zooming = true;
96   - var element = e.findElement('a');
97   - var related_div = element.content_div;
98   - var width = (element.zoom_width || related_div.getWidth()) + 60;
99   - var height = (element.zoom_height || related_div.getHeight()) + 60;
100   - var d = Window.size();
101   - var yOffset = document.viewport.getScrollOffsets()[1];
102   - // ensure that newTop is at least 0 so it doesn't hide close button
103   - var newTop = Math.max((d.height/2) - (height/2) + yOffset, 0);
104   - var newLeft = (d.width/2) - (width/2);
105   - FancyZoomBox.curTop = e.pointerY();
106   - FancyZoomBox.curLeft = e.pointerX();
107   - FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
108   - FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
109   - FancyZoomBox.zoom.hide().setStyle({
110   - position : 'absolute',
111   - top : FancyZoomBox.curTop.px(),
112   - left : FancyZoomBox.curLeft.px()
113   - });
114   -
115   - new Effect.Parallel([
116   - new Effect.Appear(FancyZoomBox.zoom, {sync:true}),
117   - new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX, y: FancyZoomBox.moveY, sync: true}),
118   - new Effect.Morph(FancyZoomBox.zoom, {
119   - style: {
120   - width: width.px(),
121   - height: height.px()
122   - },
123   - sync: true,
124   - beforeStart: function(effect) {
125   - // middle row height must be set for IE otherwise it tries to be "logical" with the height
126   - if (Prototype.Browser.IE) {
127   - FancyZoomBox.middle_row.invoke('setStyle', {height:(height-40).px()});
128   - }
129   - FancyZoomBox.fixBackgroundsForIE();
130   - },
131   - afterFinish: function(effect) {
132   - FancyZoomBox.zoom_content.innerHTML = related_div.innerHTML;
133   - FancyZoomBox.unfixBackgroundsForIE();
134   - FancyZoomBox.zoom_close.show();
135   - FancyZoomBox.zooming = false;
136   - }
137   - })
138   - ], { duration: 0.5 });
139   - },
140   -
141   - hide: function(e) {
142   - e.stop();
143   - if (FancyZoomBox.zooming) return;
144   - FancyZoomBox.zooming = true;
145   - new Effect.Parallel([
146   - new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
147   - new Effect.Morph(FancyZoomBox.zoom, {
148   - style: {
149   - width: '1'.px(),
150   - height: '1'.px()
151   - },
152   - sync : true,
153   - beforeStart: function(effect) {
154   - FancyZoomBox.fixBackgroundsForIE();
155   - FancyZoomBox.zoom_content.innerHTML = '';
156   - FancyZoomBox.zoom_close.hide();
157   - },
158   - afterFinish: function(effect) {
159   - FancyZoomBox.unfixBackgroundsForIE();
160   - FancyZoomBox.zooming = false;
161   - }
162   - }),
163   - new Effect.Fade(FancyZoomBox.zoom, {sync:true})
164   - ], { duration: 0.5 });
165   - },
166   -
167   - // switches the backgrounds of the cells and the close image to png's or gif's
168   - // fixes ie's issues with fading and appearing transparent png's with
169   - // no background and ie6's craptacular handling of transparent png's
170   - switchBackgroundImagesTo: function(to) {
171   - FancyZoomBox.cells.each(function(td) {
172   - var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
173   - td.setStyle('background-image: ' + bg);
174   - });
175   - var close_img = FancyZoomBox.zoom_close.firstDescendant();
176   - var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
177   - close_img.writeAttribute('src', new_img);
178   - },
179   -
180   - // prevents the thick black border that happens when appearing or fading png in IE
181   - fixBackgroundsForIE: function() {
182   - if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
183   - },
184   -
185   - // swaps back to png's for prettier shadows
186   - unfixBackgroundsForIE: function() {
187   - if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
188   - }
189   -}
190   -
191   -var FancyZoom = Class.create({
192   - initialize: function(element) {
193   - this.options = arguments.length > 1 ? arguments[1] : {};
194   - FancyZoomBox.init();
195   - this.element = $(element);
196   - if (this.element) {
197   - this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
198   - this.element.content_div.hide();
199   - this.element.zoom_width = this.options.width;
200   - this.element.zoom_height = this.options.height;
201   - this.element.observe('click', FancyZoomBox.show);
202   - }
203   - }
204   -});
4,221 js/prototype.js
0 additions, 4,221 deletions not shown
3,433 js/scriptaculous.js
0 additions, 3,433 deletions not shown

0 comments on commit 21a59da

Please sign in to comment.
Something went wrong with that request. Please try again.