FancyBox является инструментом, который предлагает приятный и элегантный способ добавить функциональность для масштабирования изображений, HTML содержания и мультимедиа на веб-страницах. Он построен на основе популярного JavaScript-фреймворка JQuery и прост как в установке, так и в настройке.
FancyBox 2.x полностью переписан и готов похвастаться новыми функциями и обновленной графикой. Основные изменения:
- Расширен набор вспомогательных функций;
- Отзывчивость (всплывающие окошки теперь масштабируются в зависимости от размера окна браузера);
- Добавлено слайдшоу;
- Новые эффекты переходов между изображениями в галерее;
- Fancybox полностью переведен на CSS3 (тени, скругление углов...);
- Обновлен плагин настроек (не имеет обратной совместимости);
Подключение Fancybox 2.x к web-странице
Скачайте плагин, распакуйте его, скопируйте файлы и подключите FancyBox и стили в вашем документе (вам нужно будет убедиться, что CSS и JS файлы расположены на сервере, а также настроить пути к скрипту и стилям). Убедитесь также, что вы также подключили библиотеку JQuery. Пример:
<!-- Подключаем библиотеку jQuery -->
<script src="jquery-latest.min.js"></script>
<!-- Подключаем плагин mousewheel (в случае необходимости) -->
<script src="jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Подключаем стили fancyBox и сам плагин -->
<link rel="stylesheet" href="jquery.fancybox.css">
<script src="jquery.fancybox.pack.js"></script>
<!-- По необходимости подключаем вспомогательные элементы - кнопки, миниатюры и/или медиа файлы -->
<link rel="stylesheet" href="jquery.fancybox-buttons.css">
<script src="jquery.fancybox-buttons.js"></script>
<script src="jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="jquery.fancybox-thumbs.css">
<script src="jquery.fancybox-thumbs.js"></script>
Создаем ссылки, которые будут вести на элементы, которые мы собираемся открыть с помощью Fancybox:
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Вызывать Fancybox следует только после загрузки страницы как показано ниже. Если вы не знакомы с JQuery, то срочно ликвидируйте этот пробел!
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Советы и хитрости Fancybox 2.x
Коллекция демо-примеров, созданная в ответ на часто задаваемые вопросы:
- Изменение цвета и прозрачности оверлея
-
- Отключить реакцию на правую кнопку мыши
- Добавить водяной знак)
- Удалить белую рамку вокруг содержимого
- Перемещение навигации за пределы окна
-
Настроить/изменить содержимое
- Скрыть контент при изменении элементов галереи
- Применить FancyBox для всех изображений
- Запуск галереи только с одним изображением для предварительного просмотра
- Запуск FancyBox при загрузке страницы:
- Обновить страницу после закрытия
- Настройка параметров (например, ширину и высоту) -
- Чрезмерно увеличенный эффект
- Использование YouTube API - перейти к следующему видео после того, как текущее закончило играть
- Открыть PDF (внутри ифрейма)
-
Отключить функцию блокировки - контент по умолчанию заблокирован оверлеем
-
Простая точечная навигация
Примеры с fancyBox.
Расширенный функционал Fancybox 2.x
Не забудьте включить необходимые файлы! Каждый вспомогательная функция находится в отдельном файле.
<a class="fancybox-button" rel="fancybox-button" href="fancybox_b.jpg" title="Закат">
<img src="fancybox1_m.jpg" alt="" />
</a>
<a class="fancybox-button" rel="fancybox-button" href="fancybox2_b.jpg" title="Восход">
<img src="fancybox2_m.jpg" alt="" />
</a>
<a class="fancybox-button" rel="fancybox-button" href="fancybox3_b.jpg" title="Птичка">
<img src="fancybox3_m.jpg" alt="" />
</a>
<a class="fancybox-button" rel="fancybox-button" href="fancybox4_b.jpg" title="Природа">
<img src="fancybox4_m.jpg" alt="" />
</a>
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
<a class="fancybox-thumb" rel="fancybox-thumb" href="fancybox1_b.jpg" title="Закат">
<img src="fancybox1_m.jpg" alt="">
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="fancybox2_b.jpg" title="Восход">
<img src="fancybox2_m.jpg" alt="">
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="fancybox3_b.jpg" title="Птичка">
<img src="fancybox3_m.jpg" alt="">
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="fancybox4_b.jpg" title="Природа">
<img src="fancybox4_m.jpg" alt="">
</a>
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
HTML код примера
<ul class="list">
<li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
<li><a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a></li>
<li><a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">Metacafe</a></li>
<li><a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">Dailymotion</a></li>
<li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a></li>
<li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
<li><a class="fancybox-media" href="http://instagr.am/p/IejkuUGxQn">Instagram</a></li>
<li>
Google maps
<ul>
<li><a class="fancybox-media" href="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17">Search results</a></li>
<li><a class="fancybox-media" href="http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17">Direct link</a></li>
<li><a class="fancybox-media" href="http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56">Street view</a></li>
</ul>
</li>
</ul>
JS код примера
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
Документация fancyBox 2.x
Вы можете передать эти параметры как ключ/значение объекта FancyBox(). Кроме того, можно изменить значения по умолчанию непосредственно в FancyBox JS файле или с помощью $.fancybox.defaults