В связи с наведением порядка в корпоративных стандартах было решено подобрать к выбранной стандартом 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) контент-редактор может в визуальном редакторе «повесить» на картинку функцию увеличения, просто выбрав стиль из списка стилей.
Ступил... hover состояния можно сделать в CSS всего одной строкой: img.zoom_img:hover { cursor:pointer; } Фнкции zoomIMG_over и zoomIMG_out в этом случае НЕ НУЖНЫ!
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».