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

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