1 //***********************************************************************************************************************************/
\r
4 // Author: Markus F. Hay
\r
5 // Website: http://www.dolem.com/lytebox
\r
6 // Date: October 2, 2007
\r
7 // License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
\r
8 // Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
\r
9 // * Firefox: 2.0.0.7, 1.5.0.12
\r
10 // * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
\r
13 // Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62
\r
14 // * v3.22 (10/02/07)
\r
15 // * v3.21 (09/30/07)
\r
16 // * v3.20 (07/12/07)
\r
17 // * v3.10 (05/28/07)
\r
18 // * v3.00 (05/15/07)
\r
19 // * v2.02 (11/13/06)
\r
21 // Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
\r
22 // information please visit http://huddletogether.com/projects/lightbox2/
\r
23 //***********************************************************************************************************************************/
\r
24 Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
\r
25 Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
\r
26 String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }
\r
28 function LyteBox() {
\r
29 /*** Start Global Configuration ***/
\r
30 this.theme = 'grey'; // themes: grey (default), red, green, blue, gold
\r
31 this.hideFlash = true; // controls whether or not Flash objects should be hidden
\r
32 this.outerBorder = true; // controls whether to show the outer grey (or theme) border
\r
33 this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)
\r
34 this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay
\r
35 this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
\r
36 this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
\r
37 this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
\r
39 this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
\r
40 /*** End Global Configuration ***/
\r
42 /*** Configure Slideshow Options ***/
\r
43 this.slideInterval = 4000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
\r
44 this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide
\r
45 this.showClose = true; // true to display the Close button, false to hide
\r
46 this.showDetails = true; // true to display image details (caption, count), false to hide
\r
47 this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide
\r
48 this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open
\r
49 this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked
\r
50 this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked
\r
51 /*** End Slideshow Configuration ***/
\r
53 if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
\r
54 if(this.resizeSpeed < 1) { resizeSpeed = 1; }
\r
55 this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
\r
56 this.resizeWTimerArray = new Array();
\r
57 this.resizeWTimerCount = 0;
\r
58 this.resizeHTimerArray = new Array();
\r
59 this.resizeHTimerCount = 0;
\r
60 this.showContentTimerArray = new Array();
\r
61 this.showContentTimerCount = 0;
\r
62 this.overlayTimerArray = new Array();
\r
63 this.overlayTimerCount = 0;
\r
64 this.imageTimerArray = new Array();
\r
65 this.imageTimerCount = 0;
\r
66 this.timerIDArray = new Array();
\r
67 this.timerIDCount = 0;
\r
68 this.slideshowIDArray = new Array();
\r
69 this.slideshowIDCount = 0;
\r
70 this.imageArray = new Array();
\r
71 this.activeImage = null;
\r
72 this.slideArray = new Array();
\r
73 this.activeSlide = null;
\r
74 this.frameArray = new Array();
\r
75 this.activeFrame = null;
\r
77 this.isSlideshow = false;
\r
78 this.isLyteframe = false;
\r
81 this.ie = (document.all && !window.opera) ? true : false;
\r
86 this.ie7 = (this.ie && window.XMLHttpRequest);
\r
89 LyteBox.prototype.initialize = function() {
\r
90 this.updateLyteboxItems();
\r
91 var objBody = this.doc.getElementsByTagName("body").item(0);
\r
92 if (this.doc.getElementById('lbOverlay')) {
\r
93 objBody.removeChild(this.doc.getElementById("lbOverlay"));
\r
94 objBody.removeChild(this.doc.getElementById("lbMain"));
\r
96 var objOverlay = this.doc.createElement("div");
\r
97 objOverlay.setAttribute('id','lbOverlay');
\r
98 objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
99 if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {
\r
100 objOverlay.style.position = 'absolute';
\r
102 objOverlay.style.display = 'none';
\r
103 objBody.appendChild(objOverlay);
\r
104 var objLytebox = this.doc.createElement("div");
\r
105 objLytebox.setAttribute('id','lbMain');
\r
106 objLytebox.style.display = 'none';
\r
107 objBody.appendChild(objLytebox);
\r
108 var objOuterContainer = this.doc.createElement("div");
\r
109 objOuterContainer.setAttribute('id','lbOuterContainer');
\r
110 objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
111 objLytebox.appendChild(objOuterContainer);
\r
112 var objIframeContainer = this.doc.createElement("div");
\r
113 objIframeContainer.setAttribute('id','lbIframeContainer');
\r
114 objIframeContainer.style.display = 'none';
\r
115 objOuterContainer.appendChild(objIframeContainer);
\r
116 var objIframe = this.doc.createElement("iframe");
\r
117 objIframe.setAttribute('id','lbIframe');
\r
118 objIframe.setAttribute('name','lbIframe');
\r
119 objIframe.style.display = 'none';
\r
120 objIframeContainer.appendChild(objIframe);
\r
121 var objImageContainer = this.doc.createElement("div");
\r
122 objImageContainer.setAttribute('id','lbImageContainer');
\r
123 objOuterContainer.appendChild(objImageContainer);
\r
124 var objLyteboxImage = this.doc.createElement("img");
\r
125 objLyteboxImage.setAttribute('id','lbImage');
\r
126 objImageContainer.appendChild(objLyteboxImage);
\r
127 var objLoading = this.doc.createElement("div");
\r
128 objLoading.setAttribute('id','lbLoading');
\r
129 objOuterContainer.appendChild(objLoading);
\r
130 var objDetailsContainer = this.doc.createElement("div");
\r
131 objDetailsContainer.setAttribute('id','lbDetailsContainer');
\r
132 objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
133 objLytebox.appendChild(objDetailsContainer);
\r
134 var objDetailsData =this.doc.createElement("div");
\r
135 objDetailsData.setAttribute('id','lbDetailsData');
\r
136 objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
137 objDetailsContainer.appendChild(objDetailsData);
\r
138 var objDetails = this.doc.createElement("div");
\r
139 objDetails.setAttribute('id','lbDetails');
\r
140 objDetailsData.appendChild(objDetails);
\r
141 var objCaption = this.doc.createElement("span");
\r
142 objCaption.setAttribute('id','lbCaption');
\r
143 objDetails.appendChild(objCaption);
\r
144 var objHoverNav = this.doc.createElement("div");
\r
145 objHoverNav.setAttribute('id','lbHoverNav');
\r
146 objImageContainer.appendChild(objHoverNav);
\r
147 var objBottomNav = this.doc.createElement("div");
\r
148 objBottomNav.setAttribute('id','lbBottomNav');
\r
149 objDetailsData.appendChild(objBottomNav);
\r
150 var objPrev = this.doc.createElement("a");
\r
151 objPrev.setAttribute('id','lbPrev');
\r
152 objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
153 objPrev.setAttribute('href','#');
\r
154 objHoverNav.appendChild(objPrev);
\r
155 var objNext = this.doc.createElement("a");
\r
156 objNext.setAttribute('id','lbNext');
\r
157 objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
158 objNext.setAttribute('href','#');
\r
159 objHoverNav.appendChild(objNext);
\r
160 var objNumberDisplay = this.doc.createElement("span");
\r
161 objNumberDisplay.setAttribute('id','lbNumberDisplay');
\r
162 objDetails.appendChild(objNumberDisplay);
\r
163 var objNavDisplay = this.doc.createElement("span");
\r
164 objNavDisplay.setAttribute('id','lbNavDisplay');
\r
165 objNavDisplay.style.display = 'none';
\r
166 objDetails.appendChild(objNavDisplay);
\r
167 var objClose = this.doc.createElement("a");
\r
168 objClose.setAttribute('id','lbClose');
\r
169 objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
170 objClose.setAttribute('href','#');
\r
171 objBottomNav.appendChild(objClose);
\r
172 var objPause = this.doc.createElement("a");
\r
173 objPause.setAttribute('id','lbPause');
\r
174 objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
175 objPause.setAttribute('href','#');
\r
176 objPause.style.display = 'none';
\r
177 objBottomNav.appendChild(objPause);
\r
178 var objPlay = this.doc.createElement("a");
\r
179 objPlay.setAttribute('id','lbPlay');
\r
180 objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
181 objPlay.setAttribute('href','#');
\r
182 objPlay.style.display = 'none';
\r
183 objBottomNav.appendChild(objPlay);
\r
185 LyteBox.prototype.updateLyteboxItems = function() {
\r
186 var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
\r
187 for (var i = 0; i < anchors.length; i++) {
\r
188 var anchor = anchors[i];
\r
189 var relAttribute = String(anchor.getAttribute('rel'));
\r
190 if (anchor.getAttribute('href')) {
\r
191 if (relAttribute.toLowerCase().match('lytebox')) {
\r
192 anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
\r
193 } else if (relAttribute.toLowerCase().match('lyteshow')) {
\r
194 anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
\r
195 } else if (relAttribute.toLowerCase().match('lyteframe')) {
\r
196 anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
\r
201 LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {
\r
202 if (this.ie && !this.ie7) { this.toggleSelects('hide'); }
\r
203 if (this.hideFlash) { this.toggleFlash('hide'); }
\r
204 this.isLyteframe = (doFrame ? true : false);
\r
205 var pageSize = this.getPageSize();
\r
206 var objOverlay = this.doc.getElementById('lbOverlay');
\r
207 var objBody = this.doc.getElementsByTagName("body").item(0);
\r
208 objOverlay.style.height = pageSize[1] + "px";
\r
209 objOverlay.style.display = '';
\r
210 this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));
\r
211 var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
\r
212 if (this.isLyteframe) {
\r
213 this.frameArray = [];
\r
215 if ((imageLink.getAttribute('rel') == 'lyteframe')) {
\r
216 var rev = imageLink.getAttribute('rev');
\r
217 this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
\r
219 if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {
\r
220 for (var i = 0; i < anchors.length; i++) {
\r
221 var anchor = anchors[i];
\r
222 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
\r
223 var rev = anchor.getAttribute('rev');
\r
224 this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
\r
227 this.frameArray.removeDuplicates();
\r
228 while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }
\r
232 this.imageArray = [];
\r
234 this.slideArray = [];
\r
236 if ((imageLink.getAttribute('rel') == 'lytebox')) {
\r
237 this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
\r
239 if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {
\r
240 for (var i = 0; i < anchors.length; i++) {
\r
241 var anchor = anchors[i];
\r
242 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
\r
243 this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
\r
246 this.imageArray.removeDuplicates();
\r
247 while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }
\r
249 if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {
\r
250 for (var i = 0; i < anchors.length; i++) {
\r
251 var anchor = anchors[i];
\r
252 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
\r
253 this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
\r
256 this.slideArray.removeDuplicates();
\r
257 while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }
\r
261 var object = this.doc.getElementById('lbMain');
\r
262 object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
\r
263 object.style.display = '';
\r
264 if (!this.outerBorder) {
\r
265 this.doc.getElementById('lbOuterContainer').style.border = 'none';
\r
266 this.doc.getElementById('lbDetailsContainer').style.border = 'none';
\r
268 this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
\r
269 this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
271 this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }
\r
272 this.doc.getElementById('lbMain').onclick = function(e) {
\r
275 if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
\r
276 e = window.parent.window.event;
\r
281 var id = (e.target ? e.target.id : e.srcElement.id);
\r
282 if (id == 'lbMain') { myLytebox.end(); return false; }
\r
284 this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }
\r
285 this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }
\r
286 this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }
\r
287 this.isSlideshow = doSlide;
\r
288 this.isPaused = (this.slideNum != 0 ? true : false);
\r
289 if (this.isSlideshow && this.showPlayPause && this.isPaused) {
\r
290 this.doc.getElementById('lbPlay').style.display = '';
\r
291 this.doc.getElementById('lbPause').style.display = 'none';
\r
293 if (this.isLyteframe) {
\r
294 this.changeContent(this.frameNum);
\r
296 if (this.isSlideshow) {
\r
297 this.changeContent(this.slideNum);
\r
299 this.changeContent(this.imageNum);
\r
303 LyteBox.prototype.changeContent = function(imageNum) {
\r
304 if (this.isSlideshow) {
\r
305 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
\r
307 this.activeImage = this.activeSlide = this.activeFrame = imageNum;
\r
308 if (!this.outerBorder) {
\r
309 this.doc.getElementById('lbOuterContainer').style.border = 'none';
\r
310 this.doc.getElementById('lbDetailsContainer').style.border = 'none';
\r
312 this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
\r
313 this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
\r
315 this.doc.getElementById('lbLoading').style.display = '';
\r
316 this.doc.getElementById('lbImage').style.display = 'none';
\r
317 this.doc.getElementById('lbIframe').style.display = 'none';
\r
318 this.doc.getElementById('lbPrev').style.display = 'none';
\r
319 this.doc.getElementById('lbNext').style.display = 'none';
\r
320 this.doc.getElementById('lbIframeContainer').style.display = 'none';
\r
321 this.doc.getElementById('lbDetailsContainer').style.display = 'none';
\r
322 this.doc.getElementById('lbNumberDisplay').style.display = 'none';
\r
323 if (this.navType == 2 || this.isLyteframe) {
\r
324 object = this.doc.getElementById('lbNavDisplay');
\r
325 object.innerHTML = ' <span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">« prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">« prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next »</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next »</a>';
\r
326 object.style.display = 'none';
\r
328 if (this.isLyteframe) {
\r
329 var iframe = myLytebox.doc.getElementById('lbIframe');
\r
330 var styles = this.frameArray[this.activeFrame][2];
\r
331 var aStyles = styles.split(';');
\r
332 for (var i = 0; i < aStyles.length; i++) {
\r
333 if (aStyles[i].indexOf('width:') >= 0) {
\r
334 var w = aStyles[i].replace('width:', '');
\r
335 iframe.width = w.trim();
\r
336 } else if (aStyles[i].indexOf('height:') >= 0) {
\r
337 var h = aStyles[i].replace('height:', '');
\r
338 iframe.height = h.trim();
\r
339 } else if (aStyles[i].indexOf('scrolling:') >= 0) {
\r
340 var s = aStyles[i].replace('scrolling:', '');
\r
341 iframe.scrolling = s.trim();
\r
342 } else if (aStyles[i].indexOf('border:') >= 0) {
\r
343 // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
\r
344 //var b = aStyles[i].replace('border:', '');
\r
345 //iframe.style.border = b.trim();
\r
348 this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
\r
350 imgPreloader = new Image();
\r
351 imgPreloader.onload = function() {
\r
352 var imageWidth = imgPreloader.width;
\r
353 var imageHeight = imgPreloader.height;
\r
354 if (myLytebox.autoResize) {
\r
355 var pagesize = myLytebox.getPageSize();
\r
356 var x = pagesize[2] - 150;
\r
357 var y = pagesize[3] - 150;
\r
358 if (imageWidth > x) {
\r
359 imageHeight = Math.round(imageHeight * (x / imageWidth));
\r
361 if (imageHeight > y) {
\r
362 imageWidth = Math.round(imageWidth * (y / imageHeight));
\r
365 } else if (imageHeight > y) {
\r
366 imageWidth = Math.round(imageWidth * (y / imageHeight));
\r
368 if (imageWidth > x) {
\r
369 imageHeight = Math.round(imageHeight * (x / imageWidth));
\r
374 var lbImage = myLytebox.doc.getElementById('lbImage')
\r
375 lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
\r
376 lbImage.width = imageWidth;
\r
377 lbImage.height = imageHeight;
\r
378 myLytebox.resizeContainer(imageWidth, imageHeight);
\r
379 imgPreloader.onload = function() {};
\r
381 imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
\r
384 LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
\r
385 this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;
\r
386 this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;
\r
387 this.xScale = ((imgWidth + (this.borderSize * 2)) / this.wCur) * 100;
\r
388 this.yScale = ((imgHeight + (this.borderSize * 2)) / this.hCur) * 100;
\r
389 var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
\r
390 var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
\r
391 if (!(hDiff == 0)) {
\r
392 this.hDone = false;
\r
393 this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
\r
397 if (!(wDiff == 0)) {
\r
398 this.wDone = false;
\r
399 this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
\r
403 if ((hDiff == 0) && (wDiff == 0)) {
\r
404 if (this.ie){ this.pause(250); } else { this.pause(100); }
\r
406 this.doc.getElementById('lbPrev').style.height = imgHeight + "px";
\r
407 this.doc.getElementById('lbNext').style.height = imgHeight + "px";
\r
408 this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";
\r
409 this.showContent();
\r
411 LyteBox.prototype.showContent = function() {
\r
412 if (this.wDone && this.hDone) {
\r
413 for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
\r
414 if (this.outerBorder) {
\r
415 this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';
\r
417 this.doc.getElementById('lbLoading').style.display = 'none';
\r
418 if (this.isLyteframe) {
\r
419 this.doc.getElementById('lbIframe').style.display = '';
\r
420 this.appear('lbIframe', (this.doAnimations ? 0 : 100));
\r
422 this.doc.getElementById('lbImage').style.display = '';
\r
423 this.appear('lbImage', (this.doAnimations ? 0 : 100));
\r
424 this.preloadNeighborImages();
\r
426 if (this.isSlideshow) {
\r
427 if(this.activeSlide == (this.slideArray.length - 1)) {
\r
428 if (this.autoEnd) {
\r
429 this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
\r
432 if (!this.isPaused) {
\r
433 this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
\r
436 this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');
\r
437 this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');
\r
438 this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');
\r
439 this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');
\r
440 this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');
\r
441 this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');
\r
443 this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');
\r
444 if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
\r
445 this.doc.getElementById('lbNavDisplay').style.display = '';
\r
447 this.doc.getElementById('lbNavDisplay').style.display = 'none';
\r
449 this.doc.getElementById('lbClose').style.display = '';
\r
450 this.doc.getElementById('lbDetails').style.display = '';
\r
451 this.doc.getElementById('lbPause').style.display = 'none';
\r
452 this.doc.getElementById('lbPlay').style.display = 'none';
\r
454 this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
\r
455 this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
\r
457 this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0];
\r
460 this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);
\r
463 LyteBox.prototype.updateDetails = function() {
\r
464 var object = this.doc.getElementById('lbCaption');
\r
465 var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
\r
466 object.style.display = '';
\r
467 object.innerHTML = (sTitle == null ? '' : sTitle);
\r
469 this.doc.getElementById('lbDetailsContainer').style.display = '';
\r
470 object = this.doc.getElementById('lbNumberDisplay');
\r
471 if (this.isSlideshow && this.slideArray.length > 1) {
\r
472 object.style.display = '';
\r
473 object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
\r
474 this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');
\r
475 } else if (this.imageArray.length > 1 && !this.isLyteframe) {
\r
476 object.style.display = '';
\r
477 object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
\r
478 this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');
\r
479 } else if (this.frameArray.length > 1 && this.isLyteframe) {
\r
480 object.style.display = '';
\r
481 object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
\r
482 this.doc.getElementById('lbNavDisplay').style.display = '';
\r
484 this.doc.getElementById('lbNavDisplay').style.display = 'none';
\r
486 this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));
\r
488 LyteBox.prototype.updateNav = function() {
\r
489 if (this.isSlideshow) {
\r
490 if (this.activeSlide != 0) {
\r
491 var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
\r
492 object.style.display = '';
\r
493 object.onclick = function() {
\r
494 if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
\r
495 myLytebox.changeContent(myLytebox.activeSlide - 1); return false;
\r
498 if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
\r
500 if (this.activeSlide != (this.slideArray.length - 1)) {
\r
501 var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
\r
502 object.style.display = '';
\r
503 object.onclick = function() {
\r
504 if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
\r
505 myLytebox.changeContent(myLytebox.activeSlide + 1); return false;
\r
508 if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
\r
510 } else if (this.isLyteframe) {
\r
511 if(this.activeFrame != 0) {
\r
512 var object = this.doc.getElementById('lbPrev2');
\r
513 object.style.display = '';
\r
514 object.onclick = function() {
\r
515 myLytebox.changeContent(myLytebox.activeFrame - 1); return false;
\r
518 this.doc.getElementById('lbPrev2_Off').style.display = '';
\r
520 if(this.activeFrame != (this.frameArray.length - 1)) {
\r
521 var object = this.doc.getElementById('lbNext2');
\r
522 object.style.display = '';
\r
523 object.onclick = function() {
\r
524 myLytebox.changeContent(myLytebox.activeFrame + 1); return false;
\r
527 this.doc.getElementById('lbNext2_Off').style.display = '';
\r
530 if(this.activeImage != 0) {
\r
531 var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
\r
532 object.style.display = '';
\r
533 object.onclick = function() {
\r
534 myLytebox.changeContent(myLytebox.activeImage - 1); return false;
\r
537 if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
\r
539 if(this.activeImage != (this.imageArray.length - 1)) {
\r
540 var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
\r
541 object.style.display = '';
\r
542 object.onclick = function() {
\r
543 myLytebox.changeContent(myLytebox.activeImage + 1); return false;
\r
546 if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
\r
549 this.enableKeyboardNav();
\r
551 LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
\r
552 LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
\r
553 LyteBox.prototype.keyboardAction = function(e) {
\r
554 var keycode = key = escape = null;
\r
555 keycode = (e == null) ? event.keyCode : e.which;
\r
556 key = String.fromCharCode(keycode).toLowerCase();
\r
557 escape = (e == null) ? 27 : e.DOM_VK_ESCAPE;
\r
558 if ((key == 'x') || (key == 'c') || (keycode == escape)) {
\r
560 } else if ((key == 'p') || (keycode == 37)) {
\r
561 if (myLytebox.isSlideshow) {
\r
562 if(myLytebox.activeSlide != 0) {
\r
563 myLytebox.disableKeyboardNav();
\r
564 myLytebox.changeContent(myLytebox.activeSlide - 1);
\r
566 } else if (myLytebox.isLyteframe) {
\r
567 if(myLytebox.activeFrame != 0) {
\r
568 myLytebox.disableKeyboardNav();
\r
569 myLytebox.changeContent(myLytebox.activeFrame - 1);
\r
572 if(myLytebox.activeImage != 0) {
\r
573 myLytebox.disableKeyboardNav();
\r
574 myLytebox.changeContent(myLytebox.activeImage - 1);
\r
577 } else if ((key == 'n') || (keycode == 39)) {
\r
578 if (myLytebox.isSlideshow) {
\r
579 if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {
\r
580 myLytebox.disableKeyboardNav();
\r
581 myLytebox.changeContent(myLytebox.activeSlide + 1);
\r
583 } else if (myLytebox.isLyteframe) {
\r
584 if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {
\r
585 myLytebox.disableKeyboardNav();
\r
586 myLytebox.changeContent(myLytebox.activeFrame + 1);
\r
589 if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {
\r
590 myLytebox.disableKeyboardNav();
\r
591 myLytebox.changeContent(myLytebox.activeImage + 1);
\r
596 LyteBox.prototype.preloadNeighborImages = function() {
\r
597 if (this.isSlideshow) {
\r
598 if ((this.slideArray.length - 1) > this.activeSlide) {
\r
599 preloadNextImage = new Image();
\r
600 preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
\r
602 if(this.activeSlide > 0) {
\r
603 preloadPrevImage = new Image();
\r
604 preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
\r
607 if ((this.imageArray.length - 1) > this.activeImage) {
\r
608 preloadNextImage = new Image();
\r
609 preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
\r
611 if(this.activeImage > 0) {
\r
612 preloadPrevImage = new Image();
\r
613 preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
\r
617 LyteBox.prototype.togglePlayPause = function(hideID, showID) {
\r
618 if (this.isSlideshow && hideID == "lbPause") {
\r
619 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
\r
621 this.doc.getElementById(hideID).style.display = 'none';
\r
622 this.doc.getElementById(showID).style.display = '';
\r
623 if (hideID == "lbPlay") {
\r
624 this.isPaused = false;
\r
625 if (this.activeSlide == (this.slideArray.length - 1)) {
\r
628 this.changeContent(this.activeSlide + 1);
\r
631 this.isPaused = true;
\r
634 LyteBox.prototype.end = function(caller) {
\r
635 var closeClick = (caller == 'slideshow' ? false : true);
\r
636 if (this.isSlideshow && this.isPaused && !closeClick) { return; }
\r
637 this.disableKeyboardNav();
\r
638 this.doc.getElementById('lbMain').style.display = 'none';
\r
639 this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));
\r
640 this.toggleSelects('visible');
\r
641 if (this.hideFlash) { this.toggleFlash('visible'); }
\r
642 if (this.isSlideshow) {
\r
643 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
\r
645 if (this.isLyteframe) {
\r
649 LyteBox.prototype.checkFrame = function() {
\r
650 if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
\r
651 this.isFrame = true;
\r
652 this.lytebox = "window.parent." + window.name + ".myLytebox";
\r
653 this.doc = parent.document;
\r
655 this.isFrame = false;
\r
656 this.lytebox = "myLytebox";
\r
657 this.doc = document;
\r
660 LyteBox.prototype.getPixelRate = function(cur, img) {
\r
661 var diff = (img > cur) ? img - cur : cur - img;
\r
662 if (diff >= 0 && diff <= 100) { return 10; }
\r
663 if (diff > 100 && diff <= 200) { return 15; }
\r
664 if (diff > 200 && diff <= 300) { return 20; }
\r
665 if (diff > 300 && diff <= 400) { return 25; }
\r
666 if (diff > 400 && diff <= 500) { return 30; }
\r
667 if (diff > 500 && diff <= 600) { return 35; }
\r
668 if (diff > 600 && diff <= 700) { return 40; }
\r
669 if (diff > 700) { return 45; }
\r
671 LyteBox.prototype.appear = function(id, opacity) {
\r
672 var object = this.doc.getElementById(id).style;
\r
673 object.opacity = (opacity / 100);
\r
674 object.MozOpacity = (opacity / 100);
\r
675 object.KhtmlOpacity = (opacity / 100);
\r
676 object.filter = "alpha(opacity=" + (opacity + 10) + ")";
\r
677 if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) {
\r
678 try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */
\r
679 this.updateDetails();
\r
680 } else if (opacity >= this.maxOpacity && id == 'lbOverlay') {
\r
681 for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
\r
683 } else if (opacity >= 100 && id == 'lbDetailsContainer') {
\r
684 try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */
\r
685 for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
\r
686 this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
\r
688 if (id == 'lbOverlay') {
\r
689 this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);
\r
691 this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);
\r
695 LyteBox.prototype.fade = function(id, opacity) {
\r
696 var object = this.doc.getElementById(id).style;
\r
697 object.opacity = (opacity / 100);
\r
698 object.MozOpacity = (opacity / 100);
\r
699 object.KhtmlOpacity = (opacity / 100);
\r
700 object.filter = "alpha(opacity=" + opacity + ")";
\r
701 if (opacity <= 0) {
\r
703 object.display = 'none';
\r
705 } else if (id == 'lbOverlay') {
\r
706 this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);
\r
708 this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);
\r
711 LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
\r
713 this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
\r
716 var object = this.doc.getElementById(id);
\r
717 var timer = speed ? speed : (this.resizeDuration/2);
\r
718 var newW = (this.doAnimations ? curW : maxW);
\r
719 object.style.width = (newW) + "px";
\r
721 newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;
\r
722 } else if (newW > maxW) {
\r
723 newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;
\r
725 this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
\r
726 if (parseInt(object.style.width) == maxW) {
\r
728 for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
\r
731 LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
\r
732 var timer = speed ? speed : (this.resizeDuration/2);
\r
733 var object = this.doc.getElementById(id);
\r
734 var newH = (this.doAnimations ? curH : maxH);
\r
735 object.style.height = (newH) + "px";
\r
737 newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;
\r
738 } else if (newH > maxH) {
\r
739 newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;
\r
741 this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
\r
742 if (parseInt(object.style.height) == maxH) {
\r
744 for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
\r
747 LyteBox.prototype.getPageScroll = function() {
\r
748 if (self.pageYOffset) {
\r
749 return this.isFrame ? parent.pageYOffset : self.pageYOffset;
\r
750 } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){
\r
751 return this.doc.documentElement.scrollTop;
\r
752 } else if (document.body) {
\r
753 return this.doc.body.scrollTop;
\r
756 LyteBox.prototype.getPageSize = function() {
\r
757 var xScroll, yScroll, windowWidth, windowHeight;
\r
758 if (window.innerHeight && window.scrollMaxY) {
\r
759 xScroll = this.doc.scrollWidth;
\r
760 yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
\r
761 } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){
\r
762 xScroll = this.doc.body.scrollWidth;
\r
763 yScroll = this.doc.body.scrollHeight;
\r
765 xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
\r
766 yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
\r
767 xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
\r
768 yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
\r
770 if (self.innerHeight) {
\r
771 windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
\r
772 windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
\r
773 } else if (document.documentElement && document.documentElement.clientHeight) {
\r
774 windowWidth = this.doc.documentElement.clientWidth;
\r
775 windowHeight = this.doc.documentElement.clientHeight;
\r
776 } else if (document.body) {
\r
777 windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
\r
778 windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
\r
779 windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
\r
780 windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
\r
782 var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
\r
783 var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
\r
784 return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
\r
786 LyteBox.prototype.toggleFlash = function(state) {
\r
787 var objects = this.doc.getElementsByTagName("object");
\r
788 for (var i = 0; i < objects.length; i++) {
\r
789 objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
791 var embeds = this.doc.getElementsByTagName("embed");
\r
792 for (var i = 0; i < embeds.length; i++) {
\r
793 embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
795 if (this.isFrame) {
\r
796 for (var i = 0; i < parent.frames.length; i++) {
\r
798 objects = parent.frames[i].window.document.getElementsByTagName("object");
\r
799 for (var j = 0; j < objects.length; j++) {
\r
800 objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
804 embeds = parent.frames[i].window.document.getElementsByTagName("embed");
\r
805 for (var j = 0; j < embeds.length; j++) {
\r
806 embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
812 LyteBox.prototype.toggleSelects = function(state) {
\r
813 var selects = this.doc.getElementsByTagName("select");
\r
814 for (var i = 0; i < selects.length; i++ ) {
\r
815 selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
817 if (this.isFrame) {
\r
818 for (var i = 0; i < parent.frames.length; i++) {
\r
820 selects = parent.frames[i].window.document.getElementsByTagName("select");
\r
821 for (var j = 0; j < selects.length; j++) {
\r
822 selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
\r
828 LyteBox.prototype.pause = function(numberMillis) {
\r
829 var now = new Date();
\r
830 var exitTime = now.getTime() + numberMillis;
\r
833 if (now.getTime() > exitTime) { return; }
\r
836 if (window.addEventListener) {
\r
837 window.addEventListener("load",initLytebox,false);
\r
838 } else if (window.attachEvent) {
\r
839 window.attachEvent("onload",initLytebox);
\r
841 window.onload = function() {initLytebox();}
\r
843 function initLytebox() { myLytebox = new LyteBox(); }
projects / pithos / blob