Fancybox - Форум

Новые сообщения Участники Правила форума Поиск RSS

Страница 1 из 1
1

Fancybox (Замечательный плагин для создания диалоговых окон jQuery)

Fancybox

aktivizion

Сообщений: 3

[ 4 ]

Offline

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

Создаем фотогалерею.

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

Между тегами head дописываем:

Code

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

Code

<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>

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

Code

$("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 и т.д.)

Code

<h3>Видео с youtube.com в модальном окне</h3>
          <a class="gallery" href="#testube"><img alt="" src="images/atb_s.jpg" /></a>
          <div style="display:none" id="testube">
          
<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>

</div>

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

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

Code

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

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

Code

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

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

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

Code

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

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

Code

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

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

Code

<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 может производить какие-либо действия.Таким образом в модальном окне может выводиться контент из базы данных, можно реализовать форму обратной связи и т.д. и т.п.

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

Code

<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() {" напишем следующий код:

Code

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 - на наши модальные окна.
Источник урока: http://fancyapps.com/fancybox/
Перевел: Евгений Стыценков
Источник материала
Демо
Исходник

Сообщение

Создаем фотогалерею.

Code

Code

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

Code

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

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

Code

Code

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

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

Code

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

Написать ответ

Fancybox (Замечательный плагин для создания диалоговых окон jQuery)

Страница 1 из 1
1

Конструктор сайтов — uCoz