Особенности плагина
- Изысканные внешний вид;
- нет проблем с блокировкой всплывающих окон браузерами - все содержимое открывается в текущем окне;
- сразу несколько изображений могут быть открыты одновременно;
- легкий в настройке;
- размер 7 Кб
- работает во всех современных браузерах, включая IE6
Как заставить работать?
Тег DOCTYPE должен объявлять страничку типа XHTML, т.е. в самом верху HTML-кода вашей веб-страницы должна стоять запись, например, такая:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. Подключить необходимые файлы
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script> <link rel="stylesheet" href="imgbox/imgbox.css" />
2. Создать ссылки по шаблону ниже. Заполняйте параметр TITLE в ссылках, чтобы добавить описание к увеличенному изображению
<a class="zoom" title="Описание к картинке" href="big_image.jpg"> <img src="small_image_thumb.jpg" alt="" /> </a>
3. Запустить плагин ImgBox для каждой ссылки, используя объявление:
$("a.zoom").imgbox();
Такое объявление добавляет эффект зума ко всем ссылкам (тег a), класса zoom
Доступные настройки
Для управления работой плагина, все значения настроек следует передавать в функцию imgbox() в качестве параметров - по примеру:
$("a.zoom").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
| Название | Описание |
|---|---|
| padding | величина padding-отступа для увеличенных картинок |
| alignment | Позиция увеличенного изображения в окне браузера. Допустимые значения - 'auto' и 'center'. По умолчанию изображение увеличивается равномерно во все стороны, по отношению к уменьшенной копии |
| allowMultiple | Разрешает открытие сразу нескольких изображений одновременно. Значения - true или false. По умолчанию - true |
| autoScale | Если true - масштабирует увеличенное изображение так, чтобы оно помещалось в окне просмотра |
| speedIn | Значение, в миллисекундах, в течение которого проигрывается анимация медленного открытия всплывающего окна с увеличенным изображением. Если равно 0 - окно будет плавно вырисовываться. По умолчанию - больше нуля.. |
| speedOut | Значение, в миллисекундах, в течение которого проигрывается анимация медленного закрытия всплывающего окна с увеличенным изображением. Если равно 0 - окно будет плавно исчезать. По умолчанию - больше нуля. |
| zoomOpacity | Добавляет прозрачность к изображению, во время анимации увеличения. Значения - true или false. По умолчанию - false |
| overlayShow | Делает фоновую заливку во время просмотра всплывающих окон. Цвет фоновой заливки определяется в файле CSS. Значения - true или false. По умолчанию - false. |
| overlayOpacity | Прозрачность фоновой заливки. Может принимать значения от 0 (полностью прозрачна) до 1 (полностью не прозрачна) |
| hideOnOverlayClick | Закрывает окно при клике на участок фона. Значения - true или false. По умолчанию - true. |
| hideOnContentClick | Закрывает окно при клике по увеличенной картинке. Значения - true или false. По умолчанию - true. |
Изысканный внешний вид, простота установки и большие возможности настройки плагина делают его незаменимым помощником в области создания функциональных сайтов всевозможных тематик - от коммерческих сайтов по компьютерному обслуживанию организаций до персональных страничек и блогов.