ShadowBox JS и VideoGall — доработка напильником [update]

Автор kbaott, 07.06.2012 | Просмотров: 3 138 |

Все, что сказано ниже — относится к плагину Videogall только до версии 2.5.1 включительно. В более новых версиях Shadowbox был выпилен и вместо него засунули FancyBox,  который, у меня не заработал. Я с ним возится не стал, а просто не обновился до новой версии — меня и 2.5.1 с shadowbox’ом вполне устраивает. Если кому нужен плагин именно этой версии (2.5.1) — пишите в комментариях, выложу.

Все мы любим, когда на сайтах работают такие замечательные штуки как «лайтбоксы» — согласитесь, приятно ведь смотреть картинки на блоге во всплывающем окне с затемнением основы (фона). Само название «лайтбокс» пришло в интернет из реального мира — это устройство, являющее собой источник света с большой поверхностью. Лайтбоксы специально конструируются так, чтобы излучать максимально ровный свет, равный по яркости по всей их поверхности. В фото- и видеосъемке лайтбоксы чаще всего используются при съёмке предметов. Также их используют фотографы в плёночной фотографии для просмотра отснятых слайдов. На картинке видно, что устройство лайтбокс ночью работает примерно также как и скрипт вывода картинок — темный фон и светлое и яркое изображение. В общем я, как всегда, залез в дебри и лирические отступления. Приступим к работе. Есть два плагина: ShadowBox JS и VideoGall, которые можно выкачать из репозитория WordPress. Первый выводит картинки в красивом лайтбоксе, второй позволяет создавать на основе предыдущего галерею видео, которое также будет выводить в лайтбоксе. Красиво, но… не очень удобно.

Немного обновил пост: выложил архив с уже отредактированными файлами.

В этих скриптах по-умолчанию меня не устраивало следующее:

• невозможность «листать» картинки в пределах одной галереи нажатием на левую или правую части изображения, т.е. в ShadowBox есть возможность листать только при помощи мелких и неудобных кнопок навигации;
• отсутствие более или менее вменяемого оверлея (подложки), кроме простого одноцветного затемнения (opacity);

Решением этих двух задач и еще одной, которая вылезла в процессе, мы и займемся.

Кстати, после установки Shadowbox JS, плагин сказал, что ему не хватает каких-то файлов и их нужно дополнительно скачать. Я сделал следующее: зашел на официальный сайт этого скрипта — Shadowbox.js, скачал оттуда последнюю версию скрипта, распаковал и залил на сервер в те же папки, что указаны выше с полной заменой файлов. Так я избавил себя от геморроя, который вылазит при скачивании «дополнительных» файлов непонятно откуда.

1. Добавление оверлея.

Нажмите на картинку ниже, посмотрите на подложку — довольно красиво, не правда ли? Такой оверлей несложно сделать за пару минут в Фотошопе по своему вкусу, мне нравится этот — «полосатый», хотя вариантов может быть куча — решетка, линии, шахматная доска и т.п.

Итак, нам нужна будет картинка, если надо (или лень самим делать) — берите мою, вот. Теперь находим папку на сервере со скриптом:

• для чистого ShadowBox JS это — /wp-content/uploads/shadowbox-js/src/
• для VideoGall это — /wp-content/plugins/videogall/inc/shadowbox/

В этих папаках должны находиться два важных файла — shadowbox.js и shadowbox.css, если это так, то копируем картинку overlay.png в одну из этих папок (я скопировал в обе, на всякий случай). Если в Вашем случае пути к папкам с файлами java-скрипта и таблиц стилей иные, то кидайте overlay.png в папку именно с этими файлами. Открываем теперь shadowbox.css в любом текстовом редакторе, хотя я бы посоветовал использовать Notepad++. Находим в файле строку:

#sb-overlay{position:relative;height:100%;width:100%;}

И заменяем ее на:

#sb-overlay{position:relative;height:100%;width:100%; background:url(overlay.png) repeat 0 0;}

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

2. Листание «вперед» и «назад» по щелчку на картинке

Возвращаемся в папки, указанные выше, находим там shadowbox.js и shadowbox.css. Открываем в том же notepad++ файл shadowbox.js, к слову сказать отвратительный файл — никакого порядка в коде, все строки набраны без абзацев и отступов — «сплошняком», так что разбираться будет сложно. Находим в этом файле следующий кусок кода (он практически в самом конце файла):

<div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div>

Заменяем его на этот кусок:

<div id="sb-loading"><div id="sb-loading-inner" onclick="Shadowbox.previous()"><span>{loading}</span></div></div><div class="shdwbx"><a id="sb-nav-previousBox" onclick="Shadowbox.previous()"></a><a id="sb-nav-nextBox" onclick="Shadowbox.next()"></a></div></div></div>

Теперь открываем снова shadowbox.css и в самом конце добавляем следующие строки:

#sb-nav-previousBox{position:absolute;height:100%;top:0; left:0;width:50%;background: none;display:block;z-index:50;}
#sb-nav-previousBox:hover{background:url(previous.png) no-repeat center left;  cursor:pointer;}
#sb-nav-nextBox{position:absolute;height:100%;top:0;width:50%; left:50%; background:none;display:block;z-index:50;}
#sb-nav-nextBox:hover{background:url(next.png) no-repeat center right; cursor:pointer;}
.shdwbx{background: url(inr.png) repeat scroll left top transparent;height: 80%; top: 0;left: 0;margin: 0;position: absolute; width: 100%;z-index:5000;}

Данный метод перелистывания картинок будет работать только в режиме стандартной галереи WordPress, т.е. разрозненные картинки по всему посту так листаться не будут. Хотя если использовать стандартные кнопки — то изображения меняться будут. Над этим я пока не работал, так как не было необходимости. Если появятся какие-то новые идеи — выложу отдельным постом.

А теперь можно и упомянуть о проблеме, которая вылезла в процессе добавления возможности листания. Так как в связке с  ShadowBox JS я использую еще и VideoGall, в котором можно просто указывать ссылки на видео с Youtube и др. для вставки на блог, я решил поэкспериментировать с Rutube.ru и с видео из «Вконтакте» и к моему вящему удивлению VideoGall с удовольствием подхватило это видео и замечательно показывает его, разве что только превью (т.н. thumbnail) не создает. Видео с Youtube и Rutube добавилось отлично и все органы управления в лайтбокс-окне работают, а вот видео из VK никак не реагировало на нажатия на кнопки (играть/пауза, громкость и т.п.). Так вышло из-за убогого формата плеера «Вконтакте». Я решил эту проблему следующим образом: в css-коде, который был добавлен последним в строке .shdwbx  я использовал следующий параметр height: 80%; top: 0; . Объясню: когда на картинку/видео накладывается «слой» с управляющими кнопками шириной в 50% от ширины картинки и высотой 100% от высоты картинки, он перекрывает собой кнопки управления вконтактовского плеера, с Youtube и Rutube такой причуды не случилось. Поэтому я и использовал параметры height: 80%; top: 0;  чтобы просто «приподнять» листающий слой чуть-чуть выше и тем самым освободить от него место над кнопками плеера. Возможно есть решение и проще и умнее, но я его не нашел, что получилось — то получилось.К сожалению большая центральная кнопка «играть» в плеере также и осталась мертвой, но я думаю это не очень большая плата за другие удобства.

Замечу, что данный метод нужен только в том случае если вы используете VideoGall и Вам просто необходимо вставлять видео из «Вконтакте»!

А вот и обещанный в начале поста архив: shadowbox

3. Где брать ссылки на видео для VideoGall?

Для Youtube:

Для Rutube:

Для «Вконтакте»:

Надеюсь эта статья кому-то помогла. Оставляйте свои замечания по поводу, поправки к коду. Возможно кто-то придумает более элегантный способ «победить» тупой плеер Дурова.

Метки: shadowbox, videogall, vkontakte, wordpress, youtube, блог, веб-дизайн, видео
Писано 07.06.2012

Понравилась статья? Тогда получайте обновления на e-mail: