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 class＆＃34; tab-pane＆＃34;它将是来自不同文件的先前加载的代码。我有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中加载的代码应如何工作。转到此链接并单击图像，然后看到LightBox效果正常工作：click here

嗯，问题是在我使用Jquery .load（）方法带来（.load（））来自＆＃34; foto.php＆＃34;在主文件＆＃34; about.php＆＃34;（在#afisare_continut div中），LighBox效果再也不起作用了。当我点击图像时，它只是将我发送到完整图像的链接，而不是向我显示灯箱。但是，如果在foto.php的主/初始文件（about.php）中插入Gallery Images代码，则Lightbox效果会起作用。 Lightbox javascript插件是：<script src="js/plugins.js" type="text/javascript"></script>，它包含在主文件的标题中＆＃34; about.php＆＃34;。你可以找到plugins.js的代码：here

似乎来自plugins.js的Lightbox代码不适用于foto.php文件（使用.load（）方法加载）的Gallery Images代码。仅当图库图像代码已经在＆＃34; about.php＆＃34;。

时才适用

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

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

Javascript灯箱效果在jquery .load（）之后不再起作用

1 个答案: