Foundation + FancyBox = ?

Проблема

Макет я сверстал на ZurbFoundation 5 и думал, что осталось только натянуть верстку на Laravel. Ну а для начала я хотел сделать сайт на MODX Revolution как тестовой платформе. Тем более, что буквально на днях вышла финальная версия 2.3 и мне хотелось её посмотреть.

К слову сказать, мне новая версия понравилась и не понравилась. Однако по ощущения мне хотелось сравнить её с версией 2.1.15 да на «боевом» хостинге. К удивлению, скорость примерно одинаковая. Вот только даже на «свистке» от BeLine на шаред-хостинге от Sprinthost.ru я спокойно уже мог работать. Да, админка тормозит по сравнению с MODX Evolution, но уже не бесит ожиданием и можно работать.

Так что шаблон я натянул и даже сделал структуру, меню и начал подбираться к галереи. В Ево я легко мог подключить как evoGallery, так и MultiTV в качестве галереи. А вот с Рево я разбирался впервые. Галерея Gallery очень похожа на evoGallery, однако её так же не слишком удобно использовать в простых случаях — трудно описать как добавлять фотографии и почему они будут отображаться именно на этой странице. Я решил остановиться пока на Gallery, а с другими решениями разобраться чуток позже. Все эти изыскания заняли у меня пару дней.

Но споткнулся я на подключении FancyBox в качестве всплывающего лайтбокса для картинок.

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

Вторая сложность — при нажатии на картинку страница прокручивалась вверх.

А отказаться от галереи не мог, поскольку на главной странице крутились отзывы, скрипт которой, как оказалось, использовал функции из fancybox в качестве библиотек с красивостями.

Косяк со стилями

Если с первой напастью было понятно как бороться: залазить в стили и править, то со второй пока решил обождать.

Гугление выяснило проблему позиционирования еще с версии Foundation 3 из-за конфликтов со стилями. Предлагалось обновление на более поздние версии. Обновление версии на последнюю в ветке 1 версии 1.3.4 не помогал. А вот в ветке 2 уже косяк был поправлен. Ну хоть с этим не копаться самостоятельно.

Позиционирование на странице

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

Но вот когда я совсем отчаялся побороть эту напасть, я решил поискать ответы на английском «fancybox scroll top». И решение было тут же найдено!

Оказалось, что в тегах html или body со свойством height:100% и дает этот глюк в отображении. Проблему уже нашли и пофиксили. Вот только в официальном репозитории еще старая версия лежит.

А ссылка дала архив на с гитхаба версии 2.1.5, где уже проблему решили. И есть решение с хелпером:

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

но я его не тестил, поскольку мне и первое решине помогло.

Мораль проста: «Никогда не здавайся!».

Никогда не сдавайся!

 

Ну а второй вывод: не нашел на русском, ищи на английском, ищи синонимы — кто-нибудь уже наступал на грабли и писал свое решение.

Ссылка на основную публикацию