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

Заинтересовала наша система? Тогда этот форум для Вас!

Вы не зашли.

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

graf
Участник
Откуда Днепр
Зарегистрирован: 2008-10-13
Сообщений: 394
Рейтинг :   

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

Установка галереи за 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)

Не в сети

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

v01d
Модератор
Зарегистрирован: 2008-10-14
Сообщений: 179
Рейтинг :   
Сайт

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

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

Спасибо.

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


Продвигай NGCMS,
скачай статью и на свой сайт повесь.
Геленджик - лучший отдых на Черном море

Не в сети

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

vl
VIP любит этого пользователя.
Откуда ua
Зарегистрирован: 2008-10-14
Сообщений: 672
Рейтинг :   14 
Сайт

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

v01d пишет:

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

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

Не в сети

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

t3s
Участник
Откуда планета The мля...
Зарегистрирован: 2009-04-09
Сообщений: 228
Рейтинг :   13 
Сайт

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

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

от чего зависят глюки пока не разобрался - пробовал на разных компах, на разных ОС (ХРень и убунту 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)


Проекты любой сложности. Качественно. Дорого.

Не в сети

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

Работает на FluxBB