[SmyekParticipant]

Hi !

I’d like to insert thumbnail images like in the first screenshot and then, when clicked, I want the image to pop up in real size in a lightbox like the second screenshot.
The thing is I don’t want to set up a media grid. I just want the thumbnails to be displayed out of a media grid.

(I’m using Visual Composer)

I tried several sets up in the Visual Composer options but couldn’t manage anything successfully…

Thanks for your help !

[SmyekParticipant]

oops the second image was to big. There is it.

[RahulModerator]

Hey There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[SmyekParticipant]

This reply has been marked as private.

[SmyekParticipant]

Ok I tried a lot of things and I (don’t really understand how this work !) managed to find a solution with this piece of code :

[vc_row inner_container=”true” no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/4″][image link=”true” src=”212″ lightbox_thumb=”212″ alt=”” href=”http://verreindustr.odns.fr/wp-content/uploads/2016/08/eqsol07.jpg” title=”” info_content=”” lightbox_caption=”” id=”” class=”” style=””][lightbox selector=”.x-img-link” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″ thumbnails=”true”][/vc_column][vc_column fade_animation_offset=”45px” width=”1/4″][/vc_column][vc_column fade_animation_offset=”45px” width=”1/4″][/vc_column][vc_column fade_animation_offset=”45px” width=”1/4″][/vc_column][/vc_row]

[JoaoModerator]

Hi There,

Glad to hear you found a solution that works for you.

Please let us know if you need help with anything else.

Joao

[SmyekParticipant]

Hi again !

Actually yes I would need some other help 🙂 I would like to unify the lightbox design between the single images and the media grid.

First, I would like the design of single image lightbox (screenshot 01) to be exactly the same as the design of media grid lightbox (screenshot 02). Meaning same color and opacity background, same border, same button to close the lightbox in the lower right corner, and same full screen button upper top right).

Second, I would like the hover behaviour of the media grid to be the same as the hover behaviour of classic linked image, meaning fading to white.

Thank you for your help !

[SmyekParticipant]

PS : the URL is the same as above

[RadModerator]

Hi there,

It’s not possible, your grid is from visual composer that uses different lightbox library. It’s the native element that isn’t related to X theme or cornerstone. Hence, you should use the visual composer’s lightbox instead of X lightbox.

There is available plugin here https://wordpress.org/plugins/prettyphoto/ and uses the same lightbox library as visual composer. All you have to do is add rel=”prettyPhoto”

Like this,

<a href="images.jpg" rel="prettyPhoto" title="This is the description"><img src="thumbnail.jpg" width="60" height="60" alt="This is the title" /></a>

Hope this helps.

[SmyekParticipant]

Hi,

Thanks for your help. I got it except the “you should use the visual composer’s lightbox instead of X lightbox”. I thought that what I was doing… How do I do that ? I tried to insert an image with lightbok option through VC but it still displays a different lightbox than the VC grid. Sorry if I get it wrong.

This is the code I use [vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″][image link=”true” src=”261″ alt=”” href=”http://verreindustr.odns.fr/wp-content/uploads/2016/08/eqsol07.jpg” title=”” info_content=”” lightbox_caption=”Title” id=”” class=”” style=””][/vc_column][/vc_row]

About the prettyPhoto plugin, reviews are pretty bad so I think I’ll pass on it :/

[SmyekParticipant]

Ok forget it, I didn’t know there was a grid builder incorporated with VC. I buildt my own grid so 😉

Thanks anyway 😉

Cheers

[Nabeel AModerator]

Glad you’ve sorted it out.

Cheers!

[Author]

Posts