A hacked version of lightbox that uses an IFrame when the url points to anything other than a jpeg. Also, added some syntax that allows a link to specify the height of the lightbox like this:
1 <a href="http://google.com" rel="lightbox|300">LB with height 300</a>
1
2 // -----------------------------------------------------------------------------------
3 //
4 // Lightbox v2.02
5 // by Lokesh Dhakar - http://www.huddletogether.com
6 // 3/31/06
7 //
8 // hacked to use iframe for non-jpeg urls
9 // by Tim Morgan - http://timmorgan.org
10 // 8/9/06
11 //
12 // For more information on this script, visit:
13 // http://huddletogether.com/projects/lightbox2/
14 // ...and...
15 // http://mpov.wordpress.com/2006/08/08/lightbox-with-iframes/
16 //
17 // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
18 //
19 // Credit also due to those who have helped, inspired, and made their code available to the public.
20 // Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
21 //
22 //
23 // -----------------------------------------------------------------------------------
24 /*
25
26 Table of Contents
27 -----------------
28 Configuration
29 Global Variables
30
31 Extending Built-in Objects
32 - Object.extend(Element)
33 - Array.prototype.removeDuplicates()
34 - Array.prototype.empty()
35
36 Lightbox Class Declaration
37 - initialize()
38 - start()
39 - changeImage()
40 - resizeImageContainer()
41 - showImage()
42 - updateDetails()
43 - updateNav()
44 - enableKeyboardNav()
45 - disableKeyboardNav()
46 - keyboardAction()
47 - preloadNeighborImages()
48 - end()
49
50 Miscellaneous Functions
51 - getPageScroll()
52 - getPageSize()
53 - getKey()
54 - listenKey()
55 - showSelectBoxes()
56 - hideSelectBoxes()
57 - pause()
58 - initLightbox()
59
60 Function Calls
61 - addLoadEvent(initLightbox)
62
63 */
64 // -----------------------------------------------------------------------------------
65
66 //
67 // Configuration
68 //
69 var fileLoadingImage = "../images/loading.gif";
70 var fileBottomNavCloseImage = "../images/closelabel.gif";
71
72 var iframeWidth = 400;
73 var iframeHeight = 450;
74
75 var resizeSpeed = 10; // controls the speed of the image resizing (1=slowest and 10=fastest)
76
77 var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
78
79 // -----------------------------------------------------------------------------------
80
81 //
82 // Global Variables
83 //
84 var imageArray = new Array;
85 var activeImage;
86
87 if(resizeSpeed > 10){ resizeSpeed = 10;}
88 if(resizeSpeed < 1){ resizeSpeed = 1;}
89 resizeDuration = (11 - resizeSpeed) * 0.15;
90
91 // -----------------------------------------------------------------------------------
92
93 //
94 // Additional methods for Element added by SU, Couloir
95 // - further additions by Lokesh Dhakar (huddletogether.com)
96 //
97 Object.extend(Element, {
98 getWidth: function(element) {
99 element = $(element);
100 return element.offsetWidth;
101 },
102 setWidth: function(element,w) {
103 element = $(element);
104 element.style.width = w +"px";
105 },
106 setHeight: function(element,h) {
107 element = $(element);
108 element.style.height = h +"px";
109 },
110 setTop: function(element,t) {
111 element = $(element);
112 element.style.top = t +"px";
113 },
114 setSrc: function(element,src) {
115 element = $(element);
116 element.src = src;
117 },
118 setHref: function(element,href) {
119 element = $(element);
120 element.href = href;
121 },
122 setInnerHTML: function(element,content) {
123 element = $(element);
124 element.innerHTML = content;
125 }
126 });
127
128 // -----------------------------------------------------------------------------------
129
130 //
131 // Extending built-in Array object
132 // - array.removeDuplicates()
133 // - array.empty()
134 //
135 Array.prototype.removeDuplicates = function () {
136 for(i = 1; i < this.length; i++){
137 if(this[i][0] == this[i-1][0]){
138 this.splice(i,1);
139 }
140 }
141 }
142
143 // -----------------------------------------------------------------------------------
144
145 Array.prototype.empty = function () {
146 for(i = 0; i <= this.length; i++){
147 this.shift();
148 }
149 }
150
151 // -----------------------------------------------------------------------------------
152
153 //
154 // Lightbox Class Declaration
155 // - initialize()
156 // - start()
157 // - changeImage()
158 // - resizeImageContainer()
159 // - showImage()
160 // - updateDetails()
161 // - updateNav()
162 // - enableKeyboardNav()
163 // - disableKeyboardNav()
164 // - keyboardNavAction()
165 // - preloadNeighborImages()
166 // - end()
167 //
168 // Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
169 //
170 var Lightbox = Class.create();
171
172 Lightbox.prototype = {
173
174 // initialize()
175 // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
176 // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
177 // the function inserts html at the bottom of the page which is used to display the shadow
178 // overlay and the image container.
179 //
180 initialize: function() {
181 if (!document.getElementsByTagName){ return; }
182 var anchors = document.getElementsByTagName('a');
183
184 // loop through all anchor tags
185 for (var i=0; i<anchors.length; i++){
186 var anchor = anchors[i];
187
188 var relAttribute = String(anchor.getAttribute('rel'));
189
190 // use the string.match() method to catch 'lightbox' references in the rel attribute
191 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
192 anchor.onclick = function () {myLightbox.start(this); return false;}
193 }
194 }
195
196 // The rest of this code inserts html at the bottom of the page that looks similar to this:
197 //
198 // <div id="overlay"></div>
199 // <div id="lightbox">
200 // <div id="outerImageContainer">
201 // <div id="imageContainer">
202 // <img id="lightboxImage">
203 // <div style="" id="hoverNav">
204 // <a href="#" id="prevLink"></a>
205 // <a href="#" id="nextLink"></a>
206 // </div>
207 // <div id="loading">
208 // <a href="#" id="loadingLink">
209 // <img src="images/loading.gif">
210 // </a>
211 // </div>
212 // </div>
213 // </div>
214 // <div id="imageDataContainer">
215 // <div id="imageData">
216 // <div id="imageDetails">
217 // <span id="caption"></span>
218 // <span id="numberDisplay"></span>
219 // </div>
220 // <div id="bottomNav">
221 // <a href="#" id="bottomNavClose">
222 // <img src="images/close.gif">
223 // </a>
224 // </div>
225 // </div>
226 // </div>
227 // </div>
228
229
230 var objBody = document.getElementsByTagName("body").item(0);
231
232 var objOverlay = document.createElement("div");
233 objOverlay.setAttribute('id','overlay');
234 objOverlay.style.display = 'none';
235 //objOverlay.onclick = function() { myLightbox.end(); return false; }
236 objBody.appendChild(objOverlay);
237
238 var objLightbox = document.createElement("div");
239 objLightbox.setAttribute('id','lightbox');
240 objLightbox.style.display = 'none';
241 objBody.appendChild(objLightbox);
242
243 var objOuterImageContainer = document.createElement("div");
244 objOuterImageContainer.setAttribute('id','outerImageContainer');
245 objLightbox.appendChild(objOuterImageContainer);
246
247 var objImageContainer = document.createElement("div");
248 objImageContainer.setAttribute('id','imageContainer');
249 objOuterImageContainer.appendChild(objImageContainer);
250
251 var objLightboxIframe = document.createElement("iframe");
252 objLightboxIframe.setAttribute('id','lightboxIframe');
253 objLightboxIframe.style.width = iframeWidth + 'px';
254 objLightboxIframe.style.height = iframeHeight + 'px';
255 objLightboxIframe.style.border = 'none';
256 objImageContainer.appendChild(objLightboxIframe);
257
258 var objLightboxImage = document.createElement("img");
259 objLightboxImage.setAttribute('id','lightboxImage');
260 objImageContainer.appendChild(objLightboxImage);
261
262 var objHoverNav = document.createElement("div");
263 objHoverNav.setAttribute('id','hoverNav');
264 objImageContainer.appendChild(objHoverNav);
265
266 var objPrevLink = document.createElement("a");
267 objPrevLink.setAttribute('id','prevLink');
268 objPrevLink.setAttribute('href','#');
269 objHoverNav.appendChild(objPrevLink);
270
271 var objNextLink = document.createElement("a");
272 objNextLink.setAttribute('id','nextLink');
273 objNextLink.setAttribute('href','#');
274 objHoverNav.appendChild(objNextLink);
275
276 var objLoading = document.createElement("div");
277 objLoading.setAttribute('id','loading');
278 objImageContainer.appendChild(objLoading);
279
280 var objLoadingLink = document.createElement("a");
281 objLoadingLink.setAttribute('id','loadingLink');
282 objLoadingLink.setAttribute('href','#');
283 objLoadingLink.onclick = function() { myLightbox.end(); return false; }
284 objLoading.appendChild(objLoadingLink);
285
286 var objLoadingImage = document.createElement("img");
287 objLoadingImage.setAttribute('src', fileLoadingImage);
288 objLoadingLink.appendChild(objLoadingImage);
289
290 var objImageDataContainer = document.createElement("div");
291 objImageDataContainer.setAttribute('id','imageDataContainer');
292 objImageDataContainer.className = 'clearfix';
293 objLightbox.appendChild(objImageDataContainer);
294
295 var objImageData = document.createElement("div");
296 objImageData.setAttribute('id','imageData');
297 objImageDataContainer.appendChild(objImageData);
298
299 var objImageDetails = document.createElement("div");
300 objImageDetails.setAttribute('id','imageDetails');
301 objImageData.appendChild(objImageDetails);
302
303 var objCaption = document.createElement("span");
304 objCaption.setAttribute('id','caption');
305 objImageDetails.appendChild(objCaption);
306
307 var objNumberDisplay = document.createElement("span");
308 objNumberDisplay.setAttribute('id','numberDisplay');
309 objImageDetails.appendChild(objNumberDisplay);
310
311 var objBottomNav = document.createElement("div");
312 objBottomNav.setAttribute('id','bottomNav');
313 objImageData.appendChild(objBottomNav);
314
315 var objBottomNavCloseLink = document.createElement("a");
316 objBottomNavCloseLink.setAttribute('id','bottomNavClose');
317 objBottomNavCloseLink.setAttribute('href','#');
318 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
319 objBottomNav.appendChild(objBottomNavCloseLink);
320
321 var objBottomNavCloseImage = document.createElement("img");
322 objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
323 objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
324 },
325
326 //
327 // start()
328 // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
329 //
330 start: function(imageLink) {
331
332 hideSelectBoxes();
333
334 // stretch overlay to fill page and fade in
335 var arrayPageSize = getPageSize();
336 Element.setHeight('overlay', arrayPageSize[1]);
337 new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
338
339 imageArray = [];
340 imageNum = 0;
341
342 if (!document.getElementsByTagName){ return; }
343 var anchors = document.getElementsByTagName('a');
344
345 var rel = imageLink.getAttribute('rel');
346
347 // if image is NOT part of a set..
348 if(!rel.match(/\[/)){
349 // add single image to imageArray
350 imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
351 if(rel.match(/\|/)) iframeHeight = parseInt(rel.split(/\|/)[1]);
352 } else {
353 // if image is part of a set..
354
355 // loop through anchors, find other images in set, and add them to imageArray
356 for (var i=0; i<anchors.length; i++){
357 var anchor = anchors[i];
358 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
359 imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
360 }
361 }
362 imageArray.removeDuplicates();
363 while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
364 }
365
366 // calculate top offset for the lightbox and display
367 var arrayPageSize = getPageSize();
368 var arrayPageScroll = getPageScroll();
369 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
370
371 Element.setTop('lightbox', lightboxTop);
372 Element.show('lightbox');
373
374 this.changeImage(imageNum);
375 },
376
377 //
378 // changeImage()
379 // Hide most elements and preload image in preparation for resizing image container.
380 //
381 changeImage: function(imageNum) {
382
383 activeImage = imageNum; // update global var
384
385 // hide elements during transition
386 Element.show('loading');
387 Element.hide('lightboxImage');
388 Element.hide('lightboxIframe');
389 Element.hide('hoverNav');
390 Element.hide('prevLink');
391 Element.hide('nextLink');
392 Element.hide('imageDataContainer');
393 Element.hide('numberDisplay');
394
395 if(imageArray[activeImage][0].match(/\.jpg$/)) {
396
397 this.content_is_image = true;
398
399 imgPreloader = new Image();
400
401 // once image is preloaded, resize image container
402 imgPreloader.onload=function(){
403 Element.setSrc('lightboxImage', imageArray[activeImage][0]);
404 myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
405 }
406 imgPreloader.src = imageArray[activeImage][0];
407
408 } else {
409 this.content_is_image = false;
410 Element.setSrc('lightboxIframe', imageArray[activeImage][0]);
411 myLightbox.resizeImageContainer(iframeWidth, iframeHeight);
412 }
413 },
414
415 //
416 // resizeImageContainer()
417 //
418 resizeImageContainer: function( imgWidth, imgHeight) {
419
420 $('lightboxIframe').style.height = iframeHeight + 'px';
421
422 // get c
