Basic Modal Plugin For Images And Youtube/Vimeo Videos - lightboxController
File Size: | 56 KB |
---|---|
Views Total: | 5263 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The lightboxController jQuery plugin allows you to open image and Youtube/Vimeo video links in a responsive, mobile-friendly lightbox popup with fade in/out animations and open/close callback functions.
How to use it:
1. Place the latest version of jQuery library and the jQuery lightboxController's script into the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="lightboxController.min.js"></script>
2. Insert the image and Youtube/Vimeo video links into the webpage using data-src
attribute as this:
<article class="bloxPopup" data-src="https://vimeo.com/213741752" data-id="1"> ... </article> <article class="bloxPopup" data-src="https://www.youtube.com/watch?v=U9zFfIww3Go" data-id="2"> ... </article> <article class="bloxPopup" data-src="example.jpg" data-id="3"> ... </article>
3. Initialize the lightbox plugin and we're done.
$('.bloxPopup').lightboxController();
4. Style the lightbox with your own CSS experiences.
.lightboxContain { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2000; background: rgba(0, 0, 0, 0.5); } .lightboxContain .indLightbox { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 56%; height: 62%; } @media screen and (max-height: 600px) { .lightboxContain .indLightbox { height: 90%; } }
5. The required CSS styles for the lightbox content.
.lightboxContain iframe { border: 0; width: 100% !important; height: 100% !important; } .lightboxContain img { float: none; max-width: 100%; height: auto; max-height: 100%; margin: 0 auto; }
6. All default lightbox settings.
$('.bloxPopup').lightboxController({ appendRegion: 'footer', lightboxID: 'lightbox', fadeDuration: 300, contentFade: 300, closeBtn: null, opened: function(){}, closed: function(){} });
This awesome jQuery plugin is developed by alisdairb1995. For more Advanced Usages, please check the demo page or visit the official website.