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

СКАЧАТЬ ИСХОДНИКИ

ПОСМОТРЕТЬ ДЕМО

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

Подключаем 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
Перевел: Евгений Стыценков

Комментарии (7 комментариев) на "FancyBox — фотогалерея + модальные окна"

  1. Михаил:

    Добрый день!
    А как открыть ссылку в модальном окне fancybox ?

  2. admin:

    да также, прописываете class в самой ссылке ну тоесть

    class = "galery" href="ваша ссылка"

  3. Автор, пиши еще, много и долго!

  4. Субъективное мнение, но достаточно хорошо написано.

  5. Хороший блог с ценным контентом. Доходчиво!

  6. Yura:

    Плз хелп! у меня параметры fancybox получаются как текст сайта, подскажите что там нужно добавить? Заранее спасибо.

    $(«a.gallery»).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,});

    мой первый сайт

    $(document).ready(function() {
    $(«a.gallery»).fancybox();
    });

  7. admin:

    Написать ваш код между < script type="text/javascript"> < / script >

Отправить комментарий