shortcode - Lightbox using Semantic UI + JQuery ๐Ÿ–ผ๐Ÿ”

Using just a few lines of jQuery, combined with the Semantic UI Modal component, you can create a pretty simple and effective Lightbox:

<link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css" />

<section id="photos" class="ui basic segment show">
	<h2 class="ui header">Semantic UI Lightbox Example</h2>
	<p>Click any of the cards below to activate the modal-based lightbox. It's based off the <a href="https://semantic-ui.com/modules/modal.html#basic">"basic modal"</a> in Semantic UI.</p>
	<section class="ui four stackable cards">
		<article class="PhotoCard ui card">
			<img src="http://via.placeholder.com/300x250" class="ui fluid image">
			<div class="content">
				Cool pics
			</div>
		</article>
		<article class="PhotoCard ui card">
			<img src="http://via.placeholder.com/300x250" class="ui fluid image">
			<div class="content">
				Cool pics
			</div>
		</article>
		<article class="PhotoCard ui card">
			<img src="http://via.placeholder.com/300x250" class="ui fluid image">
			<div class="content">
				Cool pics
			</div>
		</article>
		<article class="PhotoCard ui card">
			<img src="http://via.placeholder.com/300x250" class="ui fluid image">
			<div class="content">
				Cool pics
			</div>
		</article>
	</section>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" />
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" />
<script>
// Lightbox for photos using Semantic UI

$('.PhotoCard').click(function() {
		var image = $(this).children('img').attr('src');
		$('body').append('<div class="ui basic modal"><div class="content"><img src="'+image+'" width="100%" /></div></div>');        
		$('.ui.basic.modal')
			.remove()
			.modal('show');
})
</script>

See the Pen Semantic UI Lightbox Example by Ryosuke (@whoisryosuke) on CodePen.

Hope that helps, Ryo


References

Leave a comment