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

Question

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

我有这个菜单 Link( 我点击这个 link 从 foto.php 加载代码在 #afisare_continut div, 找到about.php ):

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

我有这个 jquery 函数附加到上面的 onclick 事件：

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

Div class "tab-pane" 这将是来自不同文件的先前加载代码。我有这个容器 div，其中 foto.php 文件加载：

<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>

`

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

嗯，问题是在我使用 Jquery .load() 方法将 "foto.php" 中的图库图像代码引入主文件 [=41] 之后=]（在#afisare_continut div），灯箱效果将不再起作用。当我点击一张图片时，它只会将我发送到完整图片的 link，而不是显示灯箱。但是，如果在加载 foto.php 的 main/initial 文件 (about.php) 中插入图库图像代码，则灯箱效果会起作用。 Lightbox javascript 插件是：<script src="js/plugins.js" type="text/javascript"></script> 并且包含在主文件 "about.php" 的 header 中。你可以找到plugins.js的代码：here

plugins.js 中的灯箱代码似乎不适用于 foto.php 文件中的图库图像代码（使用 .load() 方法加载）。仅当图库图像代码已在 "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}
           });
        });
    }

popup方法的初始化方式取自here

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

Javascript Lightbox Effects not working anymore after jquery .load()

javascript

jquery

lightbox