Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple Galleries

See original GitHub issue

**Hi I have seen a number of questions on this but no example that I can get to work at my end…

I have several thumbs on one page, each open a separate set of images, but when the set of images is finished, the gallery picks the images from the next gallery instead of the starting at the beginning again.

Previously I have simple had to assign a different ID to each of the sets, but in this case I cannot seem to find a solution. Script and HTML included below, ANY suggestion is greatly appreciated!!**

<head>
<script>
	$(document).ready(function() {
	$('.popup-gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		tLoading: 'Loading image #%curr%...',
		mainClass: 'mfp-img-mobile',
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
		}, 
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>: Honey & Bear Bar</small>';
			}
		}
	});
});
</script>
</head>
<body> <div id="gallery-grid" class="gallery-filterable isotope ui grid"> 
<div class="four wide column isotope-item">
	<div class="popup-gallery">
		<a href="assets/images/galleries/xx-2017/arq_may_01.jpg" title="xx"><img src="assets/images/galleries/THUMBS/xx-may-16.png"  alt="xx"></a>
		<a href="assets/images/galleries/xx-2017/arq_may_02.jpg" title="xx"></a>
		<a href="assets/images/galleries/xx-2017/arq_may_03.jpg" title="xx"></a>
	</div>
</div>
							
<div class="four wide column isotope-item">
	<div class="popup-gallery">
		<a href="assets/images/galleries/xx-2016/arq_june_01.jpg" title="xx"><img src="assets/images/galleries/THUMBS/xx-june-16.png"  alt="xx"></a>
		<a href="assets/images/galleries/xx-2016/arq_june_02.jpg" title="xx"></a>
		<a href="assets/images/galleries/xx-2016/arq_june_03.jpg" title="xx"></a>
	</div>
</div>
</div> </body)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13

github_iconTop GitHub Comments

1reaction
vikingbeardscommented, Jan 26, 2018

The latest update from Alan Pilloud solved my problem, I am overwhelmed by his support… Alan, do not hesitate to ask for any favour in future 😃

1reaction
alanpilloudcommented, Jan 23, 2018

Hi,

This is how I did a similar thing :

$(".js-gallery").each(function() {
  $(this).magnificPopup({
    type: "image",
    delegate: "a",
    gallery: {
      enabled: true
    }
  });
});

You would replace js-gallery by popup-gallery.

I hope it helps.

Edit : replaced jQuery with $.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I create multiple galleries in WordPress? - Modula
Do you want to display multiple galleries on one page? Read this article to find out how to create multiple photo galleries in...
Read more >
Display a photo in multiple galleries - SmugMug Heroic Support
You can collect a photo so it displays in multiple galleries at once! Use this feature to make portfolio galleries to show clients...
Read more >
How Being Represented by Multiple Galleries Impacts ... - Artsy
Artists continue to show with different galleries in different regions, despite the advent of the internet and global art fair circuit.
Read more >
[Multiple Galleries] Support | WordPress.org
Topic; Voices; Replies; Last Post. Multiple Galleries is now depricated. Started by: Kaspars. 1; 0; 9 years, 7 months ago.
Read more >
Multiple Galleries w/ Canvas Views - Showit Help Center
Create multiple interactive galleries within a single canvas using different canvas views.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

youtube link on magnific popup is not autoplaying

Next page

Use Magnific Popup with AJAX-loaded content