Question

有几个类似的问题/答案，但我还没有能够应用它们。我很绿。任何帮助表示赞赏。

我正在使用CubePortfolio - 它是一个基于jquery的可过滤项目库。每个＆＃34;项目＆＃34;可以选择使用ajax加载更详细的项目弹出页面，或打开一个灯箱，然后点击该灯箱查看每个项目的封面照片。

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

在请求ajax内容之前，这就像将.cbp-lightbox类添加到我的代码一样简单。然而，一旦加载了ajax，它就不再有效了。

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

相关网页是： http://www.4sdesignstudio.com/Metalset/projects.html#cbp=../Metalset/cubeportfolio/ajax/lafayette-veterans.html

我的基页（projects.html）中的工作代码 - 第一个拉入ajax加载的弹出窗口。 secodn打开灯箱。两者都在原始页面上工作，但是一旦加载了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();

            });

        }

指定灯箱的代表是.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(); });

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

1 个答案: