Хаки и Скрипты Next Generation CMS : Диалоги и lightbox, JS : Jquery плагин галереи PrettyPhoto

irbees2008 Опубликовано - 19 - ноября Диалоги и lightbox

Автор: PrettyPhoto
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

PrettyPhoto — это простая галерея с огромными возможностями. Она поддерживает не только изображения, но и видео (в том числе с youtube и vimeo), flash, frame и AJAX. Эту галерею можно легко настроить под себя, внеся изменения в скрипт. В комплекте идут 6 тем оформления, которые позволяют легче подстроится под дизайн сайта.

1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку вашего шаблона.
2. Подключаем скрипты, первым делом jQuery, если он у Вас еще не подключен, а затем и скрипт PrettyPhoto.

Код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

3. Подключим стили галереи

Код:

<link rel="stylesheet" href="{tpl_url}/css/prettyPhoto.css" type="text/css" media="screen"   />

4.HTML разметка для галереи изображений

Код:

<ul class="gallery clearfix">
    <li><a href="{tpl_url}/images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]

" title="Описание снизу"><img src="{tpl_url}/images/thumbnails/t_1.jpg" width="60" height="60" alt="Название вверху" /></a></li>
    <li><a href="{tpl_url}/images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]

"><img src="{tpl_url}/images/thumbnails/t_2.jpg" width="60" height="60" alt="Название вверху" /></a></li>
    ...
</ul>

В теге rel ссылки мы указали в квадратных скобках, что это галерея 1 (для вывода одного изображения нужно оставить только prettyPhoto), в атрибуте title прописывается описание (выводится под изображением) и в атрибуте alt у изображения прописывается название (выводится над изображением).
Прописываем скрипт (желательно перед

Код:

</body>

но можно и в head)

Код:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Передаем параметры

Код:

<script type="text/javascript">
    $(document).ready(function(){
        $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
            animation_speed:'normal',//скорость анимации
            theme:'light_square',//тема оформления
            slideshow:3000,//время показа слайда
            autoplay_slideshow: true//автоматический старт слайдшоу
        });
    });
</script>

Описание всех параметров можно посмотреть в самом скрипте.
5. Разметка для вставки видео с youtube

Код:

<a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a>

Для вставки видео достаточно всего лишь прописать ссылку на страницу с видео.
6. Разметка для вывода содержимого какого-либо блока

Код:

<a href="#block" rel="prettyPhoto" title="Контент">Контент из блока с id=block</a>

Данная галерея обладает еще множеством возможностей и различными настраиваемыми параметрами. Обо всем остальном Вы можете узнать из файлов демонстрации, а я же хотел бы обратить внимание на одну вещь…
В этой галереи меня не устроил вывод названия и описания, точнее то, откуда они берутся (title и alt). В атрибуты нельзя прописать теги, точнее можно, но не удобно. И для этого я кое-что изменял в скрипте на 154 и 155 строке. Первоначально они выглядели так:

Код:

pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('img').attr('alt')) ? $(n).find('img').attr('alt') : ""; }) : $.makeArray($(this).find('img').attr('alt'));
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

После изменения так:

Код:

pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.description').html()) ? $(n).find('div.description').html() : ""; }) : $.makeArray($(this).find('div.description').html());
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.title').html()) ? $(n).find('div.title').html() : ""; }) : $.makeArray($(this).find('div.title').html());

И после этого вовнутрь ссылки добавил два блока div:

Код:

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]">
    <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Изображение 1" />
    <div class="title" style="display: none;">Название</div>
    <div class="description" style="display: none;">Описание</div>
</a>

Таким образом в описание легко можно добавлять и ссылки и параграфы и все остальное.
7. Кнопка поделиться от яндекс
Так как галерея изменяет url адрес и открывает контент в зависимости от адреса, то в ней есть возможность добавления кнопок от социальных сетей, что бы ставить лайки и делиться ссылкой. Изначально там есть кнопка twitter и facebook. И для того, что бы внедрить в нее кнопку от яндекса необходимо в самом скрипте заменить содержимое social_tools (строка 93), на то, что получите от яндекса.
8.вот и все подробнее в документации

Можешь почитать и вот эту статейку "Изменяем формат вывода плагина "хлебные крошки""

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.