Студия создания и продвижения сайтов Mittelspiel - Челябинск
 
Группа Создание сайтов в Челябинске ВКонтакте Мы в Twitter Миттельшпиль - Создание сайтов в Челябинске в Facebook Миттельшпиль - Создание сайтов в Челябинске в Мой Мир Миттельшпиль - Создание сайтов в Челябинске в Живом журнале Миттельшпиль - Создание сайтов в Челябинске в Однокласниках

Создание сайтов в Челябинске. Продвижение сайта

Закажите создание сайта у каомпании Миттельшпиль
 
Студия создания сайтов Mittelspiel  
 
  Студия веб-дизайна Mittelspiel. Создание сайтов. Продвижение сайта в Челябинске.  
   
Студия веб-дизайна Mittelspiel

Простая и красивая галерея для сайта с помощью LightBox или FancyBox
25 ноября 2013

Не секрет, что при создании имиджевых сайтов все упирается в красоту исполнения. Сегодня мы рассмотрим частный случай использования так называемых модальных окон при отображении одиночных фото или групп фото (фотогалерей). Не буду умничать, вы все с ними сталкивались, на страницах социальных сетей.

Целью модального окна является компактное расположение картинки "превью" в теле страницы, при клике на которую появится модальное окно ( если настроена анимация, то увеличивается в размерах), блокируя родительское содержимое (часто просто затеняет его). Для фотогалереи существует возможность перелистывать фото вперед и назад.

Простая и красивая галерея для сайта с помощью LightBox или FancyBox
Пример. Для увеличения кликните по картинке.
Всю эту красоту можно сделать с помощью огромного количества различных 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
<b>Рима</b>
Рима
27 ноября 2013
Спасибо! Lightbox просто супер! Подключила его библиотеки без проблем.
<b>Вика</b>
Вика
02 декабря 2013
Большое спасибо! Очень красиво и то, что нужно!!!
<b>Valery</b>
Valery
08 сентября 2014
Пример CSS лайтбокса очень интересный
<b>Valery</b>
Valery
08 сентября 2014
Какие преимущества у лайтбокса перед другими?
<a href='http://www.fotolatgale.lv' rel='external nofollow' title='Инга'><b>Инга</b></a>
28 февраля 2015
Вот супер смотрится фотогалерея с LightBox
Оставить свой комментарий

Код защиты от роботов

Меню сайта Mittelspiel - Создание сайтов в Челябинске
Популярное на сайте Mittelspiel - Создание сайтов в Челябинске
Скидка на создание сайта 10%

Свет веб дизана
Новые побеги - новая концепция современного веб дизайна  
 
 
Студия веб-дизайна Mittelspiel. Создание сайтов любой сложности. Челябинск
© Copyright 2003-2015
Веб-студия «Миттельшиль»

• Создание сайтов в Челябинске.
• Продвижение сайта

+7 951 814 55 66
+7 351 248 08 23


 
Яндекс.Метрика Рейтинг@Mail.ru Rambler's Top100