PrettyPhoto - плагин jQuery для создания красивых модальных окошек в духе LightBox для любого контента: картинки, флеш-ролики, видеоклипы. Это всплывающий слайдер и галерея в одном флаконе.
Выглядит довольно здорово, разрабочтик для комплекта пришпилил кнопки фейсбука и твиттера, управляется стилями (увесистый файл, при желании можете удалить неиспользуемые), подключается легко, особенно в Blogger.
Установка скриптов.
Помимо jQuery, в блог подключаются скрипт плагина PrettyPhoto в ввиде ссылки между тегами <head></head>:
<script type="text/javascript" src="трололо-ваш-хостинг/jquery.prettyPhoto.js"></script> <link rel="stylesheet" href="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css"/>Скачать всё это можно отсюда, с сайта плагина.
Обратите внимание, что для стилей я дал линк файла css, который находится на хостинге проекта.
Дело в том, что этот файл перегружен ссылками на картинки элементов окна (я было начал переделывать пути, но потом плюнул). Владельцы standalone блогов (т.е. с хостингом) могут скачать архив и папку с картинками /images положить к себе на сайт, подгадав относительные пути, поэтому всё будет работать.
Тем, у кого блог на Blogger'е, придётся повторить такой же трюк с внешним хостингом, или перезалить изображения на пикасу, плюс исправить туеву хучу путей в стилях, либо довольствоваться очень нехорошим делом - хотлинкингом (т.е. тянуть статику с сервера разработчика). По-моему, проще обойтись бесплатным хостингом на 1.5 гига.
В стилях прописаны ссылки типа ../images/prettyPhoto/default/sprite.png.
Можно сделать так (актуально для Blogger): создать в корне хостинга папку prettyphotoplugin (например) и скопировать в неё папку images со всем содержимым.
Можно сделать так (актуально для Blogger): создать в корне хостинга папку prettyphotoplugin (например) и скопировать в неё папку images со всем содержимым.
Скрипт подключения (копипастим туда же):
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>За подробностями идём в документацию.Демо с картинкой:
В Blogger очень удобно использовать этот плагин, потому что загрузчик изображений блога в пикасу автоматически создаёт почти правильную ссылку, из которой можно выкинуть div с анкором, но главное - добавить атрибут rel="prettyPhoto":
<a href="http://1.bp.blogspot.com/-mUzYKxjxqBM/TsX0JbcosvI/AAAAAAAAHJk/WfqdlFYl7Zw/s1600/youtube-fire-orig-blogger-omg-linux-ru.png" rel="prettyPhoto" title="Зажигай вместе с Youtube"><img src="http://4.bp.blogspot.com/-uxP_98fuV-Y/TsXsWiGKjWI/AAAAAAAAHJA/zJB0vioG1Uo/s320/youtube-fire-blogger-omg-linux-ru.png" width="180" height="94" alt="Ништяк картинка↓" /></a>Здесь нужно серьёзно отнестись к строению ссылки (см. ниже скриншот, на котором я цветами отметил взаимоотношения кода и результата модального окна)↓
Голубой - заголовок, используется alt="Ништяк картинка↓"
Красный - картинка в "полный рост" используется src="ссылка"
Зелёный - описание/дискрипшн, но вообще это заголовок title="Зажигай вместе с Youtube"
Демо в виде галереи (арт-пак №111):
С картинками конечно PrettyPhoto работает на "питёркусплюсом": увеличивает, уменьшает, есть продвинутые кнопки навигации.
В этом примере я закачал в блог 5 изображений, применил ко всем, кроме одного (оставил для входа в галерею), правило display:none, чтобы скрыть их на странице.
Для инициации скрипта здесь используется атрибут rel="prettyPhoto[pp_gal]". В остальном всё тоже самое, что и с одиночной картинкой.
Демо с видеоклипом (Youtube):
<a href="http://www.youtube.com/watch?v=2xB4dbdNSXY" rel="prettyPhoto" title=""><img src="http://img.youtube.com/vi/2xB4dbdNSXY/0.jpg" alt="YouTube" width="320" /></a>
Здесь используется полная ссылка на видеоклип ютуба, атрибут rel="prettyPhoto", заголовок и описание как в первом примере, и ссылка на скриншот ролика.
Где взять такой скриншот? Чтобы не мучаться, идём смотреть статью "Thumbnail или автоскриншот для Youtube". Забиваем в поле формы ссылку на видеоклип, получаем результат в виде большой картинки, на которую нужно нажать правой клавишей мыши и скопировать в буфер обмена ссылку на картинку. Эту ссылку вставляем в img src.
На офсайте плагина PrettyPhoto выложена куча примеров для слайдшоу, фреймов, квиктайм и других медийных штуковин.
Темы окна.
Посмотрите, что находится внутри архива в /images/prettyPhoto/
Название папки является названием темы. Вернёмся к скрипту подключения (см. выше). Помимо темы здесь можно указать настройки поведения окна, анимации и т.п.
Делается это вот таким образом (полный вариант скрипта):
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square'
});
});
</script>зы: скриншоты сделаны c помощью фоторедактора Gimp.
Во всех этих галереях мне не нравится только одно: трудно получить ссылку на конкретное изображение, например, чтобы отослать её кому-то, не объясняя "открой третью галерею сверху и нажми 5 раз вправо".
ОтветитьУдалитьВроде ж url для изображения вполне читаемый http://blogger.omg-linux.ru/2011/11/prettyphoto-jquery-plagin-dlya.html#!prettyPhoto1[pp_gal]/2/
ОтветитьУдалитьДействительно, как-то сразу не заметил. Правда, ссылку на саму картинку (jpg/png/etc.) всё равно не так просто получить.
ОтветитьУдалитьПолучить то её просто, а вот запостить автоматизированно нигде удасться (форумы с бб кодами не понимают лишние с их точки зрения символы в ссылке), кроме блога через a href.
ОтветитьУдалитьпожалуйсто помогите советом. как добавить кнопку facebook like в эту галлерею.
ОтветитьУдалитьЯ не очень разбираюсь в видах кнопок фейсбука, но в PrettyPhoto одна такая есть, и твиттера тоже.
ОтветитьУдалитьА как получить ссылку? Например, мне под фото нужно добавить кнопку "скачать фото".
ОтветитьУдалитьДелайте обычную ссылку на файл картинки, которую вы захостили на Пикасе.
УдалитьПодскажите,а то уже мозг вынес себе.) Все работает,только не нравится дизайн prettyPhoto как и где его можно изменить,спасибо
ОтветитьУдалить