Lightgallery - 显示本地评论框 html 而不是 fb 评论框答案

【问题标题】：Lightgallery - Showing local comment box html instead of fb comment boxLightgallery - 显示本地评论框 html 而不是 fb 评论框
【发布时间】：2025-11-24 11:40:01
【问题描述】：

我想在我的 CakePHP 站点的 Lightgallery 实现中显示我的自定义评论框 html 而不是 facebook 的评论框。我怎样才能做到这一点？是否需要插件定制？

而且，facebook 评论框的实现没有响应，而我也需要它来响应。

【问题讨论】：

我目前正在做同样的事情，伙计。不过到目前为止还没有运气。如果你破解它，请告诉我。

标签： javascript facebook-comments lightgallery

【解决方案1】：

我也遇到过类似的情况，我需要显示照片说明和我自己的数据。我创建了自己的侧边栏并将其覆盖在画廊的顶部，但我遇到了很多高度问题。所以我通过将侧边栏插入到画廊中来利用画廊布局。

这就是我所做的，我创建了侧边栏并将其添加到正文中，然后将其隐藏，然后当图库打开时，我将其克隆并插入到图库中。当画廊关闭时，我将其销毁，并在画廊再次打开时再次调用它。我也默认隐藏标题，并在每次幻灯片转换后将它们写入侧边栏。

看看lightGallery API Events，没有他们这是不可能的。

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

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

【讨论】：

嗨，侧边栏在某种程度上是响应式的。在移动设备上我隐藏了它，但它在平板电脑上运行良好。您现在可以让侧边栏响应，因为它位于 dom 中，因此可以根据需要设置样式。我只是没有在小屏幕上看到它的用途。

【解决方案2】：

最后，我们决定只在桌面的情况下使用轻图库，在较小的屏幕情况下使用正常的响应页面链接。它是这样的：

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

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

【讨论】：