Line # Revision Author
1 296 ahitrov /*
2 Litebox JS by Alexander Shabuniewicz - http://aether.ru
3 2006-08-18
4
5 inspired by Lightbox JS - Lokesh Dhakar - http://www.huddletogether.com
6 and portfolio script of Cameron Adams - http://portfolio.themaninblue.com
7 */
8
9 var imgNext;
10 var imgPrev;
11 var nLiteboxActive = 0;
12
13 function showBox(theTarget) {
14 if ( nLiteboxActive == 1 ) {
15 return;
16 } else {
17 nLiteboxActive = 1;
18 }
19 var theBody = document.getElementsByTagName('body')[0];
20 var pageCoords = getPageCoords();
21
22 var theShadow = document.createElement('div');
23 theShadow.id = 'shadow';
24 theShadow.style.height = (pageCoords[1] + 'px');
25 theShadow.className = 'on';
26 selects = document.getElementsByTagName("select");
27 for (i = 0; i != selects.length; i++) {
28 selects[i].style.visibility = "hidden";
29 }
30 theBody.insertBefore(theShadow, theBody.firstChild);
31
32 var theLoading = document.createElement('div');
33 theLoading.id = 'loading';
34 theLoading.style.top = parseInt(pageCoords[2] + (pageCoords[0] - 55) / 2) + 'px';
35 theLoading.onclick = function() { closeBox(); }
36 theShadow.appendChild(theLoading);
37
38 var imgPreload = new Image();
39 imgPreload.onload = function() {
40 var theBox = document.createElement('div');
41 theBox.id = 'litebox';
42 theBox.style.width = imgPreload.width + 10 + 'px';
43 theBox.style.marginTop = parseInt(pageCoords[2] + (pageCoords[0] - imgPreload.height - 50) / 2) + 'px';
44
45 var theImage = document.createElement('img');
46 theImage.src = theTarget.href;
47 theImage.alt = theTarget.title;
48 theImage.width = imgPreload.width;
49 theImage.onclick = function() { closeBox(); }
50 theImage.title = "Click to close this image";
51
52
53 var theCaption = document.createElement('p');
54 theCaption.className = 'litebox-caption';
55 theCaption.innerHTML = (theImage.alt) ? '<b>' + theImage.alt + '</b><br>' : '';
56 theCaption.innerHTML += '<span style="color:#a0a0a0">Щелкните указателем мыши по фотографии<br>или нажмите клавишу &laquo;Esc&raquo;, чтобы завершить просмотр</span>';
57
58 var allThumbs = new Array();
59 var allLinks = document.getElementsByTagName('a');
60 var linkLen = allLinks.length;
61 for (i=0,j=0; i<linkLen; i++) {
62 if (allLinks[i].getAttribute('rel') == 'lightbox') {
63 allThumbs[j++] = allLinks[i];
64 }
65 }
66 linkLen = allThumbs.length;
67 for (i=0; i<linkLen; i++) {
68 if (allThumbs[i].href == theTarget.href) {
69 if (allThumbs[i-1]) {
70 var thePrevLink = document.createElement('a');
71 thePrevLink.className = 'prev';
72 thePrevLink.title = allThumbs[i-1].title;
73 thePrevLink.href = allThumbs[i-1].href;
74 thePrevLink.onclick = function() { closeBox(); showBox(this); return false; }
75 theCaption.insertBefore(thePrevLink, theCaption.firstChild);
76 imgPrev = allThumbs[i-1];
77 }
78 if (allThumbs[i+1]) {
79 var theNextLink = document.createElement('a');
80 theNextLink.className = 'next';
81 theNextLink.title = allThumbs[i+1].title;
82 theNextLink.href = allThumbs[i+1].href;
83 theNextLink.onclick = function() { closeBox(); showBox(this); return false; }
84 theCaption.insertBefore(theNextLink, theCaption.firstChild);
85 imgNext = allThumbs[i+1];
86 }
87 }
88 }
89
90 theShadow.removeChild(theLoading);
91 theBox.appendChild(theImage);
92 theBox.appendChild(theCaption);
93 theShadow.appendChild(theBox);
94
95 document.onkeypress = getKey;
96 return false;
97 }
98 imgPreload.src = theTarget.href;
99 }
100
101 function getPageCoords() {
102 var coords = [0, 0, 0]; // height of window, document, scroll pos
103 // all except IE
104 if (window.innerHeight) {
105 coords[0] = window.innerHeight;
106 coords[2] = window.pageYOffset;
107 }
108 // IE 6 Strict
109 else if (document.documentElement && document.documentElement.clientHeight != 0) {
110 coords[0] = document.documentElement.clientHeight;
111 coords[2] = document.documentElement.scrollTop;
112 }
113 else if (document.body) {
114 coords[0] = document.body.clientHeight;
115 coords[2] = document.body.scrollTop;
116 }
117
118 var test1 = document.body.scrollHeight;
119 var test2 = document.body.offsetHeight;
120 if (test1 > test2) {
121 coords[1] = document.body.scrollHeight;
122 } else {
123 coords[1] = document.body.offsetHeight;
124 }
125 if (coords[1] < coords[0]) coords[1] = coords[0];
126
127 return coords;
128 }
129
130 function closeBox() {
131 var theBody = document.getElementsByTagName('body')[0];
132 var theBox = document.getElementById('litebox');
133 if (theBox) theBox.style.display = 'none';
134 var theShadow = document.getElementById('shadow');
135 if (theShadow) theShadow.style.display = 'none';
136 theBody.removeChild(theShadow);
137
138 selects = document.getElementsByTagName('select');
139 for (i = 0; i != selects.length; i++) {
140 selects[i].style.visibility = 'visible';
141 }
142 document.onkeypress = '';
143 imgPrev = imgNext = '';
144 nLiteboxActive = 0;
145 return false;
146 }
147
148 function getKey(e) {
149 var arrowImg;
150
151 if (!e) var e = window.event;
152 var keycode = e.keyCode ? e.keyCode : e.which;
153
154 switch (keycode) {
155 case 27: // esc
156 case 32: // spacebar
157 closeBox();
158 break;
159 case 37: // <-
160 arrowImg = imgPrev ? imgPrev : '';
161 break;
162 case 39: // ->
163 arrowImg = imgNext ? imgNext : '';
164 }
165 if (arrowImg) { closeBox(); showBox(arrowImg); }
166 return false;
167 }
168
169 function initLitebox() {
170 if (!document.getElementsByTagName) { return; }
171 var anchors = document.getElementsByTagName('a');
172
173 for (i=0,len=anchors.length; i<len; i++){
174 var anchor = anchors[i];
175 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == 'lightbox')) {
176 anchor.onclick = function() { showBox(this); return false; }
177 }
178 }
179 anchor = null;
180 }
181
182 function addLoadEvent(func) {
183 var oldonload = window.onload;
184 if (typeof window.onload != 'function') {
185 window.onload = func;
186 } else {
187 window.onload = function() {
188 oldonload();
189 func();
190 }
191 }
192 }
193
194 addLoadEvent(initLitebox);