Lightweight & Easy jQuery Lightbox Plugin - WS Lightbox

A very simple and lightweight jQuery lightbox plugin which helps you create responsive modals, dialog boxes, and popup windows with ease. Currently supports many types of Html contents like image, iframe, youtube video, inline element, etc.

How to install:

Include the jQuery WS Lightbox plugin and other resources in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="ws-lightbox.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="ws-lightbox.css">

Usages:

1. Open an Youtbe video.

<a id="youtube-video">Click to see a youtube video</a>

<script type="text/javascript">
$(document).ready(function(){
$("#youtube-video").click(function(){
var params = {};
params.type = 'youtube';
params.src = 'http://www.youtube.com/embed/PGMQZEIXBMs';
params.height = 400;
params.width = 600;
// Opens the lightbox
ws_lightbox.open(params);
});
});
</script>

2. Open an iFrame.

<a id="iframe-box">Click to see an iframe</a>

<script type="text/javascript">
$(document).ready(function(){
$("#iframe-box").click(function(){
var params = {};
params.type = 'iframe';
params.src = 'https://www.jqueryscript.net/';
params.height = 600;
params.width = 1000;
params.overflow_hidden = false;
// Opens the lightbox
ws_lightbox.open(params);
});
});
</script>

3. Open a dialog box.

<a id="dialog-box">Click to see a dialog box</a>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog-box").click(function(){
var params = {};
params.type = 'dialog';
params.height = 30;
params.width = 400;
params.message = "Thank you for voting, slave.";
// Opens the lightbox
ws_lightbox.open(params);
});
});
</script>

4. Open a freestyle popup window.

<a id="freestyle-box">Click to see a freestyle (html) box</a>
<script type="text/javascript">
$(document).ready(function(){
$("#freestyle-box").click(function(){
var params = {};
params.type = 'freestyle';
params.height = 200;
params.width = 600;
params.html = "<h1>I am html!</h1>";
// Opens the lightbox
ws_lightbox.open(params);
});
});
</script>

---

This awesome jQuery plugin is developed by josephtyler. For more Advanced Usages, please check the demo page or visit the official website.