Lightbox shortcode not working - cornerstone image element vs. classic image element

Hey there,

I am having some trouble with the [Lightbox] - Shorctode in Cornerstone. It works just fine with the Classic Image - Elements. But I don’t get it to work witt the standard (new) Image - Element?

Is there any difference between the two types of elements regarding Lightbox?

I appreciate any help!

Best regards

Lutz

Hello @Lutz,

Thanks for writing in!

With the classic image, you do not have any controls over the styling like borders, padding, margin, etc. With the new image element, you can do more. You can insert the image and also link it to itself so that when you add a ligthbox shortcode, it will work. You will have to do the following:
1.) Insert an image element.

  • Before inserting the image url, you must copy the image url first.
  • Enable the link in the image element settings.
    BJo4tvYTSXGyMpoyTTiGpw
  • Insert the copied image url in the link option.
    zTx87HyeSXOD4NnOlCc9wA
  • Find the “Image > Customize” tab and insert the custom class
  • LSpEAPWkSPGqKkc3eYwY6Q

2.) Insert a content area element and insert the lightbox shortcode. For example;

[lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

3.) Save your changes and test the page. As soon as you click the image, the lightbox will display with the bigger image.

Hope this helps.

Hey @ruenel,

thanks for your quick reply. It works. Great support. Thank you!

I figured out that’s also possible to choose URL from the side menu to set the URL automatically. That makes it a little easier.

image

Best regards

Lutz

Glad to hear it’s sorted, Lutz. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.