Basic Modal Plugin For Images And Youtube/Vimeo Videos - lightboxController

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.