Docs

[sininvierno]

Hello guys!

Thanks for the wonderful theme and support so far.
I want to start creating photo galleries for my blog and am having some difficulty understanding how lightbox works.
What I want to do is have the 2 squared shaped images that are in the 6th section of the front page link to a different gallery within a lightbox each.
Later on I will want to have the “thumbnails” in sliders and that clicking on them opens a lightbox.
Thanks for your support

M

[sininvierno]

sorry, website is http://www.sininvierno.com

[Rupok]

Hi there,

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

Also you might be interested to check Envira Gallery as it’s a great plugin to create gallery with lightbox.

Cheers!

[sininvierno]

Hello

I’ll look into Envira for other galleries

Now, I looked at the walkthrough but it doesn’t really cover how to work with lightbox inside cornerstone, or to have an image in a slider open up in a lightbox when clicked.
Because I want to add galleries on my front page, I’ll need to work inside cornerstone and my ultimate goal is to have the images displayed in sliders that when you click become opened in a lightbox… help please?!!?

Thanks

M

[sininvierno]

Also I downloaded and installed Envira Gallery but the object wouldn’t appear inside cornerstone. I then read about the bundled modified version, where should I download this from?

Thanks

M

[sininvierno]

I have sorted out the Envira downloading it from Addons.
It doesn’t help my main need though.

Is this I found searching still useful? (It’s from 2014):
https://community.theme.co/forums/topic/use-a-single-image-to-open-a-lightbox-gallery-of-multiple-images/

It would be ideal for me to be able to create this

thanks

[Lely]

Hi There,

The suggestion on the thread will still work. Just add x_ to your image shortcode like this:
[x_image class="my-imageclass" src="http://insert-url-to-my-image.jpg" alt="optional name of my first image" type="thumbnail" link="true" href="http://insert-url-to-my-image.jpg" title="name of my first image" lightbox_caption="Optional content that will appear over image in lightbox if you put text here "]

Hope this helps.

[sininvierno]

Hello Lely

Where do I have to create all this? The guy on the thread said visual composer… is that cornerstone? I am used to creating the sliders using slider revolutions visual interface, not coding.
Can you please provide me step by step instructions for current version of theme and cornerstone/slider revolution to create an image that will open a lightbox gallery upon clicking just like this guy wanted?

thanks

[Rad]

Hi there,

Cornerstone and Visual Composer are both content builders, it’s up to you what you wish to use. But I recommend the cornerstone.

That thread is just a trial which isn’t 100% working, it’s quite hard to customize due libraries responsible for such features. The portfolio isn’t designed for the lightbox, the recommendation is given on that old thread, but it might be hard to understand. And if you insist, I’ll still provide same procedures which may break your portfolio page.

What I can recommend is just use Essential Grid or The Grid to create your gallery, just make sure the source post type is Portfolio. It has lightbox feature that can enable.

Please check the documentations here: https://community.theme.co/kb/integrated-plugins-the-grid/ , https://community.theme.co/kb/integrated-plugins-essential-grid/. You’ll notice the lightbox section. Each plugin has its own documentation too that you can check from its respective author’s site.

Thanks!

[sininvierno]

Rad you’re misunderstanding my request.
This has nothing to do with my portfolio. I just want to create photo galleries that open in a lightbox but through clicking on a single image. I don’t want to have to have an entire gallery page that opens in a lightbox, that’s easy but not what I need. What I want to achieve should be fairly simple as well. I want a single image in a section of my front page to open a lightbox gallery when you click on it. Is this really so complicated? I’ve been reading and searching around for a while. Let me know whether the theme is so limited in this aspect

Thanks

[Joao]

Hola,

Please do the following:

Place your image on Cornerstone, Turn ON the LINK, set HREF to the image URL.

Scroll down the Image Element and add the class folio-1 to the class box.

Create another row which you will hide it in all visibilities when you finish this next step.

On this ROW Create two RAW Content Elements.

First RAW Content write:

[lightbox selector=".folio-1"]

Second RAW Content write:

[image class="folio-1" src="http://yoururl.com/wp-content/uploads/2016/05/img1.jpg" link="true"]

[image class="folio-1" src="http://yoururl.com/wp-content/uploads/2016/05/img2.jpg" link="true"]

[image class="folio-1" src="http://yoururl.com/wp-content/uploads/2016/05/img3.jpg" link="true"]

[image class="folio-1" src="http://yoururl.com/wp-content/uploads/2016/05/img4.jpg" link="true"]

[image class="folio-1" src="http://yoururl.com/wp-content/uploads/2016/05/img5.jpg" link="true"]

Change the Urls on the code for the url of the images that you want to be shown on the lightbox.

Hide the ROW.

To hide the row you need to click on the magnifying lens and than select all devices on the hidden visibility options.

The idea of hiding the row is because in order that your images can be shown on your lightbox they need to be present on the page.

Hope that helps,

Saludos,

Joao

[sininvierno]

Joao

Thank you! That helped a lot. I knew there had to be a simple way.

🙂

M

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[sininvierno]

Hello There

So, I managed to build the lightboxes and trigger them with one photo each. They are being shown right now in my front page: http://www.sininvierno.com
However, the lightbox doesn’t work very smoothly, it’s slow, laggy and on mobile, doesn’t respond to zoom in or out. Also on mobile the thumbnails cover too much of the main photo.
I’m wondering whether the fact that it’s not working well is a script problem on my side, or maybe something wrong with my images?
Also, would it be possible to hide the thumbnails when shown on mobile and keep them on desktop?

Thanks a lot

Muriel

[Joao]

Hola,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Author]

Posts