[FeedTheMeat]

I'm using Magnific Popup lightbox plugin on my site. I'll post snippets then explain the issue in depth.

html custom carousel snippet:

		<div class="container">
			<div class="row">
				<h2>Screenshots</h2>
				<div class="col-md-12">
					<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
					<div class="col-md-12">
						<div class="carousel slide" align="center" id="screenshot_carousel">
							<div class="carousel-inner inner-cstm">
								<div class="item active">
									<div class="col-xs-2 pop-link"><a class="test-popup-link" href="/Images/Screenshots/screen1.jpg"><img src="/Images/Screenshots/screen1.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen2.jpg"><img src="/Images/Screenshots/screen2.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen3.jpg"><img src="/Images/Screenshots/screen3.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen4.jpg"><img src="/Images/Screenshots/screen4.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen5.png"><img src="/Images/Screenshots/screen5.png" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen6.jpg"><img src="/Images/Screenshots/screen6.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen7.jpg"><img src="/Images/Screenshots/screen7.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
								<div class="item pop-link">
									<div class="col-xs-2"><a class="test-popup-link" href="/Images/Screenshots/screen8.jpg"><img src="/Images/Screenshots/screen8.jpg" class="img-responsive img-thumbnail"></a></div>
								</div>
							</div>
							<a class="left carousel-control" href="#screenshot_carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
							<a class="right carousel-control" href="#screenshot_carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div

jQuery:

		<script type="text/javascript">
			$('div').magnificPopup({ 
				type: 'image',
				delegate: 'a',
  
				gallery:{enabled:false}
			});
		</script>

This code works. The problem comes with the jQuery code. As you can see, it will take any div with a nested <a> element and try to lightbox it. The magnific popup site says to use:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

to get items by class identifier but when I use that it refuses to work. Instead of a lightbox, I load a new page. if I try:

$('.pop-link').magnificPopup({
  type: 'image'
  // other options
});

I still have no luck. It seems like the only way I can get it to work is to call it by div. Does anyone have any ideas?

[andrewsw]

Quote

The magnific popup site says to use..

Post the link to this page.

[FeedTheMeat]

Magnific Popup

That's the link but I ended up figuring it out because I got frustrated and just started throwing the jQuery at everything on the page.

Oddly, I had to change two things to get it to work. I changed this part of my html so that the carousel-inner also had the pop-link class.

<div class="carousel slide" align="center" id="screenshot_carousel">
							<div class="carousel-inner inner-cstm pop-link">
								<div class="item active">

For the jQuery I used:

			$('.pop-link').magnificPopup({ 
				type: 'image',
				delegate: 'a',
  
				gallery:{enabled:false}
			});

It seems that a carousel, when clicked, starts the click at the carousel-inner element and filters down in some way.

[ArtificialSoldier]

Quote

As you can see, it will take any div with a nested <a> element and try to lightbox it.

So make the selectors more specific. e.g.:

<script type="text/javascript">
	$('div.item').magnificPopup({ 
		type: 'image',
		delegate: 'a.test-popup-link',

		gallery:{enabled:false}
	});
</script>