To provide an impressive experience for users visiting your website, the way you present images and videos is crucial. Among these, the popup feature that allows users to enlarge content with a single click is one of the most effective ways to enhance visual impact and convey the appeal of your content.
In this article, we will clearly explain for beginners how to use the lightweight and easy-to-use library “lity.js” to display images, YouTube videos, Google Maps, and more in a popup. From setup to implementation, we introduce each step so you can easily apply it to your own website.
CSS Description
First, load the lity.css file and adjust the styles as needed.
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding-top: 20px;
}
h2{
font-size: 18px;
}
p{
padding-bottom: 10px;
font-size: 18px;
}
</style>
<link href="lity.css" rel="stylesheet"/>
HTML Description
Prepare the images you want to display in a popup (1.jpg–3.jpg), a Google Map, and YouTube video links, and set the data-lity attribute to each a tag.
<h1>Display images and YouTube videos in a popup using lity.js.</h1>
<p>Click the images or links below.</p>
<h2>Display Images</h2>
<a href="1.jpg" data-lity><img src="1.jpg" width="200"></a><br>
<a href="2.jpg" data-lity><img src="2.jpg" width="200"></a><br>
<a href="3.jpg" data-lity><img src="3.jpg" width="200"></a><br>
<br>
<br>
<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.442666006292!2d139.67402283050825!3d35.54276818192736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185f62523fab3d%3A0xb37d1d81ecde8b6a!2zVmljZVZhZyAtIOODkOOCpOOCueODkOOCsA!5e0!3m2!1sja!2sjp!4v1667616868631!5m2!1sja!2sjp" data-lity>Display Google Map</a><br>
<br>
<br>
<a href="https://www.youtube.com/watch?v=NAAAXdyYtYw" data-lity>Display YouTube</a>
<br>
<br>
JavaScript Description for Displaying Images and YouTube Videos in a Popup Using lity.js
Simply load jquery.min.js (version 1.x) and the lity.js file, and lity will automatically handle the processing.
<script src="jquery.js"></script>
<script src="lity.js"></script>
Demo Page for Displaying Images and YouTube Videos in a Popup Using lity.js
You can check out the demo page in action.
Demo Page for Displaying Images and YouTube Videos in a Popup Using lity.js
Source: Lity
Below is the source.
Lity
Summary
By using lity.js, you can easily display images, videos, maps, and more in a popup, adding sophisticated interaction to your web pages. Since it’s jQuery-based and very easy to set up, it’s perfect for those introducing a popup feature for the first time.
Based on the basic usage introduced here, try customizing the display method and effects to suit your site. Enhancing visual appeal can increase user engagement and time spent on your site.
Be sure to incorporate it into your web page presentations.
※ If you reuse this, please do so at your own risk.
Do not reuse the Google Analytics tag in the head tag of the demo page.
