JSFiddle - React, Tailwind, and code Playground

by sachin377

HTML

<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css">
<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<div class="demo">
    <ul id="comment-box">
        <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/1-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/1-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/1.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/img/1-1600.jpg" data-sub-html='<div class="fb-comments" data-href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html#lg=1&slide=0" data-width="400" data-numposts="5"></div>'> <a href="">
          <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
        </a>

        </li>
        <li...

JavaScript

var $commentBox = $('#comment-box');
$commentBox.lightGallery({
    appendSubHtmlTo: '.lg-item',
    addClass: 'fb-comments',
    mode: 'lg-fade',
    download: false,
    enableDrag: false,
    enableSwipe: false
});

var manageFbCommentbox = function () {
    if ($(window).width() > $(window).height()) {
        $('body').removeClass('lg-portrait').addClass('lg-landscape');
        $('.lg-actions .lg-icon').css('top', '50%');
    } else {
        $('body').removeClass('lg-landscape').addClass('lg-portrait');
        $('.lg-actions .lg-icon').css('top', $('.lg-img-wrap').height() / 2 + 'px');
    }
};

$commentBox.on('onAfterOpen.lg', function () {
    manageFbCommentbox();
});

$(window).on('resize', function () {
    manageFbCommentbox();
});

$commentBox.on('onAfterSlide.lg', function (event, prevIndex, index) {
    if (!$('.lg-outer .lg-item').eq(index).attr('data-fb')) {
        try {
            $('.lg-outer .lg-item').eq(index).attr('data-fb', 'loaded');
            FB.XFBML.parse();
        } catch (err) {
            $(window).on('fbAsyncInit', function () {
                $('.lg-outer .lg-item').eq(index).attr('data-fb', 'loaded');
                FB.XFBML.parse();
            });
        }
    }
});