请帮助我解决以下问题。我花了一整天的时间在网上搜索修补程序,并尝试使其成功运行。
我有这个菜单链接(单击此链接可以从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