Все для создания и продвижения сайтов

Верстка, программирование, SEO

Colorbox - настройка

количество просмотров 12353
Colorbox - настройка

Давайте же рассмотрим плагин Jquery Colorbox и узнаем, как его настраивать. Этот плагин для увеличения изображения при нажатии, довольно простой и удобной, является альтернативой плагинов Lightbox и Fancybox c возможностью создания галереи и слайдшоу.

Необходимо для работы Colorbox

  • Библиотека Jquery последний версии c официального сайта, Скачать
  • Скачать сам плагин Colorbox с официального сайта Скачать

Установка и настройка Colorbox

1. Подключим стили и скрипты плагина, добавив в head следующее.

<link rel="stylesheet" type="text/css" href="css/colorbox.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

Проверьте пути, выше описано, если файлы расположены от корня, к примеру site.ru/js/jquery.colorbox-min.js.

2. Чтобы включить плагин, добавьте в конце сайта следующий код, скрипт будет работать, если будет размещен после вывода картинок, которые будут использовать Colorbox.

<script>
jQuery("a.сolorbox").colorbox();
</script>

Если хотите добавить код в любом месте, то используете следующею запись:

<script>
$(document).ready(function(){
 jQuery("a.colorbox").colorbox();
});
</script>

3. Работа скрипта. Если вы использовали идентичный код выше, то вызов плагина будет следующий:

Здесь может быть текст или картинка

Суть в следующем - мы создаём ссылку в который ссылаемся на картинку, которую будем вызывать, в содержимой ссылке мы можем использовать простой текст или изображение. Применяться скрипт будет к ссылкам с классом "colorbox", вы можете сделать другой класс или убрать его вообще, чтобы плагин работал на всех картинках. Пример:

Для всех ссылок:

<script>
jQuery("a.сolorbox").colorbox();
</script>

Для всех ссылок с определённым классом:

<script>
jQuery("a.nash_class").colorbox();
</script>

Для групповых ссылок с определённым классом:

<script>
jQuery(".group1").colorbox({ rel:'group1' });
</script>

Параметры и настройки Colorbox

Название параметра Описание значение по умолчанию
transition Эффект перехода "elastic", "fade", "none"
speed Скорость перехода в млс 350
href Используется для определения альтернативного url false
title Переопределение заголовка (по умолчанию берется из title) false
rel Определение групп, nofollow - отменяет группировку false
width Внешняя ширина окна (+бордюр и навигация) false
height Внешняя высота окна (+бордюр и навигация) false
innerWidth Ширина изображения false
innerHeight Высота изображения false
initialWidth Начальная ширина окна 300
initialHeight Начальная высота окна 100
maxWidth Максимальная ширина контента false
maxHeight Максимальная высота контента false
scalePhotos Растянет фото до размеров, указанных в параметрах maxWidth, maxheight, innerWidth, innerHeight, width, height true
scrolling При значении false обрежет "лишний" контент, иначе покажет скролл true
iframe При значении true, контент будет загружен в iframe false
inline Если стоит true, можно использовать jQuery селекторы для вывода контента с текущей страницы: jQuery("#inline").colorbox({inline:true, href:"#myForm"}); false
html Можно выводить данные, не подгружая: jQuery.colorbox({html:'<p>Hello</p>'}); false
photo "заставить" плагин воспринимать все загружаемые данные как изображения (в случаях, если url имеет вид: photo.jpg#1, photo.jpg?pic=1 или photo.php) false
opacity уровень прозрачности фона 0.85
open при значении true, colorBox автоматически откроет окно false
preloading если используются группы данных, позволяет подгрузить следующие и предыдущие данные true
overlayClose закрытие окна по клику на оверлее true
returnFocus при закрытии colorBox вернет фокус на вызвавший элемент true
escKey разрешает/запрещает закрытие colorBox по клавише esc true
arrowKey разрешает/запрещает переключение между слайдами стрелками вправо и влево true
loop круговой просмотр true
slideshow если установить в true - создаст слайд-шоу для группы false
slideshowSpeed скорость смены кадров в слайд-шоу 2500
slideshowAuto автозапуск слайд-шоу true
current шаблон вывода счетчика данных в группе «image {current} of {total}»
slideshowStart текст для кнопки запуска слайд-шоу «start slideshow»
slideshowStop текст для кнопки остановки слайд-шоу «stop slideshow»
previous текст для кнопки "назад" «previous»
next текст для кнопки "вперед" «next»
close текст для кнопки "закрыть" «close»
onOpen Событие перед открытием окна false
onLoad Событие перед загрузкой данных false
onComplete Событие после окончания загрузки данных false
onCleanup Событие перед закрытием окна false
onClosed Событие после закрытия окна false

Вот небольшой пример вызова colorbox с нашими настройками, которые мы взяли из таблицы.

		
Метод Описание Пример
$.colorbox() Вызовет colorBox без привязки к выбранному элементу. $.colorbox({href:'login.php'})
$.colorbox.close() Закрытие окна. Ранее будет вызвано событие cbox_closed $.colorbox.close()
$.colorbox.element() Вернет jQuery-объект, для которого вызвали colorBox var $element = $.colorbox.element();
$.colorbox.resize() Вызывается вручную для пересчета размеров содержимого окна $.colorbox.resize()
$.colorbox.next(), $.colorbox.prev() Принудительная смена слайда $.colorbox.next(), $.colorbox.prev()
$.colorbox.init() Принудительная инициализация $.colorbox.init()
$.colorbox.remove() Отключение colorBox на странице $.colorbox.remove()
Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.