Docs

[pdopchev]

Hi guys,

Trying to recreate a similar functionality as the one on this page: https://travelcrestedbutte.com/crested-butte-hikes-tonys-trail-upper-upper-trail/ (see also screen grab) The images linked to the numbers display in a lightbox. The page I am working on is here: http://www.enjoycrestedbutte.com/crested-butte-trails-tonys-trail-whetstone-deli-loop/

Thank you!

[Rupok]

Hi there,

Thanks for wriitng in! You can follow this walkthrough to setup lightbox – https://community.theme.co/kb/shortcode-walkthrough-lightbox/

Follow the steps for “Buttons and Lightboxes” and use anchor instead of button.

Cheers!

[pdopchev]

Hi, thank you for the hint! However I am getting a bit confused how to incorporate it into the text. For instance, if I were to show the image linked to [1] in a lightbox, what exactly would be the order of the shortcodes?

Tony’s starts as a gradual climb <a href="http://www.enjoycrestedbutte.com/wp-content/uploads/2016/12/aspen-trees-1.jpg">[1]</a> with switchbacks through sage brush and a variety of wild flowers, eventually reaching the junction of the Upper Loop and Upper Upper Loop trails [2]. From the junction, take a right and follow a relatively flat trail to the next junction. Take a left here onto the first trail before you reach the barbed wire fence. This is the new Upper Upper reroute recently installed. It is a glorious, aspen filled path that ascends toward a grand vista.

Thank you!

[Paul R]

Hi,

You can simply add a class to your link and set it as your lightbox selector.

eg.

Tony’s starts as a gradual climb <a class="my-lightbox" href="http://www.enjoycrestedbutte.com/wp-content/uploads/2016/12/aspen-trees-1.jpg">[1]</a> with switchbacks through sage brush and a variety of wild flowers, eventually reaching the junction of the Upper Loop and Upper Upper Loop trails [2]. From the junction, take a right and follow a relatively flat trail to the next junction. Take a left here onto the first trail before you reach the barbed wire fence. This is the new Upper Upper reroute recently installed. It is a glorious, aspen filled path that ascends toward a grand vista.

[lightbox selector=".my-lightbox"]

Hope that helps.

[pdopchev]

Thank you so much for the help! It works great!

One more question – is it possible to change the lightbox skin to dark?

[Rupok]

Hi there,

Thanks for updating. It looks dark on my end – http://prntscr.com/dwegql

Are you referring something else?

[pdopchev]

Hi,

Yes, I was referring to the lightbox shortcode, which is implemented in the following text:

Tony’s starts as a gradual climb <a class="my-lightbox" href="http://www.enjoycrestedbutte.com/wp-content/uploads/2016/12/aspen-trees-1.jpg">[1]</a>...

[lightbox selector=".my-lightbox"]

Please check screen grab.

[Christopher]

Hi there,

It’s currently dark, please see the attachment.
Please clear cache and check again.

Thanks.

[pdopchev]

Hm, this is weird! Are you guys checking the lightbox that is activated when you click on the “numbers” in the text? Just checked again on two different browsers and it does have a light skin! The lightbox, which is activated when you click on the images (see screen grab) does have a dark skin!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.ilightbox-overlay.light {
     background: black !important;
}

Hope that helps

Joao

[Author]

Posts