I have a client who wants a portfolio item on their website, built with the WordPress theme Enfold, to open in a lightbox and then link to another lightbox for additional content. I tried hard linking the portfolio item with 'www.examplepage?iframe=true', which successfully opens it in a lightbox from the main page. However, internal links open in a second lightbox on top of the first one.
To address this issue, I used jQuery to add '?iframe=true' to the link on the main page. I ensured that the link had the necessary classes: 'mfp-iframe' and 'lightbox-added'. Despite everything looking correct in the inspector, the lightbox failed to open using this method. I added this code through a plugin that inserts scripts into the header and footer.
<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>
The inspector displayed the expected results:
<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>
However, the link still opened in a new page instead of in the lightbox.
Here is an example of working code generated by the theme:
<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>
Both examples appear identical.
EDIT: The actual site is under development and inaccessible to the public. However, here is a test site that mirrors the setup:
This test page features two different portfolio grids. The first grid has the 'lightbox' class applied, so inspecting it reveals a linked image with the required classes and the link myurl?iframe=true. The second portfolio grid lacks the 'lightbox' class and does not contain the additional attributes.