Question

我正在使用wordpress主题Enfold。我有一个客户的请求，该客户希望在灯箱中打开一个投资组合项目，然后在该灯箱中链接到另一个灯箱以获取其他投资组合项目的内容。我可以用'www.examplepage？iframe = true'硬链接投资组合项中的链接，它会在首页的灯箱中打开，但是内部链接将在第一个灯箱的顶部打开。

我的解决方案是通过jquery将？iframe = true添加到主页上的链接。然后，我确保链接具有必需的“ mfp-iframe”和“已添加灯箱”类。但是，即使在检查器中所有看起来都正确，灯箱也拒绝使用此方法打开。我使用插件添加了此脚本，以将脚本添加到页眉和页脚。

<script>
jQuery(function($) {

$( document ).ready(function() {
  $('.lightbox a.grid-image').addClass('mfp-iframe lightbox-added');
$(".lightbox a.grid-image").attr('href', function(i) { return 
$(this).attr('href') + '?iframe=true'; }) 
});

});
</script>

页面在检查器中显示正确的结果：

<a href="/Winery/Giesen-Wines?iframe=true/" title="" data-rel="grid-1" 
class="grid-image avia-hover-fx mfp-iframe lightbox-added" style="height: 
auto; opacity: 1;">IMAGE INSIDE LINK</a>

但这仍然会在新页面而不是灯箱中打开链接。

这是主题生成的工作链接中的代码：

<a href="/Winery/constellation-brands?iframe=true/" title="" 
data-rel="grid-1" class="grid-image avia-hover-fx mfp-iframe lightbox- 
added" style="height: auto; opacity: 1;">IMAGE INSIDE LINK</a>

它们是相同的。

编辑：该网站正在开发中，因此公众无法访问实际网站，但这是具有完全相同设置的测试网站。

https://lionfishdesignstudios.com/skinsense/about/

在此页面上，有2个不同的投资组合网格。第一个添加了“ lightbox”类，因此，如果您检查它，则在lightbox下的链接会添加相关的类，并且链接为myurl？iframe = true。第二个投资组合网格没有'lightbox'类，并且没有添加任何东西。

Answer 1

您是否有网站链接，以便我们对其进行测试？

希望我能正确理解问题。

问题在于灯箱内的链接没有打开另一个灯箱？

第一个灯箱的链接可能没有获得click事件，因为它是通过javascript生成的，因此不受文档的影响。准备好了吗？

也许尝试将.click（）添加到您的灯箱链接中，以便它可用于生成的元素

例如：

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

Answer 2

好的，我想我有。我需要将.magnificPopup添加到脚本中。这是因为主题主题和它们使用的灯箱类型。

<script>
jQuery(function($) {

$(window).load(function() {
jQuery('.lightbox a.grid-image').magnificPopup({
  type:'inline',
  midClick: true
});

  $('.lightbox a.grid-image').addClass('mfp-iframe lightbox-added open-popup-link');
$('.lightbox a.grid-image').attr('rel', 'lightbox')
$(".lightbox a.grid-image").attr('href', function(i) { return $(this).attr('href') + 
'?iframe=true/'; }) 

});

});
</script>

链接现在在灯箱中打开，而没有将？iframe = true硬编码到投资组合中链接的末尾。

追加到链接并使用jQuery添加css类

2 个答案: