15.03.2013 г.

Выбор библиотеки для модальных окон

В связи с наведением порядка в корпоративных стандартах было решено подобрать к выбранной стандартом jQuery еще и стандартную библотеку всплывающих окон.

Я с лету предложил Highslide. Библотечка, «сказали» — хорошая. А что если поискать такую за которую поменьше платить?
Я поискал полчаса — нашел подешевле FancyBox. Тут ужо меня спортивный интерес разобрал. Думаю — мир не без добрых людей, неужели же не найдется приличная, но бесплатная или хотя-бы условно бесплатная библиотека?

И нашлась. Называется prettyPhoto. Раз уж такая библиотека нашлась, решил я ее маленько усовершентсовать. А именно:

1. Сделать так, чтобы модальные окна можно было вызывать из модальных же окон.
Тогда, если хочется, можно строить цепочки выполнения страниц на GET параметрах url модальных окон.

2. Сделать так, чтобы JavaScript код, загружаемый в модальное окно вместе с текстом страницы - исполнялся.
Тогда такую страницу можно исполнять «в комплекте» не вынося специально JavaScript код в файл *.js, чтобы потом загружать его вторым запросом через jQuery.getScript(). Когда два запроса - всегда выше вероятность что-то потерять. Да и такую страницу можно, при желании отлаживать не в AJAX режиме. Тут преимущество в том, что вызовы JavaScript все внутри и панель Битрикса будет работать.

3. Сделать так, чтобы код загруженный в режиме AJAX , если он больше размера модального окна прятался «под скрол»
В оригинальной реализации больший текст «вываливался» за окно.

Это было сделано и собственно касалось библиотеки и мало касалось Битрикса.
Расширенный скрипт доступен по ссылке.

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

Стандартное решение представляло из себя код вида:
<ul class="gallery clearfix"> 
      <li>
      <a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="Picture alone 1" >
      <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Picture alone 1"  />
      </a>
      </li>
</ul>
ul можно было заменить на div или span, но легче от этого не становилось. Эти контейнеры слабо управляются с помощью визуального редактора. Идеально было-бы эту возможность присваивать через стиль, который виден в списке стилей визуального редактора прямо изображению даже без ссылки. И это оказалось возможно т.к. библиотека имеет небольшое API.

Написал функцию для отображения картинки прик лике и добавил CSS стиль для изменения курсора при наведении на картинку
JavaScript:
function zoomIMG(obj) 
 {
  if( obj.title != "" && ( obj.title.indexOf('.gif')>0 || obj.title.indexOf('.jpg')>0 || obj.title.indexOf('.png')>0 ) )
  { $.prettyPhoto.open(obj.title,[obj.id],[obj.alt]); }  
  else
  { $.prettyPhoto.open([obj.src],[obj.id],[obj.alt]); }
  return false;
 }


CSS:
img.zoom_img:hover
{ cursor:pointer; }

Добавил отслеживание клика в "document "
$(document).ready(function(){

    $(".zoom_img").click(
     f unction () { zoomIMG(this) }
    );

  });

Стиль zoom_img я прописал в стили шаблона сайта. Теперь (см. рис. 1) контент-редактор может в визуальном редакторе «повесить» на картинку функцию увеличения, просто выбрав стиль из списка стилей.


Рис. 1.
Как видит контент-редактор.




Рис.2.
А вот как выглядит на сайте.


Опубликовано на сайте:
15.03.13