Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 15, 2019 at 1:50 am #1053905
    wadetaylornz

    Hi there,
    I have a request from a client who wants a portfolio item to open in a lightbox, and then within that lightbox link to another lightbox for other portfolio item content. I can hard link the link in the portfolio item with ‘www.examplepage?iframe=true’ and it opens in a lightbox from the main page, but then the internal links will open in a second lightbox on top of the first. This is not the functionality that I want. I want to open the first link from the main page to a lightbox, and then link between the portfolio items in the lightboxes.

    My solution is:
    In the portfolio item, the link is set to manual. (www.website.com/category/portfolioitem)
    On the main page I add the ?iframe=true to the link via jquery (code below). I then make sure that the link has the required classes of ‘mfp-iframe’ and ‘lightbox-added’ (code below). However, even though in inspector all looks correct, the lightbox refuses to open using this method. I have added this using a plugin to add scripts to 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 <script> jQuery(function($) { ..CODE HERE.. }); </script> makes sure that there are no errors in wordpress.)

    Do you have any ideas why this might not be working even though all the classes and text are correctly being added?

    This is the code from the jquery. The page shows the correct results in inspector. But this still opens the link in a new page instead of in the lightbox.

    <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>

    Below is the code from a working link 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>
    They are the same.

    The website is under development and so the real site can’t be accessed by the public, but here is a test site with the exact same setup.

    About

    On this page there are 2 different portfolio grids. The first one has the class ‘lightbox’ added, and therefore if you inspect it, the a link under the lightbox has the relevant classes added, and the link is myurl?iframe=true. The second portfolio grid doesn’t have the ‘lightbox’ class and there has none of the added stuff.

    • This topic was modified 5 years, 8 months ago by wadetaylornz.
    January 15, 2019 at 11:57 am #1054069
    wadetaylornz

    Ok, I think I have it.
    I needed to add .magnificPopup to the script.

    <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>

    The links now open in a lightbox without hardcoding the ?iframe=true to the end of the link in the portofolio.

    January 17, 2019 at 5:24 am #1054855
    Ismael

    Hi,

    Awesome. One thing though. You don’t need to set the “mfp-iframe” and “lightbox-added” class attributes manually because they will be added automatically once the lightbox script is initialized.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.