Внимание: LightBox НЕ РАБОТАЕТ с библиотекой jquery-1.6.1.js
Перед установкой проверьте какая версия jQuery подключена на сайте, для этого идём в ПУ/Настройки/Общие настройки и смотрим
Если включена библиотека jquery-1.6.1 переключаем её на jquery-1.3.2.
Качаем АРХИВ, распаковываем, заливаем содержимое в одноимённые папки.
В CSS вставляем код:
Код
/* LightBox */
.jquery-lightbox-overlay { background:#000000; }
.jquery-lightbox { position:relative; padding:17px 0; }
.jquery-lightbox-border-top-left, .jquery-lightbox-border-top-right, .jquery-lightbox-border-bottom-left, .jquery-lightbox-border-bottom-right { position:absolute; height:17px; width:12%; z-index:7000; }
.jquery-lightbox-border-top-left { background: url(../images/jquery-lightbox-theme.png) no-repeat 0 0; top:0; left:0; }
.jquery-lightbox-border-top-right { background: url(../images/jquery-lightbox-theme.png) no-repeat right 0; top:0; right:0; }
.jquery-lightbox-border-top-middle { background:#2b2b2b; position:absolute; height:7px; width:78%; top:0; left:12%; z-index:7000; overflow:hidden; }
.jquery-lightbox-border-bottom-left { background: url(../images/jquery-lightbox-theme.png) no-repeat 0 bottom; bottom:0; left:0; }
.jquery-lightbox-border-bottom-right { background: url(../images/jquery-lightbox-theme.png) no-repeat right bottom; bottom:0; right:0; }
.jquery-lightbox-border-bottom-middle { background:#2b2b2b; height:7px; width:78%; position:absolute; bottom:0; left:12%; z-index:7000; overflow:hidden; }
.jquery-lightbox-title { background:#2b2b2b; color:#FFFFFF; font-family:verdana, arial, serif; font-size:11px; line-height:14px; padding:5px 8px; margin:3px; position:absolute; bottom:0; z-index:7000; opacity:0.9; }
.jquery-lightbox-html { z-index:7000; position:relative; border:0; border-left:7px solid #2b2b2b; border-right:7px solid #2b2b2b; padding:0px 15px; }
.jquery-lightbox-background { position:absolute; top:7px; left:7px; z-index:6999; float:left; padding:0; }
.jquery-lightbox-background img { display:block; position:relative; border:0; margin:0; padding:0; width:100%; height:100%; }
.jquery-lightbox-mode-image .jquery-lightbox-html { z-index:6998; padding:0; }
.jquery-lightbox-mode-html .jquery-lightbox-background { background:#FFFFFF; }
.jquery-lightbox-mode-html .jquery-lightbox-html { overflow:auto; }
.jquery-lightbox-loading { background:#FFFFFF url(../images/loading.gif) no-repeat center center; }
.jquery-lightbox-button-close { background: url(../images/jquery-lightbox-theme.png) no-repeat -190px -115px; position:absolute; top:12px; right:-26px; width:29px; height:29px; }
.jquery-lightbox-button-close:hover { background: url(../images/jquery-lightbox-theme.png) no-repeat -220px -115px; }
.jquery-lightbox-button-close span, .jquery-lightbox-buttons span { display:none; }
.jquery-lightbox-mode-image .jquery-lightbox-button-close { right:14px; z-index:7001; }
.jquery-lightbox-buttons { position:absolute; top:14px; left:14px; z-index:7000; height:39px; display:none; }
.jquery-lightbox-buttons .jquery-lightbox-buttons-init, .jquery-lightbox-buttons .jquery-lightbox-buttons-end { width:5px; height:39px; float:left; display:inline; }
.jquery-lightbox-buttons .jquery-lightbox-buttons-init { background: url(../images/jquery-lightbox-theme.png) no-repeat -151px -153px; }
.jquery-lightbox-buttons .jquery-lightbox-buttons-end { background: url(../images/jquery-lightbox-theme.png) no-repeat -244px -153px; }
.jquery-lightbox-buttons .jquery-lightbox-button-left { background: url(../images/jquery-lightbox-theme.png) no-repeat -156px -153px; width:24px; height:39px; float:left; display:inline; }
.jquery-lightbox-buttons .jquery-lightbox-button-left:hover { background: url(../images/jquery-lightbox-theme.png) no-repeat -156px -194px; }
.jquery-lightbox-buttons .jquery-lightbox-button-right { background: url(../images/jquery-lightbox-theme.png) no-repeat -220px -153px; width:24px; height:39px; float:left; display:inline; }
.jquery-lightbox-buttons .jquery-lightbox-button-right:hover { background: url(../images/jquery-lightbox-theme.png) no-repeat -220px -194px; }
.jquery-lightbox-buttons .jquery-lightbox-button-max { background: url(../images/jquery-lightbox-theme.png) no-repeat -182px -153px; width:36px; height:39px; float:left; display:inline; }
.jquery-lightbox-buttons .jquery-lightbox-button-max:hover { background: url(../images/jquery-lightbox-theme.png) no-repeat -182px -194px; }
.jquery-lightbox-buttons .jquery-lightbox-button-min { background: url(../images/jquery-lightbox-theme.png) no-repeat -162px -235px; width:36px; height:39px; float:left; display:inline; }
.jquery-lightbox-buttons .jquery-lightbox-button-min:hover { background: url(../images/jquery-lightbox-theme.png) no-repeat -207px -235px; }
.jquery-lightbox-buttons-custom { height:39px; float:left; display:inline; background:#2b2b2b; line-height:39px; font-size:10px; }
.jquery-lightbox-buttons-custom a { color:#FFFFFF; font-size:10px; display:inline; font-weight:normal; text-decoration:underline; padding:0 3px; }
.jquery-lightbox-mode-image .jquery-lightbox-button-close { opacity:0.7; }
.jquery-lightbox-mode-image .jquery-lightbox-buttons { opacity:0.3; }
.jquery-lightbox-mode-image:hover .jquery-lightbox-buttons, .jquery-lightbox-mode-image:hover .jquery-lightbox-button-close { opacity:0.9; }
/* ---------- */
далее идём в ПУ/Управление дизайном/Быстрая замена - режим замены многострочный, в верхнее поле вставляем
в нижнее
Код
<script type="text/javascript" src="/js/lightbox.js" charset="utf-8"></script>
<script type="text/javascript">
$('.lightbox').lightbox();
</script>
</body>
снимаем галочки с пунктов Форум и Пользователии жмём
заменить.
Далее в шаблонах "Вид материалов" и "Страница материала и комментариев"перед ссылкой на картинку ставим
Код
<a href="$OTHER1$" class="lightbox">
после ссылки на картинку пишем
Пример:
Код
<a href="$OTHER1$" class="lightbox"><img src="$OTHER1$" class="image-min" alt='' /></a>
Юкоз-код $OTHER1$ при необходимости заменяем на свой, например $IMG_URL1$.
