Lightbox Gallery in Post

[tadbeavers]

Hi there,

Been trying to have an image gallery that also functions as a lightbox. I have had trouble finding a smooth borderless gallery, but that isn’t my primary problem. I have tried using the lightbox code on the basic gallery function, tried it on Envira Gallery, tried it on Blockgrid; I just cannot get a lightbox on my site. Tried searching Apex for support, nothing seems to help. What am I doing wrong?

You can check the code below. I did find a workaround if I remove the [Image] class and use basic html, but it removes most of the formatting and spacing in the blockgrid. Anyway to keep it within the blockgrid?

http://tadbeavers.com/jesse-kathleen-wedding/

[ruenel]

Hey There,

Thanks for posting in!

To resolve your issue, you will have to use the responsive lightbox shortcode.
Please check this out: http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

Hope this helps. Please let us know how it goes.

[tadbeavers]

Yes, this is what I’m using. The shortcode is what I’m having trouble with. I’m taking all of my relevant code from that page you linked to. On my page, I have a section with a blockgrid on it. For each item in the blockgrid, I have an image:

[image class="lightbox-gallery" src="http://tadbeavers.com/wp-content/uploads/2018/05/JK-Price-Wedding-1.jpg" alt="Example" type="thumbnail" link="true" href="http://tadbeavers.com/wp-content/uploads/2018/05/JK-Price-Wedding-1.jpg" title="Jesse-and-Kathleen-Price-Wedding-1"]

Then, in the same section, in a text element beneath the blockgrid, I have the lightbox short code. I think I have my classes set-up right.

[lightbox selector=".lightbox-gallery" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

When I click on the image in the blockgrid, it just opens to another page and not to a lightbox. Any ideas what could be causing it to do that?

[thai]

Hi There,

Please find this code:

jQuery("document").ready(function(){
	$(".entry-title-portfolio a").attr("target","_blank");
});

And change to this:

jQuery("document").ready(function($){
	$(".entry-title-portfolio a").attr("target","_blank");
});

Hope it helps

[tadbeavers]

I modified the above code using the global Javascript editing tool in the Customizer. But the problem remains unchanged.

I double-checked the code on my post and, for the most part, it matches what is on the responsive lightbox shortcode page.

What else can I do to make the lightbox shortcode work?

[thai]

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

• Link login to your site
• WordPress Admin username / password

Thanks.

[tadbeavers]

Secure Note Added Below

[ruenel]

Hello There,

Thanks for providing the information. I have logged in and inspected your site. It seems that there is a JS error on the page. The Cornerstone plugin files may have been corrupted.

Screenshot

Could you please re install X and Cornerstone?
Please see “Manual Updates” in this knowledge base article to know how you can re install it: https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62

Please let us know how it goes.

[tadbeavers]

Ok, uninstalled, deleted and reinstalled everything. No change.

On the plus side, I have upgraded to Pro. I guess that means that cornerstone doesn’t work any longer and the lightbox continues to not work.

[ruenel]

Hello There,

I created a test page and inserted your code above. I do not encounter any issue. The light box is working and the image is showing.

Screenshot

You can check it here: http://tadbeavers.com/an-x-test/

Please clear your browser cache or use private browsing mode and test your site again.

[tadbeavers]

Awesome, Your code is totally working for me. Not sure what is wrong with my code on my other page, but I tried your code on a post, also, and it works great. I will just disassemble what I previously wrote and use your code and splice in the photos I want.

Thank you very much!

Now, I can finally add some post elements to my website!

[thai]

Glad to hear everything is working now.