1

I am trying to figure out how to create a FancyBox 3 gallery from, say a folder of 128 pictures for instance. How would I do that? I have tried to create it myself, but have had no luck. I read another StackOverflow answer, but it was from a earlier version of FancyBox, So I could not figure it out.

Here is the old link: JS to automatically make a fancybox Gallery

Here is the new documentation for FancyBox 3 with the API Info: https://fancyapps.com/fancybox/3/docs/#api

Here is my Example Code:

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

Any help would be greatly appreciated.

wjsorensen
  • 13
  • 3

1 Answers1

0

Actually, you could easily port that answer to v3, you would just need to replace href with src and $.fancybox(..) to $.fancybox.open(..).

Here is a (slightly different) demo - https://codepen.io/anon/pen/MqKpPL?editors=1010

Janis
  • 8,593
  • 1
  • 21
  • 27