fancybox галерея

207

12 августа 2018, 08:50

Проблема с библиотекой fancybox до этого не работал с ней поэтому не могу понять в чем ошибка (при клике на ссылку происходит обычный переброс на картинку без использования fancybox). Вот код

$(document).ready(function() { 
  $("a.galery__item").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 
  }); 
 
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-  
    DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> 
 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
 
<body> 
  <header class="header"> 
 
    <div class="section6"> 
      <div class="section6__title"> 
        Галерея 
      </div> 
      <div class="section6__galery"> 
        <a href="images/IMG_7337.png" class="galery__item" rel="group"><img src="images/IMG_7337.png"></a> 
        <a href="images/IMG_7661.png" class="galery__item" rel="group"><img src="images/IMG_7661.png"></a> 
        <a href="images/IMG_7352.png" class="galery__item" rel="group"><img src="images/IMG_7352.png"></a> 
        <a href="images/IMG_7872.png" class="galery__item" rel="group"><img src="images/IMG_7872.png"></a> 
        <a href="images/IMG_8038.png" class="galery__item" rel="group"><img src="images/IMG_8038.png"></a> 
        <a href="images/IMG_7723.png" class="galery__item" rel="group"><img src="images/IMG_7723.png"></a> 
        <a href="images/IMG_8052.png" class="galery__item" rel="group"><img src="images/IMG_8052.png"></a> 
        <a href="images/IMG_7412.png" class="galery__item" rel="group"><img src="images/IMG_7412.png"></a> 
      </div> 
 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Answer 1

Для fancybox 3 достаточно прописать data-fancybox="group" + у Вас jquery подключение идет после подключения плагина, а должен быть перед всеми jquery плагинами:

* { 
  box-sizing:border-box; 
} 
 
img { 
  max-width:100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> 
 
 <header class="header"> 
 
    <div class="section6"> 
        <div class="section6__title"> 
            Галерея 
        </div> 
        <div class="section6__galery"> 
            <a href="https://images.unsplash.com/photo-1502200893034-b7bca90610ef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c081e2fd522f3c6e53fdf4b47aeb0943&auto=format&fit=crop&w=600&q=60" class="galery__item" data-fancybox="group"> 
              <img src="https://images.unsplash.com/photo-1502200893034-b7bca90610ef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c081e2fd522f3c6e53fdf4b47aeb0943&auto=format&fit=crop&w=600&q=60" > 
            </a> 
            <a href="https://images.unsplash.com/photo-1505533321630-975218a5f66f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c5f38d8a09b82ab5bf6f0c87b1fb2877&auto=format&fit=crop&w=600&q=60" class="galery__item" data-fancybox="group"> 
              <img src="https://images.unsplash.com/photo-1505533321630-975218a5f66f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c5f38d8a09b82ab5bf6f0c87b1fb2877&auto=format&fit=crop&w=600&q=60" > 
            </a> 
            <a href="https://images.unsplash.com/photo-1499240713677-2c7a4f692044?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d316ec72f7ff56be6e6f33de946fcaf&auto=format&fit=crop&w=600&q=60" class="galery__item" data-fancybox="group"> 
              <img src="https://images.unsplash.com/photo-1499240713677-2c7a4f692044?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0d316ec72f7ff56be6e6f33de946fcaf&auto=format&fit=crop&w=600&q=60" > 
            </a> 
        </div> 
     </div> 
 </header>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Програмно нажать на кнопку JS / JQuery

Есть кнопка, на которую нужно нажать програмно:

179

javascript

onbeforeunload на мобильных браузерах

Всем привет!

165

javascript

Создать iframe на js

Я хочу создать свой iframeМне надо его сделать так: мне надо создать ссылку на iframe(ссылку сделать на js), при встраивание этой ссылки на сайт появлялся,...

245

javascript

Чистка памяти после закрытия iFrame

Как корректно закрыть/удалить iframe со страницы что бы память освободилась?

219