There are many ways to implement a Lightbox, but today, I’ll show you a simple method using the “jquery.colorbox.js” library. This library is very convenient as it supports not only displaying pages from different URLs, but also images and videos.
Loading Required Files
First, you need to load the following three files:
- colorbox.css
- jquery.min.js
- jquery.colorbox.js
By correctly loading these files, you will be able to display content in a Lightbox-like manner.
<link rel="stylesheet" href="colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
JavaScript Code to Display a Different URL Page in a Lightbox-like Manner
Next, you need to write the JavaScript code that will be executed when the page is loaded. By using this code, clicking the specified element (in this case, .iframe) will display content in a Lightbox-like manner.
<script>
$(document).ready(function(){<br />
$(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});<br />
});
</script>
How to Write the HTML
The HTML to display content in a Lightbox is very simple. You only need to add an ＜a＞ tag to the page as shown below. Add the class=”iframe” attribute to the ＜a＞ tag to indicate the element to be displayed in the Lightbox.
<a class="iframe" href="https://dad-union.com">Click this link</a>
Demo Page Showing How to Display a Different Page (iframe) Like a Lightbox Using jquery.colorbox.js
You can see how a Lightbox-like display looks using “jquery.colorbox.js” in the demo page below.
Display a Different Page (iframe) Like a Lightbox Using jquery.colorbox.js
Source: Colorbox – a jQuery lightbox
For detailed documentation on “jquery.colorbox.js” and other implementation methods, please refer to the following website.
Other Features
“jquery.colorbox.js” supports not only displaying pages from different URLs but also media content like images and YouTube videos. This allows you to display various types of content in a Lightbox-like manner.
*Please use at your own risk. Do not copy the Google Analytics tag inside the demo page.
