在“灯箱”中添加Facebook评论 [英] Add facebook comments inside a 'lightbox'

问题描述

我正在建立一个网站来展示一些照片。使用灯箱效果来查看照片。

I am building a website to showcase some photos. The photos are viewed using a lightbox like effect. I want to add facebook comments inside the 'lightbox' but the comments doesn't load.

$（function（）{

$(function() {

    $('.pics').click(function(){

         ...
         ...

         $(".comments").html("<div id=\"fb-root\"></div><script src=\"http://connect.facebook.net/en_US/all.js#xfbml=1\">" + "<" + "/" + "script>" + "<fb:comments href=\"example.com\" num_posts=\"5\" width=\"800\"></fb:comments>");

          }); 

    });

提前感谢。

推荐答案

我认为你应该首先呈现评论，但保持它们不可见。像：

I think you should try rendering the comments first but keep them invisible. Something like:

<div id="comments" class="hidden">      
  <fb:comments href="example.com" num_posts="5" width="800"></fb:comments>
</div>

假设隐藏类使 div 不可见。

现在使用JavaScript代码，您应该能够：

Now with JavaScript code you should be able to do this:

$(".pics").click(function(){
    $("#comments").show();
});

我还没有测试过，有一个偶然的Facebook不会加载评论不可见元素。如果是这种情况，你可以在页面加载后避免渲染和添加 hidden 类，虽然可能会闪烁。

I have not tested this yet and there's an off-chance Facebook won't load the comments into an invisible element. If that's the case, you might be able to get away with rendering it and adding the hidden class after the page loads, though there might be a flicker.

这篇关于在“灯箱”中添加Facebook评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！