В общем нужно подстроить скрипт для 'Lightbox' (открытие изображений поверх сайта).
<script type='text/javascript'>
//<![CDATA[
var imgNext;
var imgPrev;
function showBox(theTarget) {
var theBody = document.getElementsByTagName('body')[0];
var pageCoords = getPageCoords();
var theShadow = document.createElement('div');
theShadow.id = 'shadow';
theShadow.style.height = (pageCoords[1] + 'px');
theShadow.className = 'on';
selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "hidden";
}
theBody.insertBefore(theShadow, theBody.firstChild);
var theLoading = document.createElement('div');
theLoading.id = 'loading';
theLoading.style.top = parseInt(pageCoords[2] + (pageCoords[0] - 55) / 2) + 'px';
theLoading.onclick = function() { closeBox(); }
theShadow.appendChild(theLoading);
var imgPreload = new Image();
imgPreload.onload = function() {
var theBox = document.createElement('div');
theBox.id = 'litebox';
theBox.style.width = imgPreload.width + 10 + 'px';
theBox.style.marginTop = parseInt(pageCoords[2] + (pageCoords[0] - imgPreload.height - 50) / 2) + 'px';
var theImage = document.createElement('img');
theImage.src = theTarget.href;
theImage.alt = theTarget.title;
theImage.width = imgPreload.width;
theImage.onclick = function() { closeBox(); }
theImage.title = "Click to close this image";
var theCaption = document.createElement('p');
theCaption.innerHTML = (theImage.alt) ? theImage.alt : '';
theCaption.innerHTML += "<em>click on image or press ESC to close window</em>";
var allThumbs = new Array();
var allLinks = document.getElementsByTagName('a');
var linkLen = allLinks.length;
for (i=0,j=0; i<linkLen; i++) {
if (allLinks[i].getAttribute('rel') == 'lightbox') {
allThumbs[j++] = allLinks[i];
}
}
linkLen = allThumbs.length;
for (i=0; i<linkLen; i++) {
if (allThumbs[i].href == theTarget.href) {
if (allThumbs[i-1]) {
var thePrevLink = document.createElement('a');
thePrevLink.className = 'prev';
thePrevLink.title = allThumbs[i-1].title;
thePrevLink.href = allThumbs[i-1].href;
thePrevLink.onclick = function() { closeBox(); showBox(this); return false; }
theCaption.insertBefore(thePrevLink, theCaption.firstChild);
imgPrev = allThumbs[i-1];
}
if (allThumbs[i+1]) {
var theNextLink = document.createElement('a');
theNextLink.className = 'next';
theNextLink.title = allThumbs[i+1].title;
theNextLink.href = allThumbs[i+1].href;
theNextLink.onclick = function() { closeBox(); showBox(this); return false; }
theCaption.insertBefore(theNextLink, theCaption.firstChild);
imgNext = allThumbs[i+1];
}
}
}
theShadow.removeChild(theLoading);
theBox.appendChild(theImage);
theBox.appendChild(theCaption);
theShadow.appendChild(theBox);
document.onkeypress = getKey;
return false;
}
imgPreload.src = theTarget.href;
}
function getPageCoords() {
var coords = [0, 0, 0]; // height of window, document, scroll pos
// all except IE
if (window.innerHeight) {
coords[0] = window.innerHeight;
coords[2] = window.pageYOffset;
}
// IE 6 Strict
else if (document.documentElement && document.documentElement.clientHeight != 0) {
coords[0] = document.documentElement.clientHeight;
coords[2] = document.documentElement.scrollTop;
}
else if (document.body) {
coords[0] = document.body.clientHeight;
coords[2] = document.body.scrollTop;
}
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight;
if (test1 > test2) {
coords[1] = document.body.scrollHeight;
} else {
coords[1] = document.body.offsetHeight;
}
if (coords[1] < coords[0]) coords[1] = coords[0];
return coords;
}
function closeBox() {
var theBody = document.getElementsByTagName('body')[0];
var theBox = document.getElementById('litebox');
if (theBox) theBox.style.display = 'none';
var theShadow = document.getElementById('shadow');
if (theShadow) theShadow.style.display = 'none';
theBody.removeChild(theShadow);
selects = document.getElementsByTagName('select');
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = 'visible';
}
document.onkeypress = '';
imgPrev = imgNext = '';
return false;
}
function getKey(e) {
var arrowImg;
if (!e) var e = window.event;
var keycode = e.keyCode ? e.keyCode : e.which;
switch (keycode) {
case 27: // esc
case 32: // spacebar
closeBox();
break;
case 37: // <-
arrowImg = imgPrev ? imgPrev : '';
break;
case 39: // ->
arrowImg = imgNext ? imgNext : '';
}
if (arrowImg) { closeBox(); showBox(arrowImg); }
return false;
}
function initLitebox() {
if (!document.getElementsByTagName) { return; }
var anchors = document.getElementsByTagName('a');
for (i=0,len=anchors.length; i<len; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == 'lightbox')) {
anchor.onclick = function() { showBox(this); return false; }
}
}
anchor = null;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(initLitebox);//]]>
</script>
Сам Css:
#shadow {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-image: url(/i/thumb-trans.png);
text-align: center;
}
* html #shadow {
/* hack for IE < 7 opacity */
background-color: #333;
back\ground-color: transparent;
background-image: none;
filter: progid
XImageTransform.Microsoft.AlphaImageLoader (src="http://1.bp.blogspot.com/-uwFP4FZX-ZE/TpSgc-y6OoI/AAAAAAAAIIU/0DtZVNXNbNs/thumb-trans.png", sizingMethod="scale");
}
#shadow.on {
display: block;
}
#loading {
background: url(
http://4.bp.blogspot.com/-ShuQcfAGpc...mb-preload.gif) no-repeat;
position: absolute;
left: 48%;
top: 50px;
width: 55px;
height: 55px;
margin: 0 auto;
cursor: pointer;
}
#litebox {
background: #fff;
padding: 5px 0;
margin: 0 auto;
}
#litebox img {
cursor: pointer;
}
#litebox p {
margin: 0;
padding: 10px 0;
color: #333;
}
#litebox em {
color: #999;
display: block;
font-size: 85%;
}
#litebox a {
border: none;
width: 21px;
height: 21px;
}
#litebox a.prev {
float: left;
background: url(
http://4.bp.blogspot.com/-h05irD3Smr...thumb-prev.gif) no-repeat 0 50%
}
#litebox a.next {
float: right;
background: url(
http://4.bp.blogspot.com/-SaIbiIb_fl...thumb-next.gif) no-repeat 0 50%
}
В двух словах этот скрипт открывает изображение <a href=""></a> поверх сайта (но чтобы скрипт работал в картинке должен пристутсвовать тег rel='lightbox').
Задача: Нужно сделать что бы открывались все картинки в постах <img/> не зависимо от тега (не нужно вручную прописывать rel="lightbox"), к тому же все картинки имеют ссылку типа
http://1.bp.blogspot.com/_9pn22cxzJZ...645feab922.jpg
Надо что бы скрипт при открытие картинки заменял /s200 и /s320 и /s400 на /s900 (другими словами при открытие фотки s - ограничение размера, если убрать /s или заменить то картинка отобразиться в муказаном размере).
Цена: 20$
Время: не поджимает. хоть 1-3 недели.
IcQ 631-477-57девять