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

Question

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.

I'm currently doing the same thing mate. No luck so far though. Let me know if you crack it. — Clinton Green, Mar 17 '16 at 20:33

Clinton Green · Answer 1 · 2016-03-18T01:29:09.300

I had a similar situation where I needed to display the Photo captions and My own data as well. I created my own sidebar and overlaid it on top of the gallery but I was running into lots of height issues. So I utilised the Gallery layout by inserting my sidebar into the gallery.

Here's what I did, I created my sidebar and added it in the body, and hid it, then when the Gallery opens I cloned it and inserted it into the gallery. When the gallery closes I destroy it, and call it again when the gallery opens again. I also hide the captions by default and write them to the sidebar after each slide transition.

Have a look at the lightGallery API Events, without them this would not be possible.

HTML

// My own sidebar element, I added this just before the closing Body tag, it is hidden via CSS
<div class="gallery-info-box">
  <div class="slide-caption-wrap">
    // Photo captions will be populated here
  </div>

  // include advert

  // include comments

</div>

CSS

// Push Gallery objects 420px to the right so the controls wont be covered by the sidebar
.lg-admin-wrap,
.lg-outer .lg-video-cont,
.lg-outer .lg-thumb-outer,
.lg-thumb-open .lg-toogle-thumb,
.lg-outer .lg-toogle-thumb,
.lg-toolbar.group
  @media (min-width: 768px)
padding-right: 420px
.lg-actions .lg-next
  @media (min-width: 768px)
    margin-right: 420px

// Position and style gallery sidebar
.gallery-info-box
    display: none
.lg
  .gallery-info-box
    display: block
    position: absolute
    z-index: 1080
    top: 0
    right: 0
    width: 400px
    height: 100%
    padding: 20px
    background-color: white
    @media (max-width: 767px)
      display: none
      .slide-caption-wrap
        h4
          margin-top: 0
          font-size: 24px

JS

var $lg = $('#light-gallery');

// Perform any action just before opening the gallery
$lg.on('onAfterOpen.lg',function(event){
    // Hide the original comments
    $('.lg-sub-html').hide();
    // Insert sidebar into the gallery
    $('.gallery-info-box').clone().appendTo('.lg').show();
});

// Perform any action after the slide has been loaded
$lg.on('onAfterAppendSubHtml.lg',function(event){
    var lgSubContent = $('.lg-sub-html').html();
    // Populate the sidebar with the captions
    $('.lg .slide-caption-wrap').html(lgSubContent);
});

// Perform any action just after closing the gallery
$lg.on('onCloseAfter.lg',function(event){
    // Remove the gallery sidebar
    $('.lg .gallery-info-box').remove();
});

Hi, the sidebar is responsive up to a point. On mobile I hide it but it works well in tablet. You could make the sidebar responsive now as it's in the dom so it can be styled however you want. I just didnt see a use for it on small screens. — Clinton Green, May 15 '16 at 23:49

score 0 · Accepted Answer · answered May 14 '16 at 11:13

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

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

2 Answers2