В связи с наведением порядка в корпоративных стандартах было решено подобрать к выбранной стандартом jQuery еще и стандартную библотеку всплывающих окон.
Я с лету предложил Highslide. Библотечка, «сказали» — хорошая. А что если поискать такую за которую поменьше платить? Я поискал полчаса — нашел подешевле FancyBox. Тут ужо меня спортивный интерес разобрал. Думаю — мир не без добрых людей, неужели же не найдется приличная, но бесплатная или хотя-бы условно бесплатная библиотека?
И нашлась. Называется prettyPhoto. Раз уж такая библиотека нашлась, решил я ее маленько усовершентсовать. А именно:
1. Сделать так, чтобы модальные окна можно было вызывать из модальных же окон. Тогда, если хочется, можно строить цепочки выполнения страниц на GET параметрах url модальных окон.
2. Сделать так, чтобы JavaScript код, загружаемый в модальное окно вместе с текстом страницы - исполнялся. Тогда такую страницу можно исполнять «в комплекте» не вынося специально JavaScript код в файл *.js, чтобы потом загружать его вторым запросом через jQuery.getScript(). Когда два запроса - всегда выше вероятность что-то потерять. Да и такую страницу можно, при желании отлаживать не в AJAX режиме. Тут преимущество в том, что вызовы JavaScript все внутри и панель Битрикса будет работать.
3. Сделать так, чтобы код загруженный в режиме AJAX , если он больше размера модального окна прятался «под скрол» В оригинальной реализации больший текст «вываливался» за окно.
Это было сделано и собственно касалось библиотеки и мало касалось Битрикса. Расширенный скрипт доступен по ссылке.
А вот специально для Битрикса был написан код, который позволял бы контент редактору с помощью визуальных средств редактирования картинки добавить для нее возможность увеличенного просмотра.
Стандартное решение представляло из себя код вида:
ul можно было заменить на div или span, но легче от этого не становилось. Эти контейнеры слабо управляются с помощью визуального редактора. Идеально было-бы эту возможность присваивать через стиль, который виден в списке стилей визуального редактора прямо изображению даже без ссылки. И это оказалось возможно т.к. библиотека имеет небольшое API.
Написал 3 функции для отображения картинки и изменении курсора при наведении, чтобы было понятно, что можно кликнуть
function zoomIMG_over(obj)
{ $("#"+obj.id).css("cursor", "pointer"); }
function zoomIMG_out(obj)
{ $("#"+obj.id).css("cursor", ""); }
И добавил их отслеживание в document
$(docu ment).ready(f unction(){
$(".zoom_img").hover(
f unction () { zoomIMG_over(this) },
f unction () { zoomIMG_out(this) }
);
$(".zoom_img").click(
f unction () { zoomIMG(this) }
);
});
Стиль zoom_img я прописал в стили шаблона сайта. Теперь (см. рис. 1) контент-редактор может в визуальном редакторе «повесить» на картинку функцию увеличения, просто выбрав стиль из списка стилей.
Если сходить на FancyBox, добраться до раздела License/Download, то там написано, что библиотеку можно использовать бесплатно только в некоммерческих целях. Цена для коммерческой лицензии около 650 руб, для коммерческой неограниченной чуть больше 3000 руб. (см. http://sites.fastspring.com/fancyapps...duct/store) Цена — небольшая, но поскольку во мне уже проснулся спортивный интерес — я стал искать дальше. Да, ColorBox я рассматривал, но он не заработал под FireFox 12.0. 12-я версия — вообще глючная, но prettyPhoto там работал, что и определило выбор. Зато у ColorBox я «слямзил» красивый полосатый фон, которого не было в prettyPhoto
is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses
fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license. You are free to use fancyBox for your personal or non-profit website projects. You can get the author's permission to use fancyBox for commercial websites by paying a fee.
По ссылке paying a fee, попадаем на страницу http://sites.fastspring.com/fancyapps...duct/store с означенными мною выше ценами. А то что написано на корневой странице fancyBox говорит о том, что fancyBox работает на основе библиотеки jQuery которая действительно MIT и GPL Но не сам fancyBox!
Т.е. fancyBox НЕ БЕСПЛАТЕН, а библиотека jQuery на базе которой он работает — да бесплатна. Тонкий момент, учитывая размещение информации о бесплатности наверху корневой страницы.
Ну что-же возможно первый FancyBox и был полностью бесплатным. Но сейчас на сайте вторая версия — очевидно при коммерческом использовании — платная, а ссылок на первую версию — нет. Значит, производители плагина изменили ценовую политику и не хотят напоминать о бесплатной версии.
Ступил... hover состояния можно сделать в CSS всего одной строкой: img.zoom_img:hover { cursor:pointer; } Фнкции zoomIMG_over и zoomIMG_out в этом случае НЕ НУЖНЫ!
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».