Simple Lightbox Image Popup

[mike]

I want to implement a simple lightbox posted the question on the Envato got response but it did not work so i was told to come here.

<a class="img-thumbnail lightbox" href="http://dmypbau5frl9g.cloudfront.net/assets/common/icons-buttons/default-user-55f17d83f5e5e28153bc873f3319dc0b.jpg" data-plugin-options="{"type":"image"}">
    <img class="img-responsive" width="215" src="http://dmypbau5frl9g.cloudfront.net/assets/common/icons-buttons/default-user-55f17d83f5e5e28153bc873f3319dc0b.jpg" />
</a>

was suggested but does not work.

Also

<pre>
	<a class=&quot;img-thumbnail lightbox&quot; href=&quot;http://dmypbau5frl9g.cloudfront.net/assets/common/icons-buttons/default-user-55f17d83f5e5e28153bc873f3319dc0b.jpg&quot; data-plugin-options=&quot;{&quot;type&quot;:&quot;image&quot;}&quot;>
    <img class=&quot;img-responsive&quot; width=&quot;215&quot; src=&quot;http://dmypbau5frl9g.cloudfront.net/assets/common/icons-buttons/default-user-55f17d83f5e5e28153bc873f3319dc0b.jpg&quot; />
</a>
</pre>

Missing something thanks

---

[mike]

magnific-popup.css
and
jquery.magnific-popup.js

are both properly included into page by default

---

[Support]

Hello,

That’s strange, it should be working, can you please also check the console of the browser to see if there’s any JS error?

Otherwise you can just make a JS call to apply the lightbox to an image, like this:

HTML

<a class="lightbox-image" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
	<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" height="75" width="75">
</a>

JS:

$(document).ready(function() {

	$('.lightbox-image').magnificPopup({
		type: 'image',
		image: {
			verticalFit: true
		}
	});

});

Let me know if you have any questions.

Thanks.

---

[Author]

Posts