[Michael PParticipant]

Hi,

Re my previous post, I have found a method of loading post content within the Essential Grid lightbox using this tutorial:

Load Post Content inside Essential Grid’s Default Lightbox

However, Essential Grid now loads the lightbox content with a long lag. The site is under construction so please log in with the details below to see the problem.

Many thanks for your help.

[Michael PParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

It’s fast, a bit delay is only normal since the content is pulled through ajax. It initiates request in the background and processed it, once it received the response from the server, it will then display the lightbox.

Content will not just display instantly just like other lightboxes, it has to wait for server response.

Thanks.

[Michael PParticipant]

Hello,

Thanks for your reply. From my perspective, the delay in response time makes the function unusable.

Can anyone suggest a better way of achieving an informational popup/lightbox containing an image and some brief text? It seems like this should be a simple thing within X, and yet it seems incredibly difficult to achieve simply and elegantly.

Surely someone must have an answer?

Thanks in advance.

[RadModerator]

Hi there,

Unfortunately, there is no simple way. X’s lightbox is just a simple implementation http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/. Its purpose is to use it anywhere, hence it’s not specifically built to specific feature like a grid or gallery, you’ll have to create your own grids and layout then implement that lightbox. Example

<a href="#content_1" class="lightbox_selector_1" data-type="inline">Image or button here</a>
<div id="content_1" class="visually-hidden">Image and content here will be displayed in a lightbox</div>
[lightbox selector=".lightbox_selector_1"]

<a href="#content_2" class="lightbox_selector_2" data-type="inline">Image or button here</a>
<div id="content_2" class="visually-hidden">Image and content here will be displayed in a lightbox</div>
[lightbox selector=".lightbox_selector_2"]

<a href="#content_3" class="lightbox_selector_3" data-type="inline">Image or button here</a>
<div id="content_3" class="visually-hidden">Image and content here will be displayed in a lightbox</div>
[lightbox selector=".lightbox_selector_3"]

This is just a sample of needed structure, you’ll have to enhance according to your layout. Just make sure HREF matches the ID, and selector matches the class.

Thanks.

[Michael PParticipant]

Thanks for your help.

What element in Cornerstone would I use to implement the code you’ve pasted above? Could I for example use the Block Grid element, and then apply the shortcode to each grid box?

Would be great if you could elaborate a little on how I would implement it in Cornerstone – sorry, I have no idea how to do this!

[JoaoModerator]

Hi There,

You need to paste on the RAW CODE Element.

Let us know if you need further assistance.

Joao

[Author]

Posts