Question

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

并且，facebook评论框的实现没有响应，而我还需要它才能响应。

Answer 1

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

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

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

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

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

<强> 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 - 显示本地评论框html而不是fb评论框

2 个答案: