Интересный плагин для вывода картинок и медиафайлов
 |
Давно искал интересный плагин для textpattern, который выводил бы изображение во всплывающем окне. И желательно – делал бы это красиво! Вот нашел такую разработку от John Einselen и его mediaboxAdvanced 1.2.4. В этой статье покажу пример того, что он может. |
Этот плагин можно использовать не только в textpattern, но в любой другой cms, на любом сайте. Для меня его важность в том, что при выводе группы изображений можно осуществлять навигацию по ней как с помощью линков, так и с помощью клавиатуры: выход по esc, навигация назад ←, навигация вперед → и использование коротких клавиш: выход x, закрытие c, предыдущее p и последующее n. Так же всплывающее окно будет смасштабировано под размер окна вашего браузера, если картинка бОльшего разрешения.
Установка:
1. Скачайте файл с кодом на JavaScript самого плагина mediaboxAdv-1.2.4 у меня на сайте, либо с сайта разработчика.
2. Скачайте файл с кодом на JavaScript “MooTools Core – a compact javascript framework”, без которого плагин работать не будет, у меня на сайте, либо со странички сайта разработчика.
3. Скачайте файлы CSS с двумя видами оформления плагина:
— черный стиль: у меня на сайте, либо с сайта разработчика;
— белый стиль: у меня на сайте, либо с сайта разработчика.
4. Скачайте zip-файл с изображениями, используемыми в файлах оформления CSS (включает оба стиля) либо у меня на сайте, либо с сайта разработчика.
5. Загрузите эти файлы к себе на сервер в необходимые каталоги. Я использую каталог /js для файлов скрпитов на JavaScript, каталог /images для хранения изображений, каталог /css для хранения файлов сторонних стилей.
6. Отредактируйте файлы стилей CSS в соответствии со своей структурой сайта. Т.е. укажите там каталоги с распакованными изображениями для выбранного вами стиля (black или white).
7. Внесите в секцию HEAD вашего сайта что-то вроде этих строчек:
<head>
...
<link rel="stylesheet" href="/css/mediaboxAdvBlack.css" type="text/css" media="screen" />
<script src="/js/mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script src="/js/mediaboxAdv-1.2.4.js" type="text/javascript"></script>
...
</head>
Я выбрал черный стиль для показа изображений, и указал в каких именно каталогах лежат скаченные мной файлы стиля и файлов на JavaScript. (Вам следует выбрать один стиль из двух. При указании в секции HEAD двух стилей одновременно, будет использоваться тот, что прописан выше).
На этом установка закончена. Теперь вам осталось загрузить к себе на сайт какое-нибудь изображение, создать в textpattern новую статью и прописать в ней следующие строки (главное тут – rel = “lightbox”):
<a href="/images/373.jpg" rel="lightbox" title="Улыбка"><txp:thumbnail id="373" /></a>
для показа одиночного изображения. Результатом вашей работы будет следующее (кликните по изображению):
Пример 1
В опубликованном выше коде важен title, который будет выводится во всплывающем окне слева внизу. Выход из окна можно осуществить несколькими способами. Нажать на линк close, нажать клавишу esc, c или x. Посмотрим еще раз:
Если вы хотите показать группу изображений с возможностью навигации по ней, то внесите в свою статью следующие строки (главное тут – rel = “lightbox[set1]”):
<a href="/images/374.jpg" rel="lightbox[set1]" title="Острова (картинка 1)"><txp:thumbnail id="374" /></a>
<a href="/images/375.jpg" rel="lightbox[set1]" title="Острова (картинка 2)"><txp:thumbnail id="375" /></a>
<a href="/images/376.jpg" rel="lightbox[set1]" title="Острова (картинка 3)"><txp:thumbnail id="376" /></a>
<a href="/images/377.jpg" rel="lightbox[set1]" title="Острова (картинка 4)"><txp:thumbnail id="377" /></a>
<a href="/images/378.jpg" rel="lightbox[set1]" title="Острова (картинка 5)"><txp:thumbnail id="378" /></a>
Результат вашей работы будет выглядеть примерно так (кликните по любому изображению):
Пример 2
 |
 |
 |
 |
 |
Навигацию по группе изображений можно осуществлять как с помощью кликов по линкам next и previous, так и с помощью клавиатуры (это описано выше). Так же во всплывающем окне вам покажут какое это изображение из общего числа в группе. Посмотрим еще раз:
Если вам необходимо разместить на одной странице несколько групп изображений с навигацией по ним, вам нужно немного подправить предыдущий код следующим образом (укажите для второй группы изображений набор [set2]):
<a href="/images/379.jpg" rel="lightbox[set2]" title="Космос (картинка 1)"><txp:thumbnail id="379" /></a>
<a href="/images/380.jpg" rel="lightbox[set2]" title="Космос (картинка 2)"><txp:thumbnail id="380" /></a>
<a href="/images/381.jpg" rel="lightbox[set2]" title="Космос (картинка 3)"><txp:thumbnail id="381" /></a>
И результат будет таким же, как и во втором примере:
Пример 3
 |
 |
 |
Выводом изображений во всплывающем окне этот плагин не ограничивается. У него есть еще много интересных функций, такие как вывод видео с YouTube и других. Вот так, например, можно красиво вывести видео с YouTube:
Пример 4
Для этого вам надо вставить к себе следующий код:
<a rel="external" href="http://www.youtube.com/watch?v=4tV4ZpMnLgA" rel="lightbox[social 480 380]" title="www.youtube.com">*Видео - Приколы про животных*</a>
Полностью о возможностях mediaboxAdvanced 1.2.4 вы можете прочитать на сайте разработчика.
Вот и все, удачи!
