Lightbox
Lightweight Gameforest lightbox plugin to create a responsive lightbox gallery with images and videos.
Example
Add data-lightbox attribute to a html element with link to set default lightbox plugin. You can set the image source with href attribute what will be seen in the lightbox.
<a class="btn btn-primary" href="img/gallery/gallery-lightbox-1.jpg" data-lightbox role="button">Open lightbox</a>Gallery
Add multiple images into a gallery with data-lightbox='{"gallery": "name"}' attribute. You can add multiple galleries with custom gallery names.
<a class="btn btn-primary" href="img/gallery/gallery-lightbox-1.jpg" data-lightbox='{"gallery": "witcher"}' role="button">Open gallery</a>
<a href="img/gallery/gallery-lightbox-2.jpg" data-lightbox='{"gallery": "witcher"}'></a>
<a href="https://i1.ytimg.com/vi/-FAfCbkpicw/maxresdefault.jpg" data-lightbox='{"gallery": "witcher"}'></a>Comments
Use data-lightbox='{"disqus": true}' or data-lightbox='{"facebook": true}' to add comment section to the lightbox plugin. It is required to set disqus url with script in the footer.
<a class="btn btn-primary" href="img/gallery/gallery-lightbox-1.jpg" data-lightbox='{"disqus": true}' role="button">Open disqus</a>
<a class="btn btn-primary" href="img/gallery/gallery-lightbox-1.jpg" data-lightbox='{"facebook": true}' role="button">Open facebook</a>
<script>
(function($) {
"use strict";
// lightbox
$('[data-lightbox]').lightbox({
disqus: 'gameforestyakuzieu'
});
})(jQuery);
</script>Video
It is also possible to add youtube or twitch video to the lightbox just use the full url of video like in the example below.
<a class="btn btn-primary" href="https://www.youtube.com/watch?v=i8qzBkHjk_0" data-lightbox role="button">Open youtube</a>
<a class="btn btn-primary" href="https://player.twitch.tv/?channel=enigmastream" data-lightbox role="button">Open twitch</a>