lightGallery version 2 has been released. Please upgrade

# Lightbox gallery with facebook comments.

Lightgallery custom-html property lets you to include any kind of html in to the lightbox. And lightgallery hash plugin lets you to give unique url for each images. Here i will demonstrate how to add facebook comments into lightgallery.

#### Plugin and css dependencies.

Lightgallery require the hash plugin and `lg-fb-comment-box.css` to be included in your document.

#### Facebook comment code

Step 1: Include the facebook comment plugin code on your page once, ideally right after the opening <body> tag.

    <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>

Step 2: Place the facebook comment plugin html code inside `data-sub-html` attribute of each lightgallery item.

    <!-- data-href should be the unique image url -->
    <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>

#### HTML structure

    <div id="comment-box">
      <a href="img/img1.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>'>
          <img src="img/thumb1.jpg" />
      </a>
      <a href="img/img2.jpg" data-sub-html='<div class="fb-comments" data-href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html#lg=1&slide=1" data-width="400" data-numposts="5"></div>'>
          <img src="img/thumb2.jpg" />
      </a>
      ...
    </div>

#### Javascript

    var $commentBox = $('#comment-box');

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

    $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();
                });
            }
        }
    });

#### Final result.

Use the code bellow if you want to keep the comment box separately from gallery slides. So that comment box won't move with slides but on after each slide transition the comment box will be replaced with the new one.

#### HTML structure

    <div id="comment-box-sep">
      <a href="img/img1.jpg" data-sub-html='<div class="fb-comments" data-href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html#lg=2&slide=0" data-width="400" data-numposts="5"></div>'>
          <img src="img/thumb1.jpg" />
      </a>
      <a href="img/img2.jpg" data-sub-html='<div class="fb-comments" data-href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html#lg=2&slide=1" data-width="400" data-numposts="5"></div>'>
          <img src="img/thumb2.jpg" />
      </a>
      ...
    </div>

#### Javascript

    var $commentBoxSep = $('#comment-box-sep');

    $commentBoxSep.lightGallery({
        addClass: 'fb-comments',
        download: false,
        galleryId: 2
    });

    $commentBoxSep.on('onAfterAppendSubHtml.lg', function() {
        try {
            FB.XFBML.parse();
        } catch (err) {
            $(window).on('fbAsyncInit', function() {
                FB.XFBML.parse();
            });
        }
    });

#### Final result.

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share