search

nzbin / photoviewer

🖼️ A JS plugin to view images just like in Windows.
https://nzbin.github.io/photoviewer/
MIT License
356 stars 55 forks source link

Multiple Instances #35

Closed Johnjax72 closed 2 years ago

Johnjax72 commented 2 years ago

Please could you tell me how to add multiple instances of photoviewer? I can get it to work by duplicating the initialize script and changing the data-gallery name: $('[data-gallery=photoviewer]') $('[data-gallery=photoviewer2]') However the site I am building will have hundreds of galleries that will be dynamically created so this is not an option. Is there a way to restart the script if the links are within a parent div? Any help will be greatly appreciated as I would love to use your amazing lightbox. Many thanks John

nzbin commented 2 years ago

I don't quite understand your issue. Have you read the docs?

Johnjax72 commented 2 years ago

Yes, I did read the docs. I am initializing from a list of links as in your example:

<a data-gallery="manual" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

This works fine for one gallery but there are no examples of how to use multiple galleries on the same page. If I add another gallery, the two are linked together unless each gallery has a unique id. As I will be having lots of galleries on a page which will be dynamically created I don't want to have to initialise the script for each gallery. Hope this makes sense, maybe I'm missing something in the docs?

nzbin commented 2 years ago

Do you mean initializing the photo viewer with different groups? I hope you can give me some html codes of your galleries.

Johnjax72 commented 2 years ago

The data groups option does work but still means creating a new group for each gallery which will be difficult to manage with lots of galleries on one page. I have changed the site design now so no longer need to do it this way. Thanks for your help though.

nzbin commented 2 years ago

There has no data groups option and data-group is a selector used by jQuery. The photo viewer just has two parameters, items and options. You can use other jQuery APIs or forEach method to make groups for items.

Maybe the Magnify (photoviewer 1.x) fits your needs, you can have a try.