Search code examples
javascriptfacebook-commentslightgallery

Lightgallery - Showing local comment box html instead of fb comment box

I would like to display my custom comment box html instead of facebook's comment box in my CakePHP site's Lightgallery implementation. How can I do that? Will it need plugin customization?

And, facebook comment box implementation is not responsive while I would need it to be responsive as well.

Solution

  • At the end, we decided to use light gallery only in case of desktop and have normal responsive page link in case of smaller screens. It went something like this :

    HTML

    <a href="/projectitems/view/[ID]" class="light-thumb" data-image="/upload/projectitems/[ID]/image.jpeg">
  <img src="/upload/projectitems/[ID]/image.jpeg" alt="">
</a>
...

    JS

    if ($(window).width() > 991) {

  // Code to load lightgallery files by $.getScript() and append to <head> 

  $( "a.light-thumb" ).each(function( index ) {
    var currentHref = $(this).attr('href').replace('/view/', '/viewNew/'); // Link change to load only comment box
    $(this).attr('data-sub-html', '<div class="fb-comments" id="comments-' + index + '" data-href="' + currentHref + '"></div>');
    $(this).attr('href', $(this).attr('data-image'));
  });

  $(".row-fluid.slider").lightGallery({
    selector: '.light-thumb',
    appendSubHtmlTo: '.lg-item',
    addClass: 'fb-comments',
    mode: 'lg-fade',
    download: false
  });
  $(".row-fluid.slider").on('onAfterSlide.lg', function(event, prevIndex, index) {
    var commentBox = $('#comments-' + index);
    var dataUrl = commentBox.attr('data-href');
    $.ajax({
      url : '<?= $this->base ?>' + dataUrl,
      type : 'GET',
      success : function(response){
        commentBox.html(response);
        commentBox.css('background-image', 'none');
        $("body").css("overflow", "hidden");
      }
    });
  });
  $(".row-fluid.slider").on('onCloseAfter.lg', function(event) {
    $("body").css("overflow", "auto");
  });
}