ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Colorbox. Подключаемый лайтбокс-модуль

Colorbox. Подключаемый лайтбокс-модуль

Созданный нами специальный лайтбокс идеально подходит для наших скромных нужд, однако следует признать, что он довольно сильно ограничен в плане функциональности. Порой требуется что-то большее. Сообщество разработчиков jQuery обеспечило для нас в этом плане широкий выбор. На самом деле текущий ассортимент доступных подключаемых лайтбокс-модулей просто огромен. Одни из них крайне насыщены параметрами, другие концентрируются на небольшом размере файла, третьи - на кросс-браузерной поддержке, четвертые — на расширяемости, пятые — на определенных блог-платформах... Имеется подключаемый лайтбокс-модуль на каждый случай.

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

Мы рассмотрим и протестируем плагин ColorBox, который является детищем Джека Мура. Это стабильный и хорошо протестированный подключаемый лайтбокс-модуль. Он содержит огромный массив общих методов и перехватчиков событий, в силу чего даже опытные пользователи вряд ли смогут охватить весь арсенал доступных средств. Поскольку модуль ColorBox фокусируется на стандарте HTML, в плане стилей полагается на технологию CSS и обладает широкой поддержкой параметров содержимого.

Загрузить плагин можно с сайта автора http://www.jacklmoore.com/colorbox/, там же мы найдем инстрикции и помощь в установке модуля.

Вот его основные характеристики:

Совместим с: Jquery 1.3.2+ в Firefox, Safari, Chrome, Opera, Internet Explorer 7+
Поддержка фотографий, группировка, слайд-шоу, AJAX, инлайн и фреймах содержание.
Легкий вес: 10KB из JavaScript.
Внешний вид контролируется с помощью CSS.
Может быть расширен с помощью обратных вызовов и событий  без изменения исходных файлов.
Опции установлены в JS и не требуют каких-либо изменений в существующий HTML.
Предварительно загружает изображения предстоящих в фото группы.

Скачиваем и распаковываем плагин в корневую директорию сайта. Откроем папку example1 и протестируем ее, открыв в веб-браузере файл index.html. Выбираем нужный нам модуль для установки на страницу своего сайта.

В качестве примера я выбрал Elastic Transition.

Готовим веб-страницу. Выбираем место, гда будет размещена галлерея. Подключаем scc и JavaScript файлы colorbox.scc и jquery.colorbox-min.js.

<div id="gallery" >
<a class="group1" href="../images/pict1_h.jpg"><img class="pict" src="../images/pict1.jpg" alt="Год рждения"/></a>
<a class="group1" href="../images/pict2_h.jpg"><img class="pict" src="../images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a class="group1" href="../images/pict3_h.jpg"><img class="pict" src="../images/pict3.jpg" alt="Что тут пить"/></a>
<a class="group1" href="../images/pict4_h.jpg"><img class="pict" src="../images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a class="group1" href="../images/pict5_h.jpg"><img class="pict" src="../images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a class="group1" href="../images/pict6_h.jpg"><img class="pict" src="../images/pict6.jpg" alt="Я тост принес"/></a>
</div>

Обратите внимание, всем ссылкам присвоен класс group1.

Colorbox принимает параметры из объекта параметр ключ/значение, и может быть назначен на любой HTML-элемент.

$(selector).colorbox({key:value, key:value, key:value});

В нашем случае это будет так:

$("#gallery a").colorbox({rel:'#gallery a'});

$(document).ready(function() {
$("#gallery a").colorbox({rel:'#gallery a'});
});
<!DOCTYPE html>
<html>
<title>Colorbox. Подключаемый лайтбокс-модуль</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<style>
#gallery{margin:0; padding:10px; text-align:center}
#gallery img{max-width:15%; margin:4px;}
</style>
<link href="../../colorbox-master/example1/colorbox.css" rel="stylesheet" type="text/css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../../colorbox-master/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
$("#gallery a").colorbox({rel:'#gallery a'});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Кадры из моих любимых фильмов</h2>

<div id="gallery" >
<a class="group1" href="../images/pict1_h.jpg"><img class="pict" src="../images/pict1.jpg" alt="Год рждения"/></a>
<a class="group1" href="../images/pict2_h.jpg"><img class="pict" src="../images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a class="group1" href="../images/pict3_h.jpg"><img class="pict" src="../images/pict3.jpg" alt="Что тут пить"/></a>
<a class="group1" href="../images/pict4_h.jpg"><img class="pict" src="../images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a class="group1" href="../images/pict5_h.jpg"><img class="pict" src="../images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a class="group1" href="../images/pict6_h.jpg"><img class="pict" src="../images/pict6.jpg" alt="Я тост принес"/></a>
</div>
<!-- End Right Column -->
</div>


<!-- End Page Container -->

<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>


Для написания статьи взяты примеры из книги «Изучаем jQuery» Эрл Каслдайн и Крэйг Шарки.