Changesets can be listed by changeset number.
The Git repository is here.
- Revision:
- 208
- Log:
First attempt at Gullery configured for the ROOL site. Unfroze the
Rails revision by deleting vendor/rails; Hub integration by a veneer
in the lib/authenticated_system.rb (Acts As Authenticated) plug-in,
plus some view changes and protection for the Account controller;
rewrote the default layout in .rhtml rather than .mab; plus the
usual set of configuration changes to work from a subdirectory and
with the ROOL database server.
- Author:
- rool
- Date:
- Sun May 20 19:12:33 +0100 2007
- Size:
- 12247 Bytes
1 | /* |
2 | Lightbox JS: Fullsize Image Overlays |
3 | by Lokesh Dhakar - http://www.huddletogether.com |
4 | |
5 | For more information on this script, visit: |
6 | http://huddletogether.com/projects/lightbox/ |
7 | |
8 | Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ |
9 | (basically, do anything you want, just leave my name and link) |
10 | |
11 | Table of Contents |
12 | ----------------- |
13 | Configuration |
14 | |
15 | Functions |
16 | - getPageScroll() |
17 | - getPageSize() |
18 | - pause() |
19 | - getKey() |
20 | - listenKey() |
21 | - showLightbox() |
22 | - hideLightbox() |
23 | - initLightbox() |
24 | - addLoadEvent() |
25 | |
26 | Function Calls |
27 | - addLoadEvent(initLightbox) |
28 | |
29 | */ |
30 | |
31 | |
32 | |
33 | // |
34 | // Configuration |
35 | // |
36 | |
37 | // If you would like to use a custom loading image or close button reference them in the next two lines. |
38 | var loadingImage = '/images/risc_os_open/lightbox/loading.gif'; |
39 | var closeButton = '/images/risc_os_open/lightbox/close.gif'; |
40 | |
41 | |
42 | |
43 | |
44 | |
45 | // |
46 | // getPageScroll() |
47 | // Returns array with x,y page scroll values. |
48 | // Core code from - quirksmode.org |
49 | // |
50 | function getPageScroll(){ |
51 | |
52 | var yScroll; |
53 | |
54 | if (self.pageYOffset) { |
55 | yScroll = self.pageYOffset; |
56 | } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict |
57 | yScroll = document.documentElement.scrollTop; |
58 | } else if (document.body) {// all other Explorers |
59 | yScroll = document.body.scrollTop; |
60 | } |
61 | |
62 | arrayPageScroll = new Array('',yScroll) |
63 | return arrayPageScroll; |
64 | } |
65 | |
66 | |
67 | |
68 | // |
69 | // getPageSize() |
70 | // Returns array with page width, height and window width, height |
71 | // Core code from - quirksmode.org |
72 | // Edit for Firefox by pHaez |
73 | // |
74 | function getPageSize(){ |
75 | |
76 | var xScroll, yScroll; |
77 | |
78 | if (window.innerHeight && window.scrollMaxY) { |
79 | xScroll = document.body.scrollWidth; |
80 | yScroll = window.innerHeight + window.scrollMaxY; |
81 | } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac |
82 | xScroll = document.body.scrollWidth; |
83 | yScroll = document.body.scrollHeight; |
84 | } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari |
85 | xScroll = document.body.offsetWidth; |
86 | yScroll = document.body.offsetHeight; |
87 | } |
88 | |
89 | var windowWidth, windowHeight; |
90 | if (self.innerHeight) { // all except Explorer |
91 | windowWidth = self.innerWidth; |
92 | windowHeight = self.innerHeight; |
93 | } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode |
94 | windowWidth = document.documentElement.clientWidth; |
95 | windowHeight = document.documentElement.clientHeight; |
96 | } else if (document.body) { // other Explorers |
97 | windowWidth = document.body.clientWidth; |
98 | windowHeight = document.body.clientHeight; |
99 | } |
100 | |
101 | // for small pages with total height less then height of the viewport |
102 | if(yScroll < windowHeight){ |
103 | pageHeight = windowHeight; |
104 | } else { |
105 | pageHeight = yScroll; |
106 | } |
107 | |
108 | // for small pages with total width less then width of the viewport |
109 | if(xScroll < windowWidth){ |
110 | pageWidth = windowWidth; |
111 | } else { |
112 | pageWidth = xScroll; |
113 | } |
114 | |
115 | |
116 | arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) |
117 | return arrayPageSize; |
118 | } |
119 | |
120 | |
121 | // |
122 | // pause(numberMillis) |
123 | // Pauses code execution for specified time. Uses busy code, not good. |
124 | // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 |
125 | // |
126 | function pause(numberMillis) { |
127 | var now = new Date(); |
128 | var exitTime = now.getTime() + numberMillis; |
129 | while (true) { |
130 | now = new Date(); |
131 | if (now.getTime() > exitTime) |
132 | return; |
133 | } |
134 | } |
135 | |
136 | // |
137 | // getKey(key) |
138 | // Gets keycode. If 'x' is pressed then it hides the lightbox. |
139 | // |
140 | |
141 | function getKey(e){ |
142 | if (e == null) { // ie |
143 | keycode = event.keyCode; |
144 | } else { // mozilla |
145 | keycode = e.which; |
146 | } |
147 | key = String.fromCharCode(keycode).toLowerCase(); |
148 | |
149 | if(key == 'x'){ hideLightbox(); } |
150 | } |
151 | |
152 | |
153 | // |
154 | // listenKey() |
155 | // |
156 | function listenKey () { document.onkeypress = getKey; } |
157 | |
158 | |
159 | // |
160 | // showLightbox() |
161 | // Preloads images. Pleaces new image in lightbox then centers and displays. |
162 | // |
163 | function showLightbox(objLink) |
164 | { |
165 | // prep objects |
166 | var objOverlay = document.getElementById('overlay'); |
167 | var objLightbox = document.getElementById('lightbox'); |
168 | var objCaption = document.getElementById('lightboxCaption'); |
169 | var objImage = document.getElementById('lightboxImage'); |
170 | var objLoadingImage = document.getElementById('loadingImage'); |
171 | var objLightboxDetails = document.getElementById('lightboxDetails'); |
172 | |
173 | |
174 | var arrayPageSize = getPageSize(); |
175 | var arrayPageScroll = getPageScroll(); |
176 | |
177 | // center loadingImage if it exists |
178 | if (objLoadingImage) { |
179 | objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); |
180 | objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); |
181 | objLoadingImage.style.display = 'block'; |
182 | } |
183 | |
184 | // set height of Overlay to take up whole page and show |
185 | objOverlay.style.height = (arrayPageSize[1] + 'px'); |
186 | objOverlay.style.display = 'block'; |
187 | |
188 | // preload image |
189 | imgPreload = new Image(); |
190 | |
191 | imgPreload.onload=function(){ |
192 | objImage.src = objLink.href; |
193 | |
194 | // center lightbox and make sure that the top and left values are not negative |
195 | // and the image placed outside the viewport |
196 | var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); |
197 | var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); |
198 | |
199 | objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; |
200 | objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; |
201 | |
202 | |
203 | objLightboxDetails.style.width = imgPreload.width + 'px'; |
204 | |
205 | if(objLink.getAttribute('title')){ |
206 | objCaption.style.display = 'block'; |
207 | //objCaption.style.width = imgPreload.width + 'px'; |
208 | objCaption.innerHTML = objLink.getAttribute('title'); |
209 | } else { |
210 | objCaption.style.display = 'none'; |
211 | } |
212 | |
213 | // A small pause between the image loading and displaying is required with IE, |
214 | // this prevents the previous image displaying for a short burst causing flicker. |
215 | if (navigator.appVersion.indexOf("MSIE")!=-1){ |
216 | pause(250); |
217 | } |
218 | |
219 | if (objLoadingImage) { objLoadingImage.style.display = 'none'; } |
220 | |
221 | // Hide select boxes as they will 'peek' through the image in IE |
222 | selects = document.getElementsByTagName("select"); |
223 | for (i = 0; i != selects.length; i++) { |
224 | selects[i].style.visibility = "hidden"; |
225 | } |
226 | |
227 | |
228 | objLightbox.style.display = 'block'; |
229 | |
230 | // After image is loaded, update the overlay height as the new image might have |
231 | // increased the overall page height. |
232 | arrayPageSize = getPageSize(); |
233 | objOverlay.style.height = (arrayPageSize[1] + 'px'); |
234 | |
235 | // Check for 'x' keypress |
236 | listenKey(); |
237 | |
238 | return false; |
239 | } |
240 | |
241 | imgPreload.src = objLink.href; |
242 | |
243 | } |
244 | |
245 | |
246 | |
247 | |
248 | |
249 | // |
250 | // hideLightbox() |
251 | // |
252 | function hideLightbox() |
253 | { |
254 | // get objects |
255 | objOverlay = document.getElementById('overlay'); |
256 | objLightbox = document.getElementById('lightbox'); |
257 | |
258 | // hide lightbox and overlay |
259 | objOverlay.style.display = 'none'; |
260 | objLightbox.style.display = 'none'; |
261 | |
262 | // make select boxes visible |
263 | selects = document.getElementsByTagName("select"); |
264 | for (i = 0; i != selects.length; i++) { |
265 | selects[i].style.visibility = "visible"; |
266 | } |
267 | |
268 | // disable keypress listener |
269 | document.onkeypress = ''; |
270 | } |
271 | |
272 | |
273 | |
274 | |
275 | // |
276 | // initLightbox() |
277 | // Function runs on window load, going through link tags looking for rel="lightbox". |
278 | // These links receive onclick events that enable the lightbox display for their targets. |
279 | // The function also inserts html markup at the top of the page which will be used as a |
280 | // container for the overlay pattern and the inline image. |
281 | // |
282 | function initLightbox() |
283 | { |
284 | |
285 | if (!document.getElementsByTagName){ return; } |
286 | var anchors = document.getElementsByTagName("a"); |
287 | |
288 | // loop through all anchor tags |
289 | for (var i=0; i<anchors.length; i++){ |
290 | var anchor = anchors[i]; |
291 | |
292 | if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ |
293 | anchor.onclick = function () {showLightbox(this); return false;} |
294 | } |
295 | } |
296 | |
297 | // the rest of this code inserts html at the top of the page that looks like this: |
298 | // |
299 | // <div id="overlay"> |
300 | // <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a> |
301 | // </div> |
302 | // <div id="lightbox"> |
303 | // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image"> |
304 | // <img id="closeButton" /> |
305 | // <img id="lightboxImage" /> |
306 | // </a> |
307 | // <div id="lightboxDetails"> |
308 | // <div id="lightboxCaption"></div> |
309 | // <div id="keyboardMsg"></div> |
310 | // </div> |
311 | // </div> |
312 | |
313 | var objBody = document.getElementsByTagName("body").item(0); |
314 | |
315 | // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) |
316 | var objOverlay = document.createElement("div"); |
317 | objOverlay.setAttribute('id','overlay'); |
318 | objOverlay.onclick = function () {hideLightbox(); return false;} |
319 | objOverlay.style.display = 'none'; |
320 | objOverlay.style.position = 'absolute'; |
321 | objOverlay.style.top = '0'; |
322 | objOverlay.style.left = '0'; |
323 | objOverlay.style.zIndex = '90'; |
324 | objOverlay.style.width = '100%'; |
325 | objBody.insertBefore(objOverlay, objBody.firstChild); |
326 | |
327 | var arrayPageSize = getPageSize(); |
328 | var arrayPageScroll = getPageScroll(); |
329 | |
330 | // preload and create loader image |
331 | var imgPreloader = new Image(); |
332 | |
333 | // if loader image found, create link to hide lightbox and create loadingimage |
334 | imgPreloader.onload=function(){ |
335 | |
336 | var objLoadingImageLink = document.createElement("a"); |
337 | objLoadingImageLink.setAttribute('href','#'); |
338 | objLoadingImageLink.onclick = function () {hideLightbox(); return false;} |
339 | objOverlay.appendChild(objLoadingImageLink); |
340 | |
341 | var objLoadingImage = document.createElement("img"); |
342 | objLoadingImage.src = loadingImage; |
343 | objLoadingImage.setAttribute('id','loadingImage'); |
344 | objLoadingImage.style.position = 'absolute'; |
345 | objLoadingImage.style.zIndex = '150'; |
346 | objLoadingImageLink.appendChild(objLoadingImage); |
347 | |
348 | imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs |
349 | |
350 | return false; |
351 | } |
352 | |
353 | imgPreloader.src = loadingImage; |
354 | |
355 | // create lightbox div, same note about styles as above |
356 | var objLightbox = document.createElement("div"); |
357 | objLightbox.setAttribute('id','lightbox'); |
358 | objLightbox.style.display = 'none'; |
359 | objLightbox.style.position = 'absolute'; |
360 | objLightbox.style.zIndex = '100'; |
361 | objBody.insertBefore(objLightbox, objOverlay.nextSibling); |
362 | |
363 | // create link |
364 | var objLink = document.createElement("a"); |
365 | objLink.setAttribute('href','#'); |
366 | objLink.setAttribute('title','Click to close'); |
367 | objLink.onclick = function () {hideLightbox(); return false;} |
368 | objLightbox.appendChild(objLink); |
369 | |
370 | // preload and create close button image |
371 | var imgPreloadCloseButton = new Image(); |
372 | |
373 | // if close button image found, |
374 | imgPreloadCloseButton.onload=function(){ |
375 | |
376 | var objCloseButton = document.createElement("img"); |
377 | objCloseButton.src = closeButton; |
378 | objCloseButton.setAttribute('id','closeButton'); |
379 | objCloseButton.style.position = 'absolute'; |
380 | objCloseButton.style.zIndex = '200'; |
381 | objLink.appendChild(objCloseButton); |
382 | |
383 | return false; |
384 | } |
385 | |
386 | imgPreloadCloseButton.src = closeButton; |
387 | |
388 | // create image |
389 | var objImage = document.createElement("img"); |
390 | objImage.setAttribute('id','lightboxImage'); |
391 | objLink.appendChild(objImage); |
392 | |
393 | // create details div, a container for the caption and keyboard message |
394 | var objLightboxDetails = document.createElement("div"); |
395 | objLightboxDetails.setAttribute('id','lightboxDetails'); |
396 | objLightbox.appendChild(objLightboxDetails); |
397 | |
398 | // create caption |
399 | var objCaption = document.createElement("div"); |
400 | objCaption.setAttribute('id','lightboxCaption'); |
401 | objCaption.style.display = 'none'; |
402 | objLightboxDetails.appendChild(objCaption); |
403 | |
404 | // create keyboard message |
405 | var objKeyboardMsg = document.createElement("div"); |
406 | objKeyboardMsg.setAttribute('id','keyboardMsg'); |
407 | objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close'; |
408 | objLightboxDetails.appendChild(objKeyboardMsg); |
409 | |
410 | |
411 | } |
412 | |
413 | |
414 | |
415 | |
416 | // |
417 | // addLoadEvent() |
418 | // Adds event to window.onload without overwriting currently assigned onload functions. |
419 | // Function found at Simon Willison's weblog - http://simon.incutio.com/ |
420 | // |
421 | function addLoadEvent(func) |
422 | { |
423 | var oldonload = window.onload; |
424 | if (typeof window.onload != 'function'){ |
425 | window.onload = func; |
426 | } else { |
427 | window.onload = function(){ |
428 | oldonload(); |
429 | func(); |
430 | } |
431 | } |
432 | |
433 | } |
434 | |
435 | |
436 | |
437 | addLoadEvent(initLightbox); // run initLightbox onLoad |