Вывод изображений и видео поверх содержимого — плагин prettyPhoto Media

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media | n-wp.ru Плагины
Плагин prettyPhoto Media - удобный инструмент для отображения больших изображений и встроенного в посты видео. Он выводит картинки в модальном окне, внешний вид и работа которого настраиваются.

Плагин prettyPhoto Media предоставляет отличные возможности концентрации внимания посетителей на изображениях и видео-материалах, выводя их в отдельном, модальном окне (поверх остального содержимого). Свою работу он сопровождает красивыми эффектами — затемнением фона, плавной сменой изображений. Помимо изображений и видео с помощью плагина можно вывести встроенное содержимое, флеш, iframe. В основе плагина лежит jQuery-скрипт prettyPhoto.

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (10)

Плагин отлично подходит тем, кто хочет уделить внимание картинкам — он выводит как отодельные картинки, так и создает галереи, снабжая каждую из картинок миниатюрой. Между изображениями в галерее можно переходить, используя кнопки навигации и клавиатуру, можно запускать последовательное слайд-шоу.

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

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (9)

Для того, чтобы изображение открывалось в отдельном окне, нужно в ссылку на него добавить rel=»селектор», где селектор — это удобный для вас указатель. Как правило, если вы использовали подобные плагины раньше, то наверняка пользовались селектором lighbox — можете его оставить

изображение

или использовать предлогаемый плагином rel=»prettyPhoto»

изображение

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (8)

Если на просматриваемой странице есть несколько ссылок с указанным в настройках указателем rel, то плагин объединяет их все в галерею. Чтобы модальное окно соответствовало общей цветовой гамме блога, можно использовать встроенные в плагин темы оформления.

Пример вставки одиночного изображения:

</pre>
<p><a href="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854.jpg" rel="attachment wp-att-12375"><img src="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854.jpg" alt="Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (1)" title="Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (1)" width="864" height="544" class="alignnone size-full wp-image-12375" srcset="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854.jpg 864w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854-700x441.jpg 700w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854-570x359.jpg 570w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_105854-500x315.jpg 500w" sizes="(max-width: 864px) 100vw, 864px" /></a></p>
<p>Пример вставки галереи изображений:</p>
<pre>




Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (2)

Пример вставки автоматического слайд-шоу:






Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (3)

Пример вставки flash:

</pre>
<p><a href="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317.jpg" rel="attachment wp-att-12372"><img src="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317.jpg" alt="Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (4)" title="Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (4)" width="915" height="438" class="alignnone size-full wp-image-12372" srcset="https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317.jpg 915w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317-700x335.jpg 700w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317-570x273.jpg 570w, https://n-wp.ru/wp-content/uploads/2012/04/tiaurus-2012-04-14_110317-500x239.jpg 500w" sizes="(max-width: 915px) 100vw, 915px" /></a></p>
<p>Пример вставки видео из YouTube:</p>
<pre>

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (5)

Пример вставки iframe:

<a href="http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com</a>

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (6)

Пример вставки встроенного в страницу содержимого:

<a href="#inline-1" rel="prettyPhoto"></a>
<div id="inline-1" class="hide">
    <p>This is inline content opened in prettyPhoto.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocodeaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Вывод изображений и видео поверх содержимого - плагин prettyPhoto Media (7)

Суммируя вышесказанное, думаю, что prettyPhoto Media — достаточно удобный плагин для начинающих блоггеров, с понятными настройками, удобным использованием и красивым результатом работы.

prettyPhoto Media

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. PlayApps

    Спасибки, попробуем.

    Ответить