[MadeOfStarsParticipant]

Hello Team X,

I am unning the latest versions of WP, X and Cornerstone.

I have started building a website with cornerstone. In the products page, the client would like a lightbox with navigation to appear upon clicking on the slider images to be able to see the product details. Is this possible with cornerstone elemetns or modifying the sliders code? Any alternative pre built pages I can utilize?
Here is the link to the page.

http://adecoimport.com/about/savon/

Side question, some elements won’t appear on the page or appearing very late upon using fade effect!

Thank you for the great theme.

[MadeOfStarsParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! Since you are using images for each of the slides, you can also add a responsive lightbox. Please check this out: http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

Hope this helps.

[MadeOfStarsParticipant]

Thanks for the response Rue,

But I didn’t quite get your answer. Are you suggesting adding the responsive lightbox shortcode to the product slider? Will it then look like the example you sent (4 pictures next to each other)?

Also, i’ve been trying to look up the documentations and members questions to figure out how to add the shortcode in cornerstone with no luck.

It would be really awesome if you could apply an example to any of the products and I’ll take care of the rest!

Log in creds in my previous post 🙂

Thanks for the continuous support!

[RupokMember]

Hi there,

There is example to setup the lightbox. Looks like you have placed them within code tag. You need to use them within Text Element.

Thanks!

[MadeOfStarsParticipant]

Why do I have a feeling that you guys don’t wanna help here?

I have searched your forum and documentation for answers with no luck. Then, I am trying to be very clear and specific in my questions. And you barely answer with few vague words that makes no sense to someone who’s using X theme for the first time. I have lost 3 days on this small request so far and haven’t arrived anywhere yet. Can you please be clearer and provide a link to the example you’re talking about to set up the lightbox in a slider if you don’t wanna help me set it up?

This is not the kind of support I expect from X theme!

[JoaoModerator]

Hi There,

I have set on your first product what I think would be the best solution.

How I did :

1- Add a RAW Code Element and insert the code for the lightbox selector:

[lightbox selector=".product-1"]

2- Wrap every image in an <a>with the class product-1 and href to the picture itself on slider 1 slider 2 and slider 3

<a class="product-1" href="http://adecoimport.com/wp-content/uploads/2016/09/REE_9209-1024x678.jpg"><img class="alignnone size-large wp-image-439" src="http://adecoimport.com/wp-content/uploads/2016/09/REE_9209-1024x678.jpg" alt="" width="1024" height="678" /></a>

That is it.

For the next products. You need to add another lightbox selectors, for example : [lightbox selector=".product-2"]

And when you wrap the images the class of the<a> needs to be product-2

Hope that makes sense.

Let us know if you need further assistance.

Cheers

[MadeOfStarsParticipant]

Thanks so much for the clear reply Joao,

I couldn’t see the example you set up, but it wasn’t hard to recreate it.

http://adecoimport.com/produits/savon-d-alep/

One last thing, the client is wondering if we can add navigation arrows when the lightbox opens. I looked into the shortcode options and didn’t find it. Is it doable and how?

Have a great day.

[Rue NelModerator]

Hello There,

Thanks for updating in! Regretfully this type of lightbox doesn’t have arrows. You have the entire side of the imagethat you can click on it from either left side or right side. You can highlight it by adding this code in the customizer,

.ilightbox-holder.ilightbox-next, 
.ilightbox-holder.ilightbox-prev {
    border: solid 3px #fff;
}

Please let us know how it goes.

[Author]

Posts