FancyBox - фотогалерея + модальные окна

FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.

demosourse

Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css

Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:


<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();
});
</script>

Таким образом на все ссылки с классом gallery мы повесили fancybox с параметрами по умолчанию. Теперь напишем простой HTML для фотогалереи:


<div id="wrap">
<h1>FancyBox - Фотогалерея</h1>
<h3>Одиночная картинка</h3>
<a class="gallery" title="Одиночная картинка" href="images/1_b.jpg"><img src="images/1_s.jpg" /></a>

<h3>Группа картинок (галерея изображений)</h3>
<a class="gallery" rel="group" title="это фото 1" href="images/2_b.jpg"><img src="images/2_s.jpg" /></a>
<a class="gallery" rel="group" title="это фото 2" href="images/3_b.jpg"><img src="images/3_s.jpg" /></a>
<a class="gallery" rel="group" href="images/4_b.jpg"><img src="images/4_s.jpg" /></a>

Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.

Теперь давайте рассмотрим параметры, которые мы можем задать при вызове fancybox, которые влияют на внешний вид и поведение фотогалереи. Для нашего эксперимента создадим аналогичный HTML- код (пример приводить не буду, он абсолютно идентичен приведенному выше) с той лишь разницей, что всем тегам <a> присвоим класс gallery2, и напишем для него следующую функцию (которую также поместим м/у тегами head):

			$("a.gallery2").fancybox(
{
"padding" : 20,
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,
"frameWidth" : 700,
"frameHeight" : 600,
"overlayShow" : true,
"overlayOpacity" : 0.8,
"hideOnContentClick" :false,
"centerOnScroll" : false

});

Что все это значит:
padding - отступ контента (фотографий) от краев окна. В демке я поставил 20px, это, конечно, многовато, но зато наглядно;
imageScale - принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;
zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0) ;
zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
frameWidth - ширина окна, px (425px - по умолчанию);
frameHeight - высота окна, px(355px - по умолчанию);
overlayShow - (по умолчанию true) если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay
overlayOpacity - Прозрачность затемнения (0.3 по умолчанию);
hideOnContentClick - Если true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
centerOnScroll - Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.
Как мы видим в наших руках весьма гибкий инструмент для создания фотогалерей и не только...

Но не галереями един этот замечательный плагин. С помощью fancybox мы легко можем выводить не только фотографии в красивых окошках, но и другой контент.
Видео с Youtube (rutube, video.mail и т.д.)

<h3>Видео с youtube.com в модальном окне</h3>  

<a class="gallery" href="#testube"><img alt="" src="images/atb_s.jpg" /></a>

<div style="display:none" id="testube">
<!-- HTML - код ролика -->
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/sh08XGBE8qc&hl=ru&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sh08XGBE8qc&hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> <!-- конец HTML - кода ролика -->
</div>

Все очень просто. Мы в теге <a> указали класс gallery, в атрибуте href идентификатор #testube. В контейнер div#testube поместили код ролика с youtube.

Еще проще реализуется открытие ссылки (сайта) в модальном окне:


<a class="iframe" href="http://www.google.ru">Погуглим?</a>

Правда здесь есть одно "но". Класс обязательно должен иметь имя iframe. Соответственно на этот класс нам нужно повесить fancybox


$("a.iframe").fancybox(
{
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
});

Модальные окна с собственным контентом:

Реализуется аналогично с предыдущим примером:


<a class="gallery2" title="Простая HTML" href="content.html">Клик</a>

Файл content.html содержит htm-код, который и будет выведен в модальное окно. Обратите внимание, что сам файл content.html не содержит в себе ни css-стилей , ни ссылок на них. На демонстрационной страничке между тэгами head я создал класс .green и текст в модальном окне (заключенный в <p class='green'> ) получился зеленый.

Мы также в атрибуте href можем указать и php. Давайте реализуем это. Для этого создадим простой php-файл content2.php:


  <h2>Вы открыли окно № <?php echo $_GET["id"] ?></h2>  

А на странице с нашими примерами напишем:


<h3>Свой контент в модальном окне вариант 2.</h3> 
<a href="content2.php?id=1" class="gallery">Первое окно</a><br>
<a href="content2.php?id=2" class="gallery">Второе окно</a><br>

Мы видим, что ссылки имеют GET - параметр, и в соответствии с цифрой в этом параметре content2.php может производить какие-либо действия.Таким образом в модальном окне может выводиться контент из базы данных, можно реализовать форму обратной связи и т.д. и т.п.

Теперь об одном большом нюансе, касательно вывода своего контента в модальных окнах.
Т.к. поисковики не понимают яваскриптов , для них наши модальные окна - просто новая страница. Нам следует подстраховаться, дабы ни один поисковик никому не дал прямую ссылку на такую страницу, но в тоже время контент модальных окон смог нормально проиндексировать.
Можно сделать так :


<h3>Свой контент в модальном окне вариант 2 с дублированием.</h3> 
<a href="for_spider.php?id=1" class="modalbox">Первое окно</a><br>
<a href="for_spider.php?id=2" class="modalbox">Второе окно</a><br>

Где for_spider.php - это нормальная страница сайта, с подключенными стилями, скриптами. На этой странице мы будем выводить тот же самый контент, что и в модальном окне. Пускай ее и будут индексировать поисковики и на нее же попадают неадекватные посетители с отключенным javascript. . А для нормальных людей мы сделаем подмену. С помощью jquery мы заменим for_spider.php на content2.php. Между тегами head, после "$(document).ready(function() {" напишем следующий код:


url = $("a.modalbox").attr('href').replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth" : 400,
"frameHeight" : 400

});

Что мы здесь делаем. У тегов <a class='modalbox'> мы "вытаскиваем" ссылку, заменяем в ней "for_spider" на "content2" и заносим в переменную url. Затем у этих же тегов мы заменяем атрибут href на новый(значение переменной url). Ну потом уже привычый нам запуск плагина fancybox. Как только на наш сайт зайдет посетитель, все ссылки на for_spider.php преобразуются в content2.php - на наши модальные окна.

 

На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.fancy.klade.lv
Перевел: Евгений Стыценков
Урок создан: 29 Мая 2009
Просмотров: 496844
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^