Наверх

Подписывайтесь:

Получать обновления на e-mail:


Цитатко

На картриджах NES(Dendy) тоже стояли защиты, которые делали сложность игры невменяемой, если игра обнаруживала, что её взломали и запустили на не оригинальной NES. А так как на пост советском пространстве оригинальных NES вообще не было, то такие игры, как «Teenage Mutant Ninja Turtles 2» мы проходили, даже не зная, что разработчики считали их не проходимыми.

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

Автор kbaott, 07.06.2012 | Просмотров: 1 779 | Печать

Все, что сказано ниже — относится к плагину 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:

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

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

Метки: , , , , , , ,
Писано 07.06.2012

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

  • Здраствуйте. Хорошая статья… вот только у меня небольшая проблемка видео из VK открывается на все окно использую shadowbox-js офицальный плагин… может подскажете как исправить.

  • Т.е. как я понял при нажатии на ссылку — видео открывется не в shadowbox’e, а просто на весь экран? Если да, то значит shadowbox «не ловит» ссылку. Эмм… попробуйте удалить shadowbox, а поставить вместо него плагин VideoGal (для видеогалерей) и в нем настроить вывод видео в лайтобоксе. Ссылку тоже дайте.

  • Ях

    СПАСИБО!!!!!!! Я запарился искать решение этой проблемы,так как с php скриптами и css не особо дружу. Столько разных бредовых идей в Нэте видел — эта — Гениальна и проста!!!!

    • Рад, что смог помочь :)

  • Игорь

    Спасибо за код. Сам давно собирался это сделать. Shadowbox — отличный виджет, но кнопки там делали для пикселхантеров :)
    Кстати рекомендую кнопки взять от лайтбокса, и добавить в .shdwbx
    opacity: 0.5; filter: alpha(Opacity=50);

    • kbaott

      Спасибо за отзыв.
      Да, дельное предложение, в следующий раз, когда буду облагораживать блог, обязательно займусь и shadowbox’ом.