Фотогалерея prettyPhoto–код и плагин для WordPress



PrettyPhoto – это скрипт галереи с плавным и красивыми выводом увеличенного изображения, текста, видео, или контента с  другого сайта.

Знания о настройке галереи PrettyPhoto должны быть в арсенале любого вебмастера. Это тот самый скрипт, который поможет решить, практически любую задачу по выводу мультимедийного содержания вашего сайта. Скрипт простой, легкий, удобный и понятный в настройках, так что, смело его можно отправлять в разряд “мастхев”.

Для тех, кто не в курсе – пару слов о самом понятии “красивый вывод”.

Есть у вас, к примеру, красивое изображение с размерами 800 на 600 пикселей, и вы хотите его вставить на свой сайт. Можно, конечно, просто вставить это фото в нужное место статьи, и не заморачиваться всякими дополнительными скриптами и плагинами. Но такой подход, далеко не всегда будет уместен.

Поясню. Одно большое изображение в статье ещё и может пройти. Да и то, оно будет смотреться слишком громоздким и занимать много места. Мониторы у всех разные, скорости интернета тоже, хорошего эффекта от большого изображения не всегда удаётся получить. А если фотография значительно шире, чем размер поля для статьи? А если таких изображений не одно, а несколько? Вот тут и приходит на помощь скрипт PrettyPhoto. Вы хоть десяток фотографий в статье размещайте, все они будут аккуратно и красиво выводиться во всплывающем окне со стрелками переходов, заголовками и описаниями. А сами миниатюры можно делать любого размера, хоть по 10 пикселей, и размещать в нужном порядке в статье.

Вот такой вывод изображения достигается с помощью скрипта PrettyPhoto: :good:

скрипт prettyphoto
Cкрипт prettyphoto

Удобство налицо. Теперь переходим к освоению скрипта галереи PrettyPhoto.

Автор этого популярного скрипта – канадский программист Стефан Каррон (Stephane Caron). Денег за свою работу он не берёт, принимает лишь добровольные пожертвования, за что ему отдельное спасибо и уважение. Ещё неизвестно, какова была бы судьба этой разработки, если бы Стефан сразу сделал её платной, а так – известность на весь мир. Хороший пример правильного и мудрого подхода к делу.

Давайте рассмотрим два вида установки скрипта – с помощью кода и с помощью плагина для WordPress.

Установки и настройка фотогалереи PrettyPhoto

  • Сначала идем на сайт разработчика и скачиваем последнюю версию скрипта.
  • Распаковываем. Файл стилей размещаем в папочку CSS, файл jquery.prettyPhoto.js размещаем в папку JS.

Теперь вставка кода на нужную страницу.

  • В секции <head> подключаем нашу галлерею:
  • Если у вас ещё не установлена библиотека jQuery, её надо подключить, если есть, то этот шаг можно пропустить:
  • Теперь подключаем саму галерею PrettyPhoto и стили:
  • Ещё надо добавить скрипт с настройками. Его можно вставить перед тегом </body> или </head>:

Вот список настроек для вывода скрипта:

 

Теперь к тому изображению, которое вы будете выводить с помощью скрипта PrettyPhoto надо добавить ссылку на большое изображение с атрибутом  rel=”prettyPhoto”

 

Для вывода видео с YouTube код будет такой

 

Для вывода галереи надо добавить идентификатор этой галереи: rel=»prettyPhoto[gallery1]»

Все изображения из одним идентификатором будут выводиться в режиме галереи с навигацией. На странице может быть несколько галерей, для каждой надо добавлять свой, уникальный идентификатор.

Все остальные примеры вы сможете увидеть на сайте разработчика.

Обратите внимание: Атрибут title вашей ссылки будет выводиться внизу всплывающего окна. Атрибут alt будет выводиться вверху всплывающего окна.

Если, вдруг, у вас возникнет необходимость разместить в этих подписях разнообразные теги, то надо слегка подправить код.

Ищем в файле jquery.prettyPhoto.js вот такой код

 

и заменяем его на другой:

 

Теперь вывод вашего изображения будет выглядеть несколько иначе:

 

Немного сложнее, зато можно вставлять любую необходимую информацию.

Плагин PrettyPhoto для WordPress

Если совсем не хочется заморачиваться с кодом и ваш сайт на движке Вордпресс, то задача с решается совсем просто.

Ищем плагин wp-prettyPhoto через поиск в админке. Скачиваем, устанавливаем, активируем.

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

Если хотите делать это самостоятельно, добавьте к ссылке с изображением атрибут rel=»wp-prettyPhoto»

Всё то, что вы разместите в атрибуте Alt будет заголоквом всплывающего окна

Вот и все настройки. Остаётся только любоваться красивым выводом медийного контента в своих статьях.

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Фотогалерея prettyPhoto–код и плагин для WordPress»

  1. Tim:

    Добрый вечер! Подскажите пожалуйста как удалить prettyphoto из темы Onetone от MageeWP. Так как возникла проблема: на сайте был установлен плагин Fancybox и по умолчанию стоит prettyphoto. При нажатии на картинку открывается сразу два изображения.

     

  2. артём:

    Highslide заработал, спасибо

    1. артём, ну и замечательно. Можно ещё и fancy box попробовать подключить, тоже неплохо смотрится.

      Удачи!  :bye:

  3. артём:

    Спасибо за ответ. graphics не помог. Другой шаблон не могу взять, т.к уже сайт на 80% сделан. Можете ли помочь в правильной прописке кода PrettyPhoto?

  4. артём:

    Приветствую. У вас все подробно описано. Делаю по инструкции.При нажатии на одну картинку из галереи ( т.е иконку) картинка появляется, но в левом верхнем углу, без рамки и стрелок для перелистывания. Устанавливал штук 5 подобных скриптов (slimbox, quickbox)- везде то же самое. Прошу помощи- бьюсь 2 дня. Спасибо

    1. артем, довольно частая ситуация со скриптами всплывающих окон для изображений. Происходит это дело из-за конфликта подключённых скриптов шаблона и кода PrettyPhoto. Тут, либо ручками подключать скрипт в самый низ темы, либо шаблон менять, либо искать другой скрипт для вывода изображений во всплывающих окнах. Обычно, если PrettyPhoto не подключается, подходит код Highslide.

      Удачи! :bye:

  5. проблема с видеороликами Ютуб: видео открывается в новом окне на ютубе, всплывающего фрейма на блоге нет как я ни старался :unsure:

    1. Альберт, а вы какой адрес вставляете? Если тот, который из вкладки «поделиться», то он не работает. Надо тот, который из адресной строки, сверху. Всё прекрасно работает.

      Удачи! :bye:

  6. Добрый день! Прочитал Вашу статью про prettyPhoto. Столкнулся со следующей проблемой. Установил тему на вордпресс. Там уже встроен данный код. Но при переходе с главной страницы на другие, происходит растяжение страницы в высоту, появляется скроллинг и фон съезжает. Не знаю как настроить. Похоже что высоту и скроллинг как раз настраивает js

    1. wwdiz:

      Вадим, обычно такое случается тогда, когда в статье не закрыт тэг div. Есть желание — ищите либо в коде вывода, либо в коде статьи.

      А более оптимальный вариант, это сменить тему. Если уже в самом начале косяки пошли, то, кто знает, что там ещё понапихано. Уж чего-чего, а тем интересных для WP сколько хочешь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)