Line # Revision Author
1 3 ahitrov@rambler.ru /*
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 var theCaption = document.createElement('p');
53 theCaption.innerHTML = (theImage.alt) ? theImage.alt : '';
54 theCaption.innerHTML += "<em>������� ESC ��� �������� �� ����������� ��� ������</em>";
55
56 var allThumbs = new Array();
57 var allLinks = document.getElementsByTagName('a');
58 var linkLen = allLinks.length;
59 for (i=0,j=0; i<linkLen; i++) {
60 if (allLinks[i].getAttribute('rel') == 'lightbox') {
61 allThumbs[j++] = allLinks[i];
62 }
63 }
64 linkLen = allThumbs.length;
65 for (i=0; i<linkLen; i++) {
66 if (allThumbs[i].href == theTarget.href) {
67 if (allThumbs[i-1]) {
68 var thePrevLink = document.createElement('a');
69 thePrevLink.className = 'prev';
70 thePrevLink.title = allThumbs[i-1].title;
71 thePrevLink.href = allThumbs[i-1].href;
72 thePrevLink.onclick = function() { closeBox(); showBox(this); return false; }
73 theCaption.insertBefore(thePrevLink, theCaption.firstChild);
74 imgPrev = allThumbs[i-1];
75 }
76 if (allThumbs[i+1]) {
77 var theNextLink = document.createElement('a');
78 theNextLink.className = 'next';
79 theNextLink.title = allThumbs[i+1].title;
80 theNextLink.href = allThumbs[i+1].href;
81 theNextLink.onclick = function() { closeBox(); showBox(this); return false; }
82 theCaption.insertBefore(theNextLink, theCaption.firstChild);
83 imgNext = allThumbs[i+1];
84 }
85 }
86 }
87
88 theShadow.removeChild(theLoading);
89 theBox.appendChild(theImage);
90 theBox.appendChild(theCaption);
91 theShadow.appendChild(theBox);
92
93 document.onkeypress = getKey;
94 return false;
95 }
96 imgPreload.src = theTarget.href;
97 }
98
99 function getPageCoords() {
100 var coords = [0, 0, 0]; // height of window, document, scroll pos
101 // all except IE
102 if (window.innerHeight) {
103 coords[0] = window.innerHeight;
104 coords[2] = window.pageYOffset;
105 }
106 // IE 6 Strict
107 else if (document.documentElement && document.documentElement.clientHeight != 0) {
108 coords[0] = document.documentElement.clientHeight;
109 coords[2] = document.documentElement.scrollTop;
110 }
111 else if (document.body) {
112 coords[0] = document.body.clientHeight;
113 coords[2] = document.body.scrollTop;
114 }
115
116 var test1 = document.body.scrollHeight;
117 var test2 = document.body.offsetHeight;
118 if (test1 > test2) {
119 coords[1] = document.body.scrollHeight;
120 } else {
121 coords[1] = document.body.offsetHeight;
122 }
123 if (coords[1] < coords[0]) coords[1] = coords[0];
124
125 return coords;
126 }
127
128 function closeBox() {
129 var theBody = document.getElementsByTagName('body')[0];
130 var theBox = document.getElementById('litebox');
131 if (theBox) theBox.style.display = 'none';
132 var theShadow = document.getElementById('shadow');
133 if (theShadow) theShadow.style.display = 'none';
134 theBody.removeChild(theShadow);
135
136 selects = document.getElementsByTagName('select');
137 for (i = 0; i != selects.length; i++) {
138 selects[i].style.visibility = 'visible';
139 }
140 document.onkeypress = '';
141 imgPrev = imgNext = '';
142 nLiteboxActive = 0;
143 return false;
144 }
145
146 function getKey(e) {
147 var arrowImg;
148
149 if (!e) var e = window.event;
150 var keycode = e.keyCode ? e.keyCode : e.which;
151
152 switch (keycode) {
153 case 27: // esc
154 case 32: // spacebar
155 closeBox();
156 break;
157 case 37: // <-
158 arrowImg = imgPrev ? imgPrev : '';
159 break;
160 case 39: // ->
161 arrowImg = imgNext ? imgNext : '';
162 }
163 if (arrowImg) { closeBox(); showBox(arrowImg); }
164 return false;
165 }
166
167 function initLitebox() {
168 if (!document.getElementsByTagName) { return; }
169 var anchors = document.getElementsByTagName('a');
170
171 for (i=0,len=anchors.length; i<len; i++){
172 var anchor = anchors[i];
173 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == 'lightbox')) {
174 anchor.onclick = function() { showBox(this); return false; }
175 }
176 }
177 anchor = null;
178 }
179
180 function addLoadEvent(func) {
181 var oldonload = window.onload;
182 if (typeof window.onload != 'function') {
183 window.onload = func;
184 } else {
185 window.onload = function() {
186 oldonload();
187 func();
188 }
189 }
190 }
191
192 addLoadEvent(initLitebox);