Для сравнения
при использовании системного LightBox
то же, но уже с использованием ColorBox
Посмотрите, как это будет выглядеть вживую
Установка
1. Открываем панель управления сайтом и переходим в редактирование шаблонов. Входим в редактирование шаблона "Фотоальбомы - Вид фотографий" и заменяем весь стандартный код на такой:
<div align="center">
<div style="padding-bottom:1px;"><?if($PHOTO_NAME$)?><a href="$PHOTO_URL$"><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?></a><?endif?><?else?> </div>
<p><a class="group2" href="$FULL_PHOTO_DIRECT_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a></p>
<?if($CAT_NAME$)?><div style="padding-top:1px;"><a href="$CAT_URL$"><?if(len($CAT_NAME$)>25)?><?substr($CAT_NAME$,0,23)?>...<?else?>$CAT_NAME$<?endif?></a></div><?endif?>
<div style="margin-top:2px;" class="eDetails">
<?if($MODER_PANEL$)?><div style="position:absolute;z-index:30;">$MODER_PANEL$</div><?endif?>
<?if($RATING$)?><div align="center"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?>
</div></div>
Сохраняем изменения.
2. Теперь открываем редактирование шаблона "Фотоальбомы - Главаная страница фотоальбома", добавляем в секцию HEAD строчку, подключающую внешний файл со стилями CSS
<link media="screen" rel="stylesheet" href="/colorbox.css" />
После открывающего тега body добавим скрипты
<script src="/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group2").colorbox({rel:'group2', transition:"fade"});
});
</script>
Примечание: по умолчанию стоит значение fade для эффекта перехода с исчезновением фото, это значение возможно поменять на elastic (и тогда при разных размерах фотографий при пролистывании будет плавно изменяться размер самого бокса), none (при этом значении фотографии будут пролистываться в окне бокса безо всяких эффектов)
3. Открываем общие настройки сайта и выбираем версию подключаемой системной библиотеки jquery - 1.6.1.js
4. В корневую папку сайта закачиваем файлы jquery.colorbox.js и colorbox.css, создаём папку images и заливаем в неё файлы изображений из одноимённой папки скачанного вами архива с исходниками. Обратите внимание, что в папке images есть подпапка ie6, вы также должны создать аналогичную подпапку в папке images в файловом менеджере и залить туда необходимые изображения.
На этом всё. Будут вопросы, пишите, обсудим.
при использовании системного LightBox
то же, но уже с использованием ColorBox
Посмотрите, как это будет выглядеть вживую
Установка
1. Открываем панель управления сайтом и переходим в редактирование шаблонов. Входим в редактирование шаблона "Фотоальбомы - Вид фотографий" и заменяем весь стандартный код на такой:
Code
<div align="center">
<div style="padding-bottom:1px;"><?if($PHOTO_NAME$)?><a href="$PHOTO_URL$"><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?></a><?endif?><?else?> </div>
<p><a class="group2" href="$FULL_PHOTO_DIRECT_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a></p>
<?if($CAT_NAME$)?><div style="padding-top:1px;"><a href="$CAT_URL$"><?if(len($CAT_NAME$)>25)?><?substr($CAT_NAME$,0,23)?>...<?else?>$CAT_NAME$<?endif?></a></div><?endif?>
<div style="margin-top:2px;" class="eDetails">
<?if($MODER_PANEL$)?><div style="position:absolute;z-index:30;">$MODER_PANEL$</div><?endif?>
<?if($RATING$)?><div align="center"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?>
</div></div>
Сохраняем изменения.
2. Теперь открываем редактирование шаблона "Фотоальбомы - Главаная страница фотоальбома", добавляем в секцию HEAD строчку, подключающую внешний файл со стилями CSS
Code
<link media="screen" rel="stylesheet" href="/colorbox.css" />
После открывающего тега body добавим скрипты
Code
<script src="/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group2").colorbox({rel:'group2', transition:"fade"});
});
</script>
Примечание: по умолчанию стоит значение fade для эффекта перехода с исчезновением фото, это значение возможно поменять на elastic (и тогда при разных размерах фотографий при пролистывании будет плавно изменяться размер самого бокса), none (при этом значении фотографии будут пролистываться в окне бокса безо всяких эффектов)
3. Открываем общие настройки сайта и выбираем версию подключаемой системной библиотеки jquery - 1.6.1.js
4. В корневую папку сайта закачиваем файлы jquery.colorbox.js и colorbox.css, создаём папку images и заливаем в неё файлы изображений из одноимённой папки скачанного вами архива с исходниками. Обратите внимание, что в папке images есть подпапка ie6, вы также должны создать аналогичную подпапку в папке images в файловом менеджере и залить туда необходимые изображения.
На этом всё. Будут вопросы, пишите, обсудим.
Всего комментариев: 3
3.
Сайт в системе ucoz. Весь интернет перерыл, только у вас нашел внятное и адекватное описание, как и куда что поставить.
Всё великолепно заработало.
Сайт нет смысла приводить - удалил всю установку по причине ранее перечисленных минусов.
Под решением имел ввиду:
1. Каким образом и возможно ли добиться того, чтобы Colorbox при установке в фотоальбоме листал весь альбом фотографий.
Устанавливая его по вышеуказанному примеру он прекрасно листает только фотографии выведенные на странице. Например: показываются последние фотографии загруженные в альбом - если это страница, где выводятся новые фотки добавленные в альбом. Если это страница альбома, то Colorbox показывает только фотки с данной страницы останавливаясь на последней фотке со страницы и чтобы посмотреть фото на другой странице, то нужно перейти на неё и заново запустить Colorbox.
Системный LightBox не нуждается в переходе на другие страницы, он листает следующие фото с других страниц сам. Так вот как заставить Colorbox делать тоже самое?
2. С рамкой видимо действительно лучше скрин приложить, чтобы было наглядно видно... Потом сделаю и покажу, если вышеуказанная проблема решаема. если нет, придется к сожалению от него отказаться
В любом случае спасибо вам за внятное описание как куда и что поставить, чтобы заработал Colorbox. Судя по тому, что я читал в инете - у многих вызывает его установка проблемы. Я не исключение, только благодаря вашей статье все корректно встало на свои места и заработало, а до её прочтения - вообще ничего не получалось.
Всё установилось прекрасно, но возникли несколько "НО":
1. Colorbox упорно "видит" и показывает только те фотки, которые выведены на главной странице альбома. Системный же LightBox продолжает листать фотки в глубь альбома.
Вопрос: как исправить этот момент в Colorbox?
2. Поэкспериментировал с вариантами example на сайте Colorbox. Example3 упорно встает криво (остальные нормально). Рамка (бордюр) справа и внизу фотки не видны, а кнопка пролистывания вперед съезжает немного к центру.
Вопрос: как исправить этот момент или он не лечится?
Ответ: 1. На память не помню, правда ли системный лайтбокс листает вглубь альбома, но если это так, то в моменте с установкой Colorbox этого не будет, тут я вам врядли помогу.
2. На каком именно сайте и какое конкретно решение вы имеете ввиду?
Адрес сайта укажите и ссылку на демо-страницу
Да, кстати, немного дополню: чтобы при открытии полноразмерного изображения не было английской версии описания типа "image 1 of 6", откройте для редактирования в файловом менеджере файл jquery.colorbox.js и найдите строку
перепишите её как вам нужно, например:
Вот теперь всё будет замечательно: "Изображение 1 из 6"