fancybox галерея

179
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>

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

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

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

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

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

Всем привет!

 138
Создать iframe на js
javascript

Создать iframe на js

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

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

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

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

 190