Подключаем и используем fancybox на сайте

Опубликовано: 26 Июн 2014

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"   - объединение всех изображений в галерею

Комментарии (0)


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




Разрешённые теги: <b><i><br>Добавить новый комментарий: