[Sellrion]

В общем проискал весь форум, нашел только замечания о том, что эта штука не хочет работать. Собственно, сейчас мы ее и заставим.

Немного теории:
Скажу сразу: тот самый Lightbox, который основан на prototype использвать не удастся. Причина сему такова. В файле prototype.js описан один или несколько классов с методами, позволяющими работать с AJAX. В vBulletin эти методы уже частично описаны. Поэтому при конфликте возникают, к сожалению, непоправимые глюки.

Решение:
Использовать другие скрипты. А именно - jQuery. Нам остается лишь локализовать его и немного переделать, чтобы он внешне походил на Lightbox.

Установка:
1. Заливаем файлы в аттаче не сервер.
2. В шаблоне header каждого стиля пишем следующее:

<script type="text/javascript" src="clientscript/jquery.js"></script>
<script type="text/javascript" src="clientscript/jquery.lightbox-0.4.js"></script>
<script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox();
    });
    </script>

3. В дополнительные определения CSS каждого стиля добавляем следующее:

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

Далее идем в шаблон postbit_attachmentthumbnail, и к ссылке добавляем rel="lightbox" примерно так:

<a href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]" target="_blank" rel="lightbox">

Все. Скрин прилагается...

[Меф]

Sell, спасиб ) слушай а не подскажешь еще как на АЯКСе сделать загрузку картинок?
Идея такова: есть картинка, страница загрузилась но картинка появилась только когда она полностью подгрузиться... имхо удобно для больших картинок которые загружаються олосками такими =\

[shpunsetoy]

А ты на сайте jQuery вааще был?...а зайти стоит там множество применений этой библиотеки имеется... вот только новая версия воблы смотрит немного в другую сторону..)

[Василий Шуйский]

Sell, спасибо работает vbLightboxv1.02 а это вообще не работает

[Dragster]

Василий Шуйский, а причём ЛайтБокс и эта тему?


Sellrion, спасибо за хак, но есть вопрос: что делать если изображение, скажем, больше размера экрана?
Будет ли это корректоно работать, будет ли прокрутка горизонтальная/вертикальная или надо максимально-допустимые размеры изображений для заливки уменьшать?

[Sellrion]

Dragster, картинка открывается в полный размер, для прокрутки используются скролл бары браузера...

[Dragster]

Спасибо, хак отлично работает!

Хочу ещё, правда, уменьшить отступ сверху, ибо если картинка большая в высоту, то смотрится не очень гудно, но это уже мелочи

Добавлено через 3 часа 8 минут
Нашёл багу!

При просмотре аттача размером 200х250 пикселей происходит вот что (в Internet Explorer'e, в Opera 9-й последней всё нормально): http://ipicture.ru/uploads/080106/uVPl5HeVrO.gif

Как фиксить?

И это... можно всё-таки мне помочь с перемещением картинки повыше немного при просмотре через этот хак, а то сверху много места слишком?
Я не разобрался =)

[Sellrion]

Сообщение от Dragster

Как фиксить?

Можно пофиксить, но придется отказаться от надписи "Изображений 2 из 1", тут уж ничего не поделать. Если надо, то файл без описания к картинке прикрепил...

Сообщение от Dragster

И это... можно всё-таки мне помочь с перемещением картинки повыше немного при просмотре через этот хак, а то сверху много места слишком?
Я не разобрался =)

Ну скажи как хочешь, переделаю эксклюзивом...

[Dragster]

ОК, сейчас кину скрин...

Добавлено через 4 минуты
Вот как сейчс есть: http://ipicture.ru/uploads/080106/1zI0TTDV5o.gif

Хотелось бы примерно вот такое растояние: http://ipicture.ru/uploads/080106/WHbSBaLoEr.gif

Ну или скажи где чего менять, я сам поковыряю, дабы тебя не дёргать, да и другим будем полезно =)

[Sellrion]

Сообщение от Dragster

Ну или скажи где чего менять, я сам поковыряю, дабы тебя не дёргать, да и другим будем полезно =)

Ну, вообще-то за это отвечает класс #jquery-lightbox в CSS. А именно параметры:

top: 0;
left: 0;

Но изменение их в самом CSS ничего не даст, так как они расчитываются в самом скрипте:

var arrPageScroll = ___getPageScroll();
			$('#jquery-lightbox').css({
				top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
				left:	arrPageScroll[0]
			}).show();

И затем подменяются в CSS. Изменяй формулу как понравится...