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

16 May, 2018

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

๐Ÿ”— This post was filed under

Blue square avatar white centered hiragana text reading Ryosuke

@Ryosuke2 years ago