| 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>или нажмите клавишу «Esc», чтобы завершить просмотр</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); |
