Галерея Fancybox применяется ко всем изображениям в домене - PullRequest
Новая
       6

Галерея Fancybox применяется ко всем изображениям в домене

0 голосов
/ 25 апреля 2018

Попытка применить версию 3 для fancybox с этим кодом: 

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

Я пробовал это решение: 

$('a').each(function () {
if ($(this).has('img')) {
    $(this).fancybox();
}

});

И я также попробовал ряд других решений, включая stackoverlow.И это не похоже на работу.Я не с нетерпением жду, чтобы сделать все ссылки вручную.Оригинальный создатель галереи fancybox не предоставляет опцию для обработки всех ссылок на изображения.

1 Ответ

0 голосов
/ 25 апреля 2018

Этот код работает, если вы хотите, чтобы все изображения в вашем html-файле были fancybox. 

<html>
<body>
  <img src="./img/img-small-1.jpg" alt="">
  <img src="./img/img-small-2.jpg" alt="">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />      
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
  <script>
    $("img").wrap(function() {
      return "<a href=" + this.src + " data-fancybox></a>";
    });
  </script>
</body>
</html>

Но в основном изображение fancybox будет добавлено к вашему изображению в html-файле, как это (не в файле скрипта) 

  <a href="./img/img-small-1.jpg" data-fancybox="gallery"><img src="./img/img-small-1.jpg" alt=""></a>
  <a href="./img/img-small-2.jpg" data-fancybox="gallery"><img src="./img/img-small-2.jpg" alt=""></a>
...