Chocolat Possible to Create Multiple Galleries on a Single Page?

Hi, I am curious if there is a way to create galleries of the same type on a single page. For example, three #example3 / #container2 galleries within a single page of html. Thanks so much!

Michael

Mar 20 '18 18:03 bosticm2

Yes it's possible, as you can see here : https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html There is multiple galleries on the same page. What have you tried ?

Aug 25 '18 09:08 nicolas-t

Closing due to lack of activity. Feel free to reopen.

Sep 18 '18 08:09 nicolas-t

What about multiple sets for generated galleries? Let’s say I need to create a set for each .images divs as parent… I tried with the following for loop but it doesn’t seem to work.

var set = d.querySelectorAll('.images')
for (var i = 0; i < set.length; i++) {
  var gallery = set[i].querySelectorAll('.imagelink')
  Chocolat(gallery)
}

Jun 21 '20 17:06 raphaelbastide

Hello,

Not sure I understood your request correctly.
This works for me (to be pasted in the demo directory) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="../dist/css/chocolat.css" />
        <script type="text/javascript" src="../dist/js/chocolat.js"></script>
        <title>Chocolat — demo</title>
    </head>
    <body>
        <div class="images">
            <a class="imagelink" href="demo-images/1.jpg">1</a>
            <a class="imagelink" href="demo-images/2.jpg">2</a>
        </div>
        <div class="images">
            <a class="imagelink" href="demo-images/3.jpg">3</a>
            <a class="imagelink" href="demo-images/4.jpg">4</a>
        </div>
        <div class="images">
            <a class="imagelink" href="demo-images/5.jpg">5</a>
            <a class="imagelink" href="demo-images/6.jpg">6</a>
        </div>

        <script>
            const set = document.querySelectorAll('.images')
            for (let i = 0; i < set.length; i++) {
                const gallery = set[i].querySelectorAll('.imagelink')
                Chocolat(gallery)
            }
        </script>
    </body>
</html>

Jun 21 '20 18:06 nicolas-t

Thank you, when I try that I have a set overlap, the issue must be in my code. I will come back if the issue remains, but I am sure it is my mistake. Thank you for your time.

Jun 21 '20 19:06 raphaelbastide

I just found my mistake. My HTML structure looks like that:

.project
  .images
    figure
      a.imageLink
.project
  .images
    figure
      a.imageLink

And I figured out that selecting .images as the parent for the for loop was not working. However, it works with .project as a parent. Not sure if it is a bug or a feature, but I am happy it works now.

Sidenote, it would be nice to have the for loop trick as an example for multiple galleries on the documentation, for beginners working with generated images lists (e.g. CMS).

Jun 21 '20 19:06 raphaelbastide

Chocolat Chocolat copied to clipboard

Possible to Create Multiple Galleries on a Single Page?

Chocolat
Chocolat copied to clipboard