[Lynda RParticipant]

How can I add a lightbox effect on a single image in the x theme?
Actually, I would like it to apply to all of the images on a page, such that they would appear in a slideshow, without having to display the images in a gallery.

What I want to do is exactly what is described here:
http://www.dwuser.com/education/content/click-to-zoom-for-photos-adding-lightbox

However, I wasn’t sure if adding the code referenced at the above url would conflict with the x theme, nor was I sure exactly where I would add it.

If there is a better way, can you describe it for me?

Lynda

[FriechModerator]

Hi Lynda,

Thanks for writing in! Sorry but we can not access that page. Do you need simple slider that will show your images? Please try the responsive lightbox shortcode:

http://theme.co/x/demo/renew/1/shortcodes/responsive-lightbox/

If this is not what you need, please clarify and provide us your site URL.

Cheers!

[Lynda RParticipant]

I am trying to add the lightbox function to individual images, rather than a grid of images, on the following page:
http://www.auroradesignstudio.com/newsite/changing-woman-gallery/

However, I would like all of the images to show up in the lightbox when one is clicked.

As far as I can tell from what I’ve read on the forum the only way to do that is in a text box, so I’m not sure how to add a class to the image as suggested for the responsive-lightbox shortcode link above.

Here is my attempt at coding it, but although the images show up in a sequential lightbox, the thumbnails are not showing up and the images are spaced quite far apart (in desktop large monitor view) with no indication of how to navigate between them. I’ve only placed this code on the first two images on the page.
[image src=”http://www.auroradesignstudio.com/newsite/wp-content/uploads/2016/05/Arisa_Rasak.jpg” link=”true” lightbox_thumbnails=”true” lightbox_opacity=”.5″ lightbox_caption=”Arisa_Rasak”]
[lightbox]

Any help would be appreciated.

Lynda

[JoaoModerator]

Hi there,

It seems like your code is working well.

The reason you have the impression they are separate so far apart is because they are pictures that ar portrait oriented while our screens are landscape oriented, as you can see the photos are taking all the space they can vertically.

You can look the alternative layout for the lightbox here where they would go from top to bottom instead from right to left.

http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

Let us know your thoughts.

Thanks

Joao

[Lynda RParticipant]

Joao,
I have a mix of vertical and horizontal images that I want to include in the lightbox. How would you suggest I handle that? Is there a reason the thumbnails are not showing up?
Lynda

[LelyModerator]

Hello Lynda,

Something like this will work:

[x_image src="http://virtualhost.dev/link_to_img_1.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption1"]
[x_image src="http://virtualhost.dev/link_to_img_2.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption2"]
[x_lightbox thumbnails="true"]

Thumbnails property is on the lightbox shortcode.

Hope this helps.

[Lynda RParticipant]

Thanks, but what I don’t understand is where to place this code, given that the images appear in different rows on the page. If I put this code in it’s entirety in the first row, then all of the images will appear there. Also, this doesn’t seem to address the issue of combined vertical and horizontal orientation. Here is the page for your reference:
http://www.auroradesignstudio.com/newsite/changing-woman-gallery/

Also, the thumbnail code still isn’t working.

Lynda

[FriechModerator]

Hi Lynda,

On that page place a RAW content element on bottom and paste this shortcode.

[lightbox selector=".x-img" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="true"]

Notice the thumbnails property; it was set to true, this should enable the thumbnails. Take note that the selector I’ve use on this lightbox shortcode is .x-img which is the default class for images added as image element on Cornerstone, so this means all those images will automatically included on the lightbox slides.

But in case that does not work because there is an image in that page that is not a link. Then replace that .x-img with different selector (e.g. lbx) and apply that to those images as a class.

If this does not help, please provide us login credentials in private reply so we can take a closer look.

Thanks.

[Author]

Posts