Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Possible to Create Multiple Galleries on a Single Page? #84

Open
bosticm2 opened this issue Mar 20, 2018 · 6 comments
Open

Possible to Create Multiple Galleries on a Single Page? #84

bosticm2 opened this issue Mar 20, 2018 · 6 comments

Comments

@bosticm2
Copy link

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
Copy link
Owner

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
Copy link
Owner

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

@raphaelbastide
Copy link

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
Copy link
Owner

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>

@nicolas-t nicolas-t reopened this Jun 21, 2020
@raphaelbastide
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@raphaelbastide @nicolas-t @bosticm2