请帮助我解决以下问题。我花了一整天的时间在网上搜索修补程序,并尝试使其成功运行。

我有这个菜单链接(单击此链接可以从foto.php的#afisare_continut div中的代码中加载代码,该代码位于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加载的代码应该如何工作。转到此链接,然后单击图像,然后查看LightBox效果是否正常运行:click here

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

似乎来自plugins.js的灯箱代码不会应用于foto.php文件(已加载.load()方法)的Gallery Images代码。仅当“图库图像”代码已在“ about.php”中时才适用。

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

最佳答案

加载后,您应该初始化灯箱,将加载功能更改为以下内容

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

10-05 20:48
查看更多