Простая и красивая галерея для сайта с помощью LightBox или FancyBox
25 ноября 2013
Не секрет, что при создании имиджевых сайтов все упирается в красоту исполнения. Сегодня мы рассмотрим частный случай использования так называемых модальных окон при отображении одиночных фото или групп фото (фотогалерей). Не буду умничать, вы все с ними сталкивались, на страницах социальных сетей.
Целью модального окна является компактное расположение картинки "превью" в теле страницы, при клике на которую появится модальное окно ( если настроена анимация, то увеличивается в размерах), блокируя родительское содержимое (часто просто затеняет его). Для фотогалереи существует возможность перелистывать фото вперед и назад.
Пример. Для увеличения кликните по картинке.
Всю эту красоту можно сделать с помощью огромного количества различных JavaScript библиотек, а конкретнее jQuery. Мы же сегодня рассмотрим две, на мой взгляд, самые достойные и простые в использовании библиотеки Lightbox и FancyBox. Я использую их при создании сайтов.
Использовать просто. Скачиваем с сайта архив, распаковываем его в папку и прописываем пути (ниже) согласно нашего местоположения.
Подключаем JS библиотеки
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
Подключаем файл стилей css
<link href="css/lightbox.css" rel="stylesheet" />
Как использовать (одиночное фото или ссылка)
<a href="img/image.jpg" data-lightbox="image-1" title="Подпись">Ссылка</a>
Группа фото
<a href="img/image-1.jpg" data-lightbox="roadtrip">Ссылка 1</a>
<a href="img/image-2.jpg" data-lightbox="roadtrip">Ссылка 2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Ссылка 3</a>
Если возникнут вопросы, то на сайте разработчика все подробно изложено с примерами..
Здесь так же нет ничего сложного. Заходим, скачиваем, распаковываем архив в нужную папку.
Подключаем JS библиотеки
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js">
</script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
Подключаем файл стилей css
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css"
type="text/css" media="screen" />
Как использовать (одиночное фото или ссылка)
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
На сайте разработчика много примеров: одиночное фото, группа фотографий (фотогалерея), инлайновый блок, Iframe, Ajax. Разобраться труда не составит.
В заключении.
Какую библиотеку вы будете использовать Lightbox или FancyBox решать вам. Думаю стоит присмотреться к обеим, ведь, как я показал, подключить и настроить их на своем сайте не составляет особого труда.
У страницы «Простая и красивая галерея для сайта с помощью LightBox или FancyBox» комментариев: 5
Оставить свой комментарий