nicolas-t/Chocolat

Possible to Create Multiple Galleries on a Single Page?

bosticm2 opened this issue · 6 comments

bosticm2 commented

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
nicolas-t commented

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 ?

nicolas-t commented

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

raphaelbastide commented

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)
}
nicolas-t commented

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>
raphaelbastide commented

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.

raphaelbastide commented

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).