Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2011, 04:06
Интересующийся
Отправить личное сообщение для darkcrash2007 Посмотреть профиль Найти все сообщения от darkcrash2007
 
Регистрация: 27.12.2010
Сообщений: 17

Корректировка скрипта lightbox 20$
В общем нужно подстроить скрипт для '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: progidXImageTransform.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девять

Последний раз редактировалось darkcrash2007, 14.10.2011 в 21:17. Причина: IcQ
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2011, 21:16
Интересующийся
Отправить личное сообщение для darkcrash2007 Посмотреть профиль Найти все сообщения от darkcrash2007
 
Регистрация: 27.12.2010
Сообщений: 17

Цена 25$.
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2011, 23:02
Интересующийся
Отправить личное сообщение для darkcrash2007 Посмотреть профиль Найти все сообщения от darkcrash2007
 
Регистрация: 27.12.2010
Сообщений: 17

Всем спасибо скрипт готов.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 16.09.2011 00:10
LightBox + ajax = Не работает ((( xmartinesx jQuery 2 11.10.2010 16:32
JQuery Lightbox поверх фреймов ZneP Events/DOM/Window 4 11.08.2010 16:48
Круговорт скрипта.... Karl Общие вопросы Javascript 1 17.10.2009 15:37
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03