6250
- 0
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>
Код:
<link rel="stylesheet" href="{tpl_url}/css/prettyPhoto.css" type="text/css" media="screen" />Код:
<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>
Прописываем скрипт (желательно перед
Код:
</body>
Код:
<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());Код:
<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.вот и все подробнее в документации
Можешь почитать и вот эту статейку "Меняем флеш облако тегов на canvas облако"
Это тоже интересно
27.11.13FerroMenu JQuery плагин
04.10.17Бегущая строка на Jquery
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.