加载 AJAX 内容后调用 fancybox

Question

我正在将内容（通过 Ajax）动态加载到名为 <div id="displayinformation"> 的 <div> 中

某些内容的格式设置为，如果有链接，则会出现 Fancybox 灯箱。

我已经测试了 Fancybox，如果内容没有从 Ajax 加载，它就可以工作。但是从 Ajax 加载，它什么也不做。

我相信这可能与：$(document).ready(function() { 有关，但我不确定。

我想我需要在加载 ajax 内容后运行灯箱的代码。

我的代码如下，如果有任何见解，将不胜感激。亲切的问候，保罗。

来电：

<a href="http://player.vimeo.com/video/61692184" title="Lower Title Text" rel="displayvideo" >XX</a>

顶级JS：

<script type="text/javascript">
$(document).ready(function() {

    $("a[rel=displayvideo]").fancybox({
        'overlayShow' : true,
        'width' : 800,
        'height' : 450,
        'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        'titlePosition' : 'inside',
        'type' : 'iframe',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-inside">Video:' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
});

</script>

Answer 1

当您在 Ajax 调用中获得响应时，您需要在该位置放置此代码。

例如

$.post("/index.php", {'param'   : param},
            function(response) {
                //here you need to put fancybox code
                $("a[rel=displayvideo]").fancybox({
                  'overlayShow'   : true,
                  'width'         : 800,
                  'height'            : 450,
                  'transitionIn'      : 'elastic',
                  'transitionOut'     : 'elastic',
                  'titlePosition'     : 'inside',
                  'type' : 'iframe',
                  'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                   return '<span id="fancybox-title-inside">Video:' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
               }
               });
            });