Docs

[inkcreations]

Hi There, I have a quick question about the envira gallery, I would like to have one image displayed and once clicked on open up the lightbox, which then you can scroll through all the images. Are you able to tell me how to do this please?

Many Thanks

John

[Lely]

Hello John,

We can achieve that using Lightbox and image shortcode. Like this:

[x_image class="my-lightbox first-image" src="http://mysiteurl.com/url-to-my-img.jpg" type="thumbnail" link="true" href="http://mysiteurl.com/url-to-my-img.jpg" title="Title"]
[x_image class="my-lightbox first-image" src="http://mysiteurl.com/url-to-my-img.jpg" type="thumbnail" link="true" href="http://mysiteurl.com/url-to-my-img.jpg" title="Title"]
[x_image class="my-lightbox first-image" src="http://mysiteurl.com/url-to-my-img.jpg" type="thumbnail" link="true" href="http://mysiteurl.com/url-to-my-img.jpg" title="Title"]
[x_image class="my-lightbox first-image" src="http://mysiteurl.com/url-to-my-img.jpg" type="thumbnail" link="true" href="http://mysiteurl.com/url-to-my-img.jpg" title="Title"]
[x_image class="my-lightbox first-image" src="http://mysiteurl.com/url-to-my-img.jpg" type="thumbnail" link="true" href="http://mysiteurl.com/url-to-my-img.jpg" title="Title"]

[x_lightbox selector=".my-lightbox " 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"]

Then add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.my-portfolio.first-image {
    display: block !important;
}
.my-portfolio {
    display: none !important;
}

Do you have special reason why you need to use Envira Gallery? Do let us know.

[inkcreations]

Thankyou, well no specific reason if there is a better way to to please tell me if it is easier another way?

[Rupok]

Hi there,

Thanks for writing back. I think Lely provided you the easiest way with the lightbox – https://community.theme.co/kb/shortcode-walkthrough-lightbox/

In fact that’s the only way to use lightbox and not sure why you are asking for another way since it’s pretty straightforward and already given step by step walkthrough.

[Author]

Posts