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