Галерея JS Fancybox 3 из элементов папки - PullRequest
Новая
       6

Галерея JS Fancybox 3 из элементов папки

0 голосов
/ 25 августа 2018

Я пытаюсь понять, как создать галерею FancyBox 3, например, из 128 изображений.Как бы я это сделал?Я пытался создать его сам, но не повезло.Я прочитал другой ответ StackOverflow, но он был из более ранней версии FancyBox, поэтому я не мог понять это.

Вот старая ссылка: JS для автоматического создания fancybox Gallery

Вот новая документация для FancyBox 3 с информацией API: https://fancyapps.com/fancybox/3/docs/#api

Вот мой пример кода: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FancyBox JavaScript Gallery from Folder</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <!-- Your HTML content goes here -->
    <a id="Gallery_A" href="javascript:;" class="btn btn-primary">Gallery A</a>

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>

    <script>

        $("#Gallery_A").on('click', function() {

          $.fancybox.open([

            //Image 1  
            {
              src  : '_assets/_images/gallery_a/0.jpg',
              type : 'image',
              opts : {
                //caption : 'Image 1',
                //thumb   : '_assets/_images/gallery_a/0.jpg'
              }
            },

            // Lets say this folder has 128 images in it  
            // Clearly I dont want to do this 128 times  
            // So I need a JavaScript For Loop  

            //Image 128  
            {
              src  : '_assets/_images/gallery_a/127.jpg',
              type : 'image',
              opts : {
                //caption : 'Image 128',
                //thumb   : '_assets/_images/gallery_a/127.jpg'
              }
            }

          ], {
            loop : true,
            thumbs : {
              autoStart : true
            }
          });

        });

    </script>   

</body>
</html>

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 25 августа 2018

На самом деле, вы можете легко перенести этот ответ на v3, вам просто нужно заменить href на src и $.fancybox(..) на $.fancybox.open(..).

Вот (немного другая) демонстрация - https://codepen.io/anon/pen/MqKpPL?editors=1010

...