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>

我将此 jquery 函数附加到上面的 onclick 事件:

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

Div 类“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>

`

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

好吧，问题是，在我使用 Jquery .load() 方法从主文件“about.php”中的“foto.php”中引入(.load())图库图像代码之后(在 #afisare_continut 中) div)，LighBox 效果将不再起作用。当我单击图像时，它只会向我发送完整图像的链接，而不向我显示灯箱。但是，如果在加载 foto.php 的主/初始文件(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