Подключаем и используем fancybox на сайте
FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.
Подключение
Скачиваем свежую версию плагина с официального сайта. Там же вы можете посмотреть и параметры для плагина
Подключаем в head следующие стили и скрипты
<script type="text/javascript" src=" fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src=" fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src=" fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href=" fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
Если у вас не подключит JQuery, подключаем его
<script type="text/javascript" src="/fancybox/lib/jquery-1.9.0.min.js"></script>
Cоздание модальных окон с картинками
<script type="text/javascript">
$(document).ready(function() {
$("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
});
});
</script>
Вывод самой галереи
<a class="gallery" rel="gallery" href="картинка "> <img src=" картинка " alt=""/></a>
Где,
class="gallery" - подключение fancybox
rel="gallery" - объединение всех изображений в галерею