Все, что сказано ниже — относится к плагину Videogall только до версии 2.5.1 включительно. В более новых версиях Shadowbox был выпилен и вместо него засунули FancyBox, который, у меня не заработал. Я с ним возится не стал, а просто не обновился до новой версии — меня и 2.5.1 с shadowbox’ом вполне устраивает. Если кому нужен плагин именно этой версии (2.5.1) — пишите в комментариях, выложу.
Все мы любим, когда на сайтах работают такие замечательные штуки как «лайтбоксы» — согласитесь, приятно ведь смотреть картинки на блоге во всплывающем окне с затемнением основы (фона). Само название «лайтбокс» пришло в интернет из реального мира — это устройство, являющее собой источник света с большой поверхностью. Лайтбоксы специально конструируются так, чтобы излучать максимально ровный свет, равный по яркости по всей их поверхности. В фото- и видеосъемке лайтбоксы чаще всего используются при съёмке предметов. Также их используют фотографы в плёночной фотографии для просмотра отснятых слайдов. На картинке видно, что устройство лайтбокс ночью работает примерно также как и скрипт вывода картинок — темный фон и светлое и яркое изображение. В общем я, как всегда, залез в дебри и лирические отступления. Приступим к работе. Есть два плагина: ShadowBox JS и VideoGall, которые можно выкачать из репозитория WordPress. Первый выводит картинки в красивом лайтбоксе, второй позволяет создавать на основе предыдущего галерею видео, которое также будет выводить в лайтбоксе. Красиво, но… не очень удобно.
Немного обновил пост: выложил архив с уже отредактированными файлами.
В этих скриптах по-умолчанию меня не устраивало следующее:
Решением этих двух задач и еще одной, которая вылезла в процессе, мы и займемся.
Кстати, после установки Shadowbox JS, плагин сказал, что ему не хватает каких-то файлов и их нужно дополнительно скачать. Я сделал следующее: зашел на официальный сайт этого скрипта — Shadowbox.js, скачал оттуда последнюю версию скрипта, распаковал и залил на сервер в те же папки, что указаны выше с полной заменой файлов. Так я избавил себя от геморроя, который вылазит при скачивании «дополнительных» файлов непонятно откуда.
Нажмите на картинку ниже, посмотрите на подложку — довольно красиво, не правда ли? Такой оверлей несложно сделать за пару минут в Фотошопе по своему вкусу, мне нравится этот — «полосатый», хотя вариантов может быть куча — решетка, линии, шахматная доска и т.п.
Итак, нам нужна будет картинка, если надо (или лень самим делать) — берите мою, вот. Теперь находим папку на сервере со скриптом:
В этих папаках должны находиться два важных файла — 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 никуда не исчезнут.
Возвращаемся в папки, указанные выше, находим там 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
Для Youtube:
Для Rutube:
Для «Вконтакте»:
Надеюсь эта статья кому-то помогла. Оставляйте свои замечания по поводу, поправки к коду. Возможно кто-то придумает более элегантный способ «победить» тупой плеер Дурова.
В гуманном современном мире
Тем женщинам, чей ум остёр
Работой нудной заменили
Костёр