javascript - ajax 内容加载后重新加载灯箱

Question

那里有几个类似的问题/答案，但我无法应用它们。我还蛮绿的如有任何帮助，我们将不胜感激。

我正在使用 CubePortfolio - 这是一个基于 jquery 的可过滤项目库。每个“项目”都可以选择使用 ajax 加载更详细的项目弹出页面，或者打开一个灯箱，然后单击该灯箱即可查看每个项目的封面照片。

最终，我尝试将相同的灯箱功能添加到 ajax 加载的弹出页面，以便用户可以单击特定于该项目的照片。

在请求 ajax 内容之前，只需将 .cbp-lightbox 类添加到我的代码中即可。然而，一旦ajax被加载，它就不再起作用了。

我很确定我明白，一旦加载ajax内容，我需要重新调用(更好的术语？)JS，但是灯箱功能是与过滤器的其余JS代码一起内置的，响应式网格等并使用委托(delegate)(.cpb-lightbox)。我迷失了方向，希望有人能指出我正确的方向。

有问题的页面是: http://www.4sdesignstudio.com/Metalset/projects.html#cbp=../Metalset/cubeportfolio/ajax/lafayette-veterans.html

我的基页 (projects.html) 中的工作代码 - 第一个拉入 ajax 加载的弹出窗口。第二次打开灯箱。两者都可以在原始页面上工作，但一旦加载 ajax，灯箱就不会拉动。

  <!-- PROJECT 2 - Lafayette Veterans Building -->
                <li class="cbp-item arch">
                    <div class="cbp-caption">
                        <div class="cbp-caption-defaultWrap">
                            <img src="../Metalset/cubeportfolio/img/lafayette-veterans-cover.jpg" alt="" width="100%"><!-- images pointing towards Metalset folder... will need to updated to local folder once on new server-->
                        </div>
                        <div class="cbp-caption-activeWrap">
                            <div class="cbp-l-caption-alignCenter">
                                <div class="cbp-l-caption-body">
                                    <a href="../Metalset/cubeportfolio/ajax/lafayette-veterans.html" class="cbp-singlePage cbp-l-caption-buttonLeft">more info</a>
                                    <a href="../Metalset/cubeportfolio/img/lafayette-veterans-big.jpg" class="cbp-lightbox cbp-l-caption-buttonRight" data-title="Jobsite name and other info">view larger</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cbp-l-grid-projects-title">Lafayette Veterans Building</div>
                    <div class="cbp-l-grid-projects-desc">Architectural Metal</div>
                </li>

在我的基本页面 (projects.html) 的底部

  <!-- load jquery -->
    <script type="text/javascript" src="../test-platform/cubeportfolio/js/jquery.js"></script>

    <!-- load cubeportfolio plugin -->
    <script type="text/javascript" src="../test-platform/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

    <!-- load main js -->
    <script type="text/javascript" src="../test-platform/cubeportfolio/js/main.js"></script>

    <script type="text/javascript">
         jQuery(document).ready( function() {
             jQuery('#grid-container').cubeportfolio({
                // options
             });
        });
    </script>
    <script type="text/javascript">
        jQuery('#grid-container').cubeportfolio({
            /**
             *  This callback function will be trigger after the singlePage popup will be opened. (@param item = the current item clicked)
             */
            singlePageCallback: function (item) {
                // add content to singlePage
                this.updateSinglePage('<div>My content to append to singlePage container</div>');

            }
        });
    </script>

我的ajax加载页面中的代码(lafayette-veterans.html):

 <!-- BEGIN MEDIA THUMBNAIL GALLERY --> 
 <div class="cbp-l-project-details">
     <div class="cbp-l-project-details-title"><span>Media Gallery</span></div>

        <a href="../Metalset/cubeportfolio/img/lafayette-veterans-big.jpg" class="cbp-lightbox" data-title="TBD">
            <img src="cubeportfolio/img/lafayette-veterans-big.jpg" style="width:150px; height:auto"></a>
        <a href="../Metalset/cubeportfolio/img/lafayette-veterans-big.jpg" class="cbp-lightbox" data-title="TBD">
            <img src="cubeportfolio/img/lafayette-veterans-big.jpg" style="width:150px; height:auto"></a>
        <a href="../Metalset/cubeportfolio/img/lafayette-veterans-big.jpg" class="cbp-lightbox" data-title="TBD">
            <img src="cubeportfolio/img/lafayette-veterans-big.jpg" style="width:150px; height:auto"></a>
        <a href="../Metalset/cubeportfolio/img/lafayette-veterans-big.jpg" class="cbp-lightbox" data-title="TBD">
            <img src="cubeportfolio/img/lafayette-veterans-big.jpg" style="width:150px; height:auto"></a>

    </div>
</div>

较大的 JS 文件中的灯箱功能:

  // LIGHTBOX
        if (t.$obj.find(t.options.lightboxDelegate)) {

            t.lightbox = Object.create(popup);

            t.lightbox.init(t, 'lightbox');

            t.$obj.on('click' + eventNamespace, t.options.lightboxDelegate, function(e) {

                t.lightbox.openLightbox(t.blocksAvailable, this);

                e.preventDefault();

            });

        }

为灯箱分配的委托(delegate)是 .cbp-lightbox

Answer 1

在 ajax.done 之后调用 lightbox js 函数

https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js第 10 行。命名该函数，然后按名称调用它？

如果你有:

var request = $.ajax({ ... });
...
request.done(function(xml) { ... lightboxFunc(); });