root / drupal7 / sites / all / modules / lightbox2 / js / lightbox_lite.js @ 651307cd
1 |
/* $Id: lightbox_lite.js,v 1.1.2.2.2.19 2010/06/07 14:54:30 snpower Exp $ */
|
---|---|
2 |
|
3 |
/**
|
4 |
* Lightbox JS: Fullsize Image Overlays
|
5 |
* by Lokesh Dhakar - http://www.huddletogether.com
|
6 |
*
|
7 |
* For more information on this script, visit:
|
8 |
* http://huddletogether.com/projects/lightbox/
|
9 |
*
|
10 |
* This script is distributed via Drupal.org with permission from Lokesh Dhakar.
|
11 |
* Under GPL license.
|
12 |
* Mailto: bugzie@gmail.com
|
13 |
*/
|
14 |
|
15 |
// start jQuery block
|
16 |
(function ($) { |
17 |
//
|
18 |
// getPageScroll()
|
19 |
// Returns array with x,y page scroll values.
|
20 |
// Core code from - quirksmode.org
|
21 |
//
|
22 |
function getPageScroll() { |
23 |
|
24 |
var xScroll, yScroll;
|
25 |
|
26 |
if (self.pageYOffset) {
|
27 |
yScroll = self.pageYOffset; |
28 |
xScroll = self.pageXOffset; |
29 |
|
30 |
// Explorer 6 Strict
|
31 |
} |
32 |
else if (document.documentElement && document.documentElement.scrollTop) { |
33 |
yScroll = document.documentElement.scrollTop; |
34 |
xScroll = document.documentElement.scrollLeft; |
35 |
} |
36 |
else if (document.body) {// all other Explorers |
37 |
yScroll = document.body.scrollTop; |
38 |
xScroll = document.body.scrollLeft; |
39 |
} |
40 |
|
41 |
arrayPageScroll = [xScroll, yScroll]; |
42 |
return arrayPageScroll;
|
43 |
} |
44 |
|
45 |
|
46 |
|
47 |
// getPageSize()
|
48 |
// Returns array with page width, height and window width, height
|
49 |
// Core code from - quirksmode.org
|
50 |
// Edit for Firefox by pHaez
|
51 |
function getPageSize() { |
52 |
|
53 |
var xScroll, yScroll;
|
54 |
|
55 |
if (window.innerHeight && window.scrollMaxY) {
|
56 |
xScroll = window.innerWidth + window.scrollMaxX; |
57 |
yScroll = window.innerHeight + window.scrollMaxY; |
58 |
// all but Explorer Mac
|
59 |
} |
60 |
else if (document.body.scrollHeight > document.body.offsetHeight) { |
61 |
xScroll = document.body.scrollWidth; |
62 |
yScroll = document.body.scrollHeight; |
63 |
// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
64 |
} |
65 |
else {
|
66 |
xScroll = document.body.offsetWidth; |
67 |
yScroll = document.body.offsetHeight; |
68 |
} |
69 |
|
70 |
var windowWidth, windowHeight;
|
71 |
if (self.innerHeight) { // all except Explorer |
72 |
if (document.documentElement.clientHeight) {
|
73 |
windowWidth = document.documentElement.clientWidth; |
74 |
} |
75 |
else {
|
76 |
windowWidth = self.innerWidth; |
77 |
} |
78 |
windowHeight = self.innerHeight; |
79 |
} |
80 |
else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode |
81 |
windowWidth = document.documentElement.clientWidth; |
82 |
windowHeight = document.documentElement.clientHeight; |
83 |
} |
84 |
else if (document.body) { // other Explorers |
85 |
windowWidth = document.body.clientWidth; |
86 |
windowHeight = document.body.clientHeight; |
87 |
} |
88 |
|
89 |
// for small pages with total height less then height of the viewport
|
90 |
if (yScroll < windowHeight) {
|
91 |
pageHeight = windowHeight; |
92 |
} |
93 |
else {
|
94 |
pageHeight = yScroll; |
95 |
} |
96 |
|
97 |
// for small pages with total width less then width of the viewport
|
98 |
if (xScroll < windowWidth) {
|
99 |
pageWidth = xScroll; |
100 |
} |
101 |
else {
|
102 |
pageWidth = windowWidth; |
103 |
} |
104 |
|
105 |
|
106 |
arrayPageSize = [pageWidth, pageHeight, windowWidth, windowHeight]; |
107 |
return arrayPageSize;
|
108 |
} |
109 |
|
110 |
|
111 |
// pause(numberMillis)
|
112 |
function pause(ms) { |
113 |
var date = new Date(); |
114 |
var curDate = null; |
115 |
do { curDate = new Date(); } |
116 |
while (curDate - date < ms);
|
117 |
} |
118 |
|
119 |
// hideLightbox()
|
120 |
function hideLightbox() { |
121 |
// get objects
|
122 |
objOverlay = document.getElementById('lightbox2-overlay');
|
123 |
objLightbox = document.getElementById('lightbox');
|
124 |
|
125 |
// hide lightbox and overlay
|
126 |
objOverlay.style.display = 'none';
|
127 |
objLightbox.style.display = 'none';
|
128 |
|
129 |
// make select boxes visible
|
130 |
selects = document.getElementsByTagName("select");
|
131 |
for (i = 0; i != selects.length; i++) { |
132 |
if (selects[i].style.display != "none") { |
133 |
selects[i].style.visibility = "visible";
|
134 |
} |
135 |
} |
136 |
|
137 |
// make flash objects visible
|
138 |
embed = document.getElementsByTagName("embed");
|
139 |
for (i = 0; i != embed.length; i++) { |
140 |
if (embed[i].style.display != "none") { |
141 |
embed[i].style.visibility = "visible";
|
142 |
} |
143 |
} |
144 |
objects = document.getElementsByTagName("object");
|
145 |
for (i = 0; i != objects.length; i++) { |
146 |
if (objects[i].style.display != "none") { |
147 |
objects[i].style.visibility = "visible";
|
148 |
} |
149 |
} |
150 |
|
151 |
// disable keydown listener
|
152 |
document.onkeydown = '';
|
153 |
} |
154 |
|
155 |
|
156 |
// getKey(key)
|
157 |
// Gets keycode. If 'x' is pressed then it hides the lightbox.
|
158 |
function getKey(e) { |
159 |
if (e === null) { // ie |
160 |
keycode = event.keyCode; |
161 |
escapeKey = 27;
|
162 |
} |
163 |
else { // mozilla |
164 |
keycode = e.keyCode; |
165 |
escapeKey = e.DOM_VK_ESCAPE; |
166 |
} |
167 |
key = String.fromCharCode(keycode).toLowerCase(); |
168 |
|
169 |
if (key == 'x' || key == 'c' || keycode == escapeKey) { hideLightbox(); } |
170 |
} |
171 |
|
172 |
|
173 |
// listenKey()
|
174 |
function listenKey () { document.onkeydown = getKey; } |
175 |
|
176 |
|
177 |
function imgLoadingError(image, objImage, objLink) { |
178 |
var settings = Drupal.settings.lightbox2;
|
179 |
image.src = settings.default_image; |
180 |
objImage.src = settings.default_image; |
181 |
objLink.href = settings.default_image; |
182 |
} |
183 |
|
184 |
|
185 |
// showLightbox()
|
186 |
// Preloads images. Pleaces new image in lightbox then centers and displays.
|
187 |
function showLightbox(objLink) { |
188 |
var settings = Drupal.settings.lightbox2;
|
189 |
// prep objects
|
190 |
var objOverlay = document.getElementById('lightbox2-overlay'); |
191 |
var objLightbox = document.getElementById('lightbox'); |
192 |
var objCaption = document.getElementById('lightboxCaption'); |
193 |
var objImage = document.getElementById('lightboxImage'); |
194 |
var objLoadingImage = document.getElementById('loadingImage'); |
195 |
var objLightboxDetails = document.getElementById('lightboxDetails'); |
196 |
|
197 |
var arrayPageSize = getPageSize();
|
198 |
var arrayPageScroll = getPageScroll();
|
199 |
|
200 |
// set height of Overlay to take up whole page and show
|
201 |
objOverlay.style.height = (arrayPageSize[1] + 'px'); |
202 |
objOverlay.style.display = 'block';
|
203 |
objOverlay.style.opacity = settings.overlay_opacity; |
204 |
objOverlay.style.backgroundColor = '#' + settings.overlay_color;
|
205 |
|
206 |
// preload image
|
207 |
imgPreload = new Image();
|
208 |
imgPreload.onerror = function() { imgLoadingError(this, objImage, objLink); }; |
209 |
|
210 |
imgPreload.onload = function() { |
211 |
objImage.src = objLink.href; |
212 |
|
213 |
// center lightbox and make sure that the top and left values are not
|
214 |
// negative and the image placed outside the viewport
|
215 |
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); |
216 |
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); |
217 |
|
218 |
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; |
219 |
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; |
220 |
|
221 |
|
222 |
//objLightboxDetails.style.width = imgPreload.width + 'px';
|
223 |
objLightbox.style.width = imgPreload.width + 'px';
|
224 |
|
225 |
if (objLink.getAttribute('title')) { |
226 |
objCaption.style.display = 'block';
|
227 |
//objCaption.style.width = imgPreload.width + 'px';
|
228 |
objCaption.innerHTML = objLink.getAttribute('title');
|
229 |
} |
230 |
else {
|
231 |
objCaption.style.display = 'none';
|
232 |
} |
233 |
|
234 |
// A small pause between the image loading and displaying is required with
|
235 |
// IE, this prevents the previous image displaying for a short burst
|
236 |
// causing flicker.
|
237 |
if (navigator.appVersion.indexOf("MSIE") != -1) { |
238 |
pause(250);
|
239 |
} |
240 |
|
241 |
if (objLoadingImage) { objLoadingImage.style.display = 'none'; } |
242 |
|
243 |
// Hide select boxes as they will 'peek' through the image in IE
|
244 |
selects = document.getElementsByTagName("select");
|
245 |
for (i = 0; i != selects.length; i++) { |
246 |
if (selects[i].style.display != "none") { |
247 |
selects[i].style.visibility = "hidden";
|
248 |
} |
249 |
} |
250 |
|
251 |
// Hide flash objects as they will 'peek' through the image in IE
|
252 |
embed = document.getElementsByTagName("embed");
|
253 |
for (i = 0; i != embed.length; i++) { |
254 |
if (embed[i].style.display != "none") { |
255 |
embed[i].style.visibility = "hidden";
|
256 |
} |
257 |
} |
258 |
objects = document.getElementsByTagName("object");
|
259 |
for (i = 0; i != objects.length; i++) { |
260 |
if (objects[i].style.display != "none") { |
261 |
objects[i].style.visibility = "hidden";
|
262 |
} |
263 |
} |
264 |
|
265 |
objLightbox.style.display = 'block';
|
266 |
|
267 |
// After image is loaded, update the overlay height as the new image might
|
268 |
// have increased the overall page height.
|
269 |
arrayPageSize = getPageSize(); |
270 |
objOverlay.style.height = (arrayPageSize[1] + 'px'); |
271 |
|
272 |
// Check for 'x' keydown
|
273 |
listenKey(); |
274 |
|
275 |
return false; |
276 |
}; |
277 |
|
278 |
imgPreload.src = objLink.href; |
279 |
|
280 |
} |
281 |
|
282 |
|
283 |
|
284 |
// initLightbox()
|
285 |
// Function runs on window load, going through link tags looking for
|
286 |
// rel="lightbox". These links receive onclick events that enable the lightbox
|
287 |
// display for their targets. The function also inserts html markup at the top
|
288 |
// of the page which will be used as a container for the overlay pattern and
|
289 |
// the inline image.
|
290 |
function initLightbox() { |
291 |
|
292 |
if (!document.getElementsByTagName) { return; } |
293 |
var anchors = document.getElementsByTagName("a"); |
294 |
|
295 |
// loop through all anchor tags
|
296 |
for (var i = 0; i < anchors.length; i++) { |
297 |
var anchor = anchors[i];
|
298 |
var relAttribute = String(anchor.getAttribute("rel")); |
299 |
|
300 |
if (anchor.getAttribute("href") && relAttribute.toLowerCase().match("lightbox")) { |
301 |
$(anchor).click(function(e) { showLightbox(this); if (e.preventDefault) { e.preventDefault(); } return false; }); |
302 |
} |
303 |
} |
304 |
|
305 |
// the rest of this code inserts html at the top of the page that looks like
|
306 |
// this:
|
307 |
// <div id="lightbox2-overlay">
|
308 |
// <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
|
309 |
// </div>
|
310 |
// <div id="lightbox">
|
311 |
// <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
|
312 |
// <img id="closeButton" />
|
313 |
// <img id="lightboxImage" />
|
314 |
// </a>
|
315 |
// <div id="lightboxDetails">
|
316 |
// <div id="lightboxCaption"></div>
|
317 |
// <div id="keyboardMsg"></div>
|
318 |
// </div>
|
319 |
// </div>
|
320 |
|
321 |
var objBody = document.getElementsByTagName("body").item(0); |
322 |
|
323 |
// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
|
324 |
var objOverlay = document.createElement("div"); |
325 |
objOverlay.setAttribute('id', 'lightbox2-overlay'); |
326 |
objOverlay.onclick = function () { hideLightbox(); return false; }; |
327 |
objOverlay.style.display = 'none';
|
328 |
objOverlay.style.position = 'absolute';
|
329 |
objOverlay.style.top = '0';
|
330 |
objOverlay.style.left = '0';
|
331 |
objOverlay.style.zIndex = '90';
|
332 |
objOverlay.style.width = '100%';
|
333 |
objBody.insertBefore(objOverlay, objBody.firstChild); |
334 |
|
335 |
var arrayPageSize = getPageSize();
|
336 |
var arrayPageScroll = getPageScroll();
|
337 |
|
338 |
// create loader image
|
339 |
var objLoadingImage = document.createElement("span"); |
340 |
objLoadingImage.setAttribute('id', 'loadingImage'); |
341 |
objOverlay.appendChild(objLoadingImage); |
342 |
|
343 |
// create lightbox div, same note about styles as above
|
344 |
var objLightbox = document.createElement("div"); |
345 |
objLightbox.setAttribute('id', 'lightbox'); |
346 |
objLightbox.style.display = 'none';
|
347 |
objLightbox.style.position = 'absolute';
|
348 |
objLightbox.style.zIndex = '100';
|
349 |
objBody.insertBefore(objLightbox, objOverlay.nextSibling); |
350 |
|
351 |
// create link
|
352 |
var objLink = document.createElement("a"); |
353 |
objLink.setAttribute('href', '#'); |
354 |
objLink.setAttribute('title', 'Click to close'); |
355 |
objLink.onclick = function () { hideLightbox(); return false; }; |
356 |
objLightbox.appendChild(objLink); |
357 |
|
358 |
// create close button image
|
359 |
var objCloseButton = document.createElement("span"); |
360 |
objCloseButton.setAttribute('id', 'closeButton'); |
361 |
objLink.appendChild(objCloseButton); |
362 |
|
363 |
// create image
|
364 |
var objImage = document.createElement("img"); |
365 |
objImage.setAttribute('id', 'lightboxImage'); |
366 |
objLink.appendChild(objImage); |
367 |
|
368 |
// create details div, a container for the caption and keyboard message
|
369 |
var objLightboxDetails = document.createElement("div"); |
370 |
objLightboxDetails.setAttribute('id', 'lightboxDetails'); |
371 |
objLightbox.appendChild(objLightboxDetails); |
372 |
|
373 |
// create caption
|
374 |
var objCaption = document.createElement("div"); |
375 |
objCaption.setAttribute('id', 'lightboxCaption'); |
376 |
objCaption.style.display = 'none';
|
377 |
objLightboxDetails.appendChild(objCaption); |
378 |
|
379 |
// create keyboard message
|
380 |
var settings = Drupal.settings.lightbox2;
|
381 |
var objKeyboardMsg = document.createElement("div"); |
382 |
objKeyboardMsg.setAttribute('id', 'keyboardMsg'); |
383 |
objKeyboardMsg.innerHTML = settings.lite_press_x_close; |
384 |
objLightboxDetails.appendChild(objKeyboardMsg); |
385 |
} |
386 |
|
387 |
Drupal.behaviors.initLightbox2 = { |
388 |
attach: function(context) { |
389 |
initLightbox(); |
390 |
} |
391 |
}; |
392 |
|
393 |
//End jQuery block
|
394 |
}(jQuery)); |