Установка галереи NFLightBox + jquery

graf · 2010-02-27 03:06:36

Установка галереи за 5 минут офф.сайт + демо http://www.notesfor.net/post/NotesForLightBox.aspx

1. Качаем фреймворк и плагин галереии http://www.notesfor.net/file.axd?file=NFLightBox.zip

2. Извлекаем папки файлы из архива. В ариве 3 папки css images js, Копируем их в папку с вашим шаблоном.

3. В шаблоне main.tpl подключаем файлы js и css

<head>
......
<link href="{tpl_url}/css/nf.lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="{tpl_url}/js/jquery-1.3.2.min.js" type="text/javascript"></script>   
<script src="{tpl_url}/js/NFLightBox.js" type="text/javascript"></script>
......  
</head>

4. Далее инициализируем нашу галерею и настраиваем стили, при которых запускается галерея

<head>
 ......
<script type="text/javascript">   
    $(function() {   
        $('#gallery a').lightBox();   
    });    
</script>  
...... 
</head>

5. Настройки галереи. Открываем NFLightBox.js и редактируем под себя. Внимание, обязательно прописываем пути к изображением элементов интерфейса . Ниже перевод настроек:

overlayBgColor – используется для задания цвета промежуточного слоя.
overlayOpacity – задает прозрачность промежуточного слоя. Можно использовать значения от 0 до 1.
imageLoading - /templates/имя_вашего_шаблона/images/loading.gif //путь к файлу изображения соответствующего элемента управления
imageBtnPrev - /templates/имя_вашего_шаблона/images/prev.png //путь к файлу изображения соответствующего элемента управления
imageBtnNext - /templates/имя_вашего_шаблона/images/next.png //путь к файлу изображения соответствующего элемента управления
imageBtnClose - /templates/имя_вашего_шаблона/images/close.png //путь к файлу изображения соответствующего элемента управления
imageBlank - /templates/имя_вашего_шаблона/images/lightbox-blank.gif //путь к файлу изображения соответствующего элемента управления
imageBtnBottomPrev - /templates/имя_вашего_шаблона/images/btm_prev.gif //путь к файлу изображения соответствующего элемента управления
imageBtnBottomNext - /templates/имя_вашего_шаблона/images/btm_next.gif //путь к файлу изображения соответствующего элемента управления
imageBtnPlay - /templates/имя_вашего_шаблона/images/start.png //путь к файлу изображения соответствующего элемента управления
imageBtnStop - /templates/имя_вашего_шаблона/images/pause.png //путь к файлу изображения соответствующего элемента управления
containerBorderSize – по умолчанию 10, определяет ширину рамки вокруг просматриваемого изображения.
containerResizeSpeed – по умолчанию 500, время в миллисекундах, за которое будет изменяться размеры области просмотра изображения при переходе от одного изображения к другому.
txtImage – текст в галерее
txtOf – текст в галерее
txtPrev – текст в галерее
txtNext – текст в галерее
keyToClose - «горячие» клавиши
keyToPrev - «горячие» клавиши
keyToNext – «горячие» клавиши
slideShowTimer – по умолчанию 5000, т.е.если Вы запустите слайдшоу, то изображения будут меняться каждые 5 секунд.

Варианты выбора стилей, при которых запускается галерея

// Используем эту строку, или...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// эту, или...
$('#gallery a').lightBox(); // Выбирает все ссылки которые находятся в контейнере id="gallery"
// эту, или....
$('a.lightbox').lightBox(); // Выбирает все ссылки с классом class="lightbox"
// эту, или....
$('a').lightBox(); // Выбирает все ссылки
// ... Существует возможность самим указать стили, при которых запускается галерея

6. А теперь собственно последний шаг, идем в шаблоны news.full.tpl news.short.tpl и другие где вы хотите чтобы работала галлерея и переменную, которая выводит контент заключаете в id="gallery"
Например news.full.tpl:

<div id="gallery">{short-story} [more][/more] {full-story}</div>

Далее при помощи css можно оформить нужный вывод тумблейтов

Изменено graf (2010-02-28 19:57:54)

v01d · 2010-04-08 14:27:36

Замечательно расписал.
Одна беда, все ссылки в том числе и на сайты и другие страницы будут пытаться открывать через lighbox.
Это при подходе <div id="gallery">{short-story} [more][/more] {full-story}</div>
Нужен другой способ.

Спасибо.

Изменено v01d (2010-04-24 10:21:46)

vl · 2011-01-16 18:22:24

v01d пишет:

Одна беда, все ссылки в том числе и на сайты и другие страницы будут пытаться открывать через lighbox. Это при подходе <div id="gallery">{short-story} [more][/more] {full-story}</div>

Я перед ссылками закрываю див, а после ссылок снова открываю див id="gallery". Все работает

t3s · 2011-05-12 18:06:04

в операх бока, причем не нашел четкой закономерности от чего они зависят
на некоторых сайтах работает, если первый раз открыть... если закрыть (нажав на иконку) и открыть снова - не работает
на других не работает вообще. никак.

от чего зависят глюки пока не разобрался - пробовал на разных компах, на разных ОС (ХРень и убунту 10.10), на разных операх (11.10 и 11), ковыряться в 70 кб скрипте не особо хочется...

дабы не плодить новых топиков и с разрешения ТС опишу как использовать альтернативный лайтбокс, который отлично работает под оперой и который работает быстрее

пример вот тут
http://leandrovieira.com/projects/jquery/lightbox/#example
за исключением того, что сам лайтбокс получился в 3.5 раза меньше, для посетителя особой разницы нету

там же и забираем архив со скриптами и стилями
так же само раскидываем файлы по папкам css, images и js
так же само подключаем... стоп, нифига не так же само - рекомендую заставить пример работать быстрее, все-таки один из плюсов нг - это скорость

первую строку из примера рекомендую заменить на вот такую

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

т.е. саму jquery (а это 50 кб) мы будем грузить не со своего сайта, а с гугловского сервера
во-первых, сэкономим трафик и ресурсы своего сервака, а во-вторых у большинства посетителей гугловский jquery уже загружен, т.е. они вообще ничего загружать не будут - ведь большинство хотя бы раз пользоваось гугловскими сервисами (почта, ютуб и т.д.)
следовательно страница откроется на пару сек. быстрее...

перед тем как добавить вторую строку из примера, рекомендую проделать следуещее:
1. сначала замените в файле jquery.lightbox-0.5.js пути к картинкам (next, prev и т.д.) - это строки 30-34
2. идем вот сюда http://service.webamator.ru/js_optimiser.php , затем вбиваем в форму содержимое скрипта и жмем "сжать"
у меня получилось Compression Ratio 53% - т.е. 20 килобайт превратилось в 9
3. результат из нижнего поля сохраняем в какой-нить файл - например jquery.lightbox-0.5.min.js (в архиве уже есть такой файл, просто менять пути в сжатых файлах неудобно - поэтому и предлагаю сначала изменить пути а потом сжать)

т.е. следующая строка у нас получается такая

<script type="text/javascript" src="{tpl_url}/js/jquery.lightbox-0.5.min.js"></script>

если вы делаете по мануалу на сайте разработчика то будьте внимательны - там в разделе "How to use" в качестве примера указан jquery.lightbox-0.4.js
строка должна содержать ссылку на корректный и существующий файл!

затем ставим вот это

<script type="text/javascript">
$(function() {
	$('#gallery a').lightBox({fixedNavigation:true});
});
</script>

вот это (или свои стили - оформите как захотите)

        #gallery
        {
            background-color: #ddd;
            padding: 10px;
            width: 98%;
        }
        #gallery ul
        {
            list-style: none;
        }
        #gallery ul li
        {

            float:left;
            height: 120px;
        }
        #gallery ul img
        {
            border: 5px solid #ddd;
            border-width: 5px 5px 20px;
            padding:5px;
        }
        #gallery ul a:hover img
        {
            border: 5px solid #fffff4;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        #gallery ul a:hover
        {
            color: #fff;
        }

рекомендую поставить в конце файла jquery.lightbox-0.5.css

в итоге мы "сэкономили" около 60 килобайт по сравнению с автором лайтбокса и около 110 килобайт по сравнению с тем вариантом, что предложил graf

можно ли сделать еще быстрее?
можно - например если сделать для галлереи отдельный раздел и под этот раздел сделать отдельный шаблон... в этом случае используемые скрипты и стили будут загружаться только для страниц с фотогаллереей - все остальные не будут загружать "лишнего"

Изменено t3s (2011-05-12 20:08:45)

Next Generation CMS :: Форум поддержки

Объявление

#1 2010-02-27 03:06:36

Установка галереи NFLightBox + jquery

#2 2010-04-08 14:27:36

Re: Установка галереи NFLightBox + jquery

#3 2011-01-16 18:22:24

Re: Установка галереи NFLightBox + jquery

#4 2011-05-12 18:06:04

Re: Установка галереи NFLightBox + jquery

Подвал раздела