在 jquery .load() 之后，Javascript 灯箱效果不再起作用

Question

请帮我解决以下问题。我花了一整天的时间在网上搜索修复并试图让它工作但没有成功。

我有这个菜单链接（我点击这个链接从 #afisare_continut div 中的 foto.php 加载代码，在 about.php 中找到）：

<li onclick="foto()">
   <a data-toggle="tab" href="#foto" id="submenu7">
   <div>
      Foto
   </div></a>
</li>

我在上面的 onclick 事件中附加了这个 jquery 函数：

function foto() {
                $('div[class^="tab-pane"]').hide();
                 $("#afisare_continut").load("foto.php");
            }

Div 类 "tab-pane" 它将是以前从不同文件加载的代码。 我在加载 foto.php 文件时有这个容器 div：

<div class="tab-content continut_tab container clearfix" id="afisare_continut"> </div>

这是 foto.php 代码：

<div id="fotoechipa" class="masonry-thumbs col-6" data-big="3" data-lightbox="gallery" style="margin-right: -1px; position: relative; height: 429px;">
      <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/1.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 0px; top: 0px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/1.jpg" alt="Gallery Thumb 1" style="opacity: 1;"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/2.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 190px; top: 0px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/2.jpg" alt="Gallery Thumb 2"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/3.jpg" data-lightbox="gallery-item" style="width: 380px; position: absolute; left: 380px; top: 0px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/3.jpg" alt="Gallery Thumb 3" style="opacity: 1;"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/4.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 760px; top: 0px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/4.jpg" alt="Gallery Thumb 4"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/5.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 950px; top: 0px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/5.jpg" alt="Gallery Thumb 5"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/6.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 0px; top: 143px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/6.jpg" alt="Gallery Thumb 6" style="opacity: 1;"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/7.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 190px; top: 143px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/7.jpg" alt="Gallery Thumb 7"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/9.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 760px; top: 143px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/9.jpg" alt="Gallery Thumb 9"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/10.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 950px; top: 143px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/10.jpg" alt="Gallery Thumb 10"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/11.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 380px; top: 285px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/11.jpg" alt="Gallery Thumb 14"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/12.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 570px; top: 285px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/12.jpg" alt="Gallery Thumb 12"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/8.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 0px; top: 286px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/8.jpg" alt="Gallery Thumb 13" style="opacity: 1;"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/12-1.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 190px; top: 286px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/12-1.jpg" alt="Gallery Thumb 15"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/6-1.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 760px; top: 286px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/6-1.jpg" alt="Gallery Thumb 16"></a>
       <a href="http://canvashtml-cdn.semicolonweb.com/images/portfolio/full/6-2.jpg" data-lightbox="gallery-item" style="width: 190px; position: absolute; left: 950px; top: 286px;"><img class="image_fade" src="http://canvashtml-cdn.semicolonweb.com/images/portfolio/4/6-2.jpg" alt="Gallery Thumb 12-1"></a>
</div>

`

您可以在以下链接中看到从 foto.php 加载的代码应该如何工作。转到此链接并单击图像并查看灯箱效果：click here

好吧，问题在于，在我使用 Jquery .load() 方法从主文件“about.php”中的“foto.php”（在#afisare_continut div)，LighBox 效果将不再起作用。当我单击图像时，它只会将我发送到完整图像的链接，而不是向我显示灯箱。但是，如果在加载 foto.php 的主/初始文件（about.php）中插入图库图像代码，则灯箱效果会起作用。 Lightbox javascript 插件是：<script src="js/plugins.js" type="text/javascript"></script>，它包含在主文件“about.php”的标题中。可以找到plugins.js的代码：here

似乎 plugins.js 中的 Lightbox 代码不适用于 foto.php 文件中的 Gallery Images 代码（使用 .load() 方法加载）。仅当 Gallery Images 代码已经在“about.php”中时才适用。

请帮助我使 Javascript Lightbox 插件在 foto.php 加载的代码上工作。

Answer 1

你应该在加载后初始化灯箱，把你的加载函数改成这样

function foto() {
    $('div[class^="tab-pane"]').hide();
    $("#afisare_continut").load("foto.php",
        /* add callback to load to initialize magnificPopup */
        function(){
            /*initialize magnificPopup*/
            $('#fotoechipa').magnificPopup({
                delegate: 'a', 
                type: 'image',
                /*depending on your needs you may have to add the following line*/
                gallery:{enabled:true}
           });
        });
    }

弹出方法的初始化方式取自here