Colorbox - налаштування

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

Установка і настройка 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>

Перевірте шляхb, що вище описані, і якщо файли розташовані від кореня, то пишем, наприклад site.uа/js/jquery.colorbox-min.js.

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

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

Якщо хочете додати код в будь-якому місці, то використайте наступний запис:

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

3. Рoбота скрипта. Якщо ви використовували ідентичний код вище, то виклик плагіна буде наступний:

<a class="colorbox" href="image.jpg">Тут може бути текст або картинка</a>

Суть в наступному - ми створюємо посилання в якому посилаємося на картинку, яку будемо викликати, в змісті посилання ми можемо використовувати простий текст або зображення. Застосовуватися скрипт можна до посилань з класом "colorbox", ви можете зробити інший клас або прибрати його взагалі, щоб плагін працював на всіх картинках. приклад:

Для всіх посилань:

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

Для всіх посилань з певним класом:

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

Для групових посилань з певним класом:

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

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

Ось невеликий приклад виклику colorbox з нашими настройками, які ми взяли з таблиці.

<script type="text/javascript">
jQuery("a.colorbox").colorbox({
			width: 900,
			height: 400,
			opacity: 0.1
		 });

Фотогалерея з використанням технології Colorbox

Еластичний перехід

Затемнений перехід

Інші Tипи

У фреймі веб-сторінка (Iframe)

Виліт тексту HTML

Сітківка зображень

ФОТО52 ФОТО53 ФОТО54

Знайшли помилку? Повідомте нас!