Bootstrap — крутой загиб

28 Дек 2012

Давеча занятную задачку решали. Нужно было слайдер симпотишный на поддерживаемый ресурс приляпать. Требования, значит, такие были: масштабируемость (уменьшаемость, дизайн-то адаптивный), безглючность, простота, кастомизация (приручение).

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

В результате мы взялись конструировать «велосипед», как водится, из деталей других «велосипедов» и нескольких «костылей».

Для сбора необходимых изображений использовали функции движка WordPress. В нём «из коробки» предусмотрена возможность заполнения каждого материала набором изображений в админке.

Для подготовки изображений применили небезызвестный Timthumb. Были опробованы и другие способы, обещавшие валидный URL изображений, безопасность и скорость, но выяснилось, что они либо не работают вовсе, либо работают некорректно.

Для функционала прикрутили стандартный JavaScript плагин из коллекции css-js-фреймворка Bootstrap 2.2.2 — самого нового релиза на текущий момент. Привлекли две вещи. Он прост в использовании и самое главное — он масштабируется вместе с внешним контейнером.

Однако, таки вышел казус. В документации описан простой и корректный способ останавливать автоматическую прокрутку слайдов, если указатель мыши находится на блоке слайдера, но на поверку вышло, что это не работает. Прошерстив несколько форумов, на которых программисты обсуждали эту проблему, называя «известным багом», выяснили, что проблема прослеживается с версии 2.2.1. Поиски более старой версии с корректным скриптом слайдера привели на площадку GitHub — уникальное изобретение для открытых и коллективных разработок, поддерживающее контроль версий, на котором и ведутся работы над Bootstrap-ом. Это-то нас и спасло! Именно открытая система контроля версий позволила нам заглянуть в будущее. Были найдены ветки разработки Bootstrap, предположительно версий 2.3 и 3.0. Наглеть мы не стали, поэтому ограничились копированием рабочей версии bootstrap.carousel.js из ветки 2.3. Этого оказалось достаточно. После подключения этого скрипта к нашему проекту дело пошло на лад. Слайдер стал останавливаться при наведении мыши и продолжать шоу, если курсор убирали.

Итак, в процессе решения своей проблемы мы узнали новое и заглянули в будущее!

Share