| redroom · Offline | Добавлено 26.07.2011 в 15:08 · Пост #1 |
|
|
FancyBox- это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируйете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.
Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css
Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим.
Между тегами head дописываем:
Code <script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();
});
</script>
Таким образом на все ссылки с классом 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>
Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.
Теперь давайте рассмотрим параметры, которые мы можем задать при вызове 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"> <!-- 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.
Еще проще реализуется открытие ссылки (сайта) в модальном окне:
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 <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:
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 - на наши модальные окна.
Источник урока: www.fancy.klade.lv
Перевел: Евгений Стыценков
Источник материала
|
| (RU) |
| |
| akc · Offline | Добавлено 29.05.2012 в 18:11 · Пост #2 |
|
| Добрый день.
Уже протопал достаточно просторов интернета, нотак и не понял в чем причина,может вы поможете.
У меня следующий вопрос:
Quote echo '<a class="fancybox fancybox.ajax" rel="group" href="/wp-content/plugins/platilka/pl_pf.php"><img src="/wp-content/plugins/platilka/p_but.jpg" alt="" /></a>';
echo '<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>';
Данный код выводит контент, но не показывает само модальное окно, т.е. внутри находится форма для заполнения, и вместо окошка просто появляются поля и кнопка отправки. 
p.s. использую fancybox v.2
|
| (UA) |
| |
