Load iFrame in Essential grid's Lightbox

[kcreative]

Hi guys,

Having an issue with loading an iframe in Essential grid’s lightbox: https://kryptonitecreative.com/portfolio. I did follow this article http://www.themepunch.com.cach3.com/index.html@p=10246 and managed to achieve that, but recently changed skins in the grid and cannot reproduce this any more. The whole idea is to have the different websites load in an iframe rather than redirect to the particular website itself.

My train of thought: since the Meta element is actually an additional element, which is hidden (not the button/title, etc) I tried to link it to different sources but nothing seems to work: https://prnt.sc/isj0g6 It keeps linking to the original post…

If we have to follow the logic of it, since the element is hidden, the whole grid item has to be clickable, which I did: https://www.themepunch.com/faq/hyperlinking/ -> currently the grid is hyperlinking to the “cover” and the button should have no link associated with it (since all the custom javascript is associated with the Meta element) or am I wrong?

Do you guys have any thoughts on that?

p.s. The actual “View Website” button is not linked to anything.

[ruenel]

Hello There,

Thanks for writing in! Though the “View Website” button is linked to a custom meta, the cover of the grid item is still link to the post. Please edit your grid skin once again and make sure that it is link to “None”.

Hope this make sense.

[kcreative]

Thank you for the quick reply! When The “Cover” is linked to “None” nothing happens -> there is not a clickable element on the grid.

The “View Website” is not linked to anything, the “Meta” element is linked to “lightbox” https://prnt.sc/itb5tq So this is what I am trying to figure out - what exactly has to be linked to what to make an iFrame show in the gird’s lightbox…

[ruenel]

Hello There,

It turns out that you have set up the lightbox incorrectly. Please review this documentation instead: https://www.themepunch.com/essgrid-doc/lightbox-options/#

I have inserted an icon instead to demonstrate how to trigger the lightbox.

Hope this helps.

[kcreative]

Hi, thanks for the reply! The “View Button” has a lightbox set up already and it does the same thing as the icon you have inserted - honestly do not see any difference there… Anyway, the result is the same - still no iFrame.

[kcreative]

Quick update, got it to work finally. There is the steps, if someone else is looking for this “trick”:

1.Follow Theme Punch’s article: http://www.themepunch.com.cach3.com/index.html@p=10246


2.Add a source to the provided code in the article: https://prnt.sc/iu1qcj
settings.source = iframe;

3.Hide featured image from appearing under the iFrame `jQuery('body.page-id-330').find('.esgbox-container').first().remove();`

4.Both the "Meta" element and the actual button (View Website) are set to lightbox

5.The Cover under Layout Composition is linked to none

6."Lightbox" under Essential Grid settings is set to "Featured Image"

Cheers!

[christian]

Glad you’ve sorted out. And, thanks for sharing.