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.
Google plus and disqus demos.
Watch the github repository i will add google plus and disqus comments demos soon.
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.js/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.js/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.js/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 = document.getElementById('comment-box');
lightGallery(commentBox, {
appendSubHtmlTo: '.lg-item',
addClass: 'fb-comments',
mode: 'lg-fade',
download: false,
enableDrag: false,
enableSwipe: false
});
commentBox.addEventListener('onAfterSlide', function(event) {
var items = document.querySelectorAll('.lg-outer .lg-item');
if (!items[event.detail.index].getAttribute('data-fb')) {
try {
items[event.detail.index].setAttribute('data-fb', 'loaded');
FB.XFBML.parse();
} catch (err) {
window.addEventListener('fbAsyncInit', function() {
items[event.detail.index].setAttribute('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.js/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.js/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 = document.getElementById('comment-box-sep');
lightGallery(commentBoxSep, {
addClass: 'fb-comments',
download: false,
galleryId: 2
});
commentBoxSep.addEventListener('onAfterAppendSubHtml', function() {
try {
FB.XFBML.parse();
} catch (err) {
window.addEventListener('fbAsyncInit', function() {
FB.XFBML.parse();
});
}
});