Хаки и Скрипты Next Generation CMS

Jquery плагин галереи PrettyPhoto

irbees2008 irbees2008 Опубликовано - 19 - ноября Диалоги и lightbox
6208 - 0
  • Автор: 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.вот и все подробнее в документации

Можешь почитать и вот эту статейку "Слайдер на плагине jQuery «Parallax Slider»"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.523сек
  • Потребление памяти: 5.175 Mb 
  •   Яндекс.Метрика