Problem with [lightbox] - all image links on page are now lightboxed

Support
#1

I need one image - that opens a lightbox to show a youtube video.
no other lightboxes on this page.

Per your instructions on this page:

I am using this code to do my job:

[image class=“splvid” src="/wp-content/uploads/2017/07/HP_video_preview_spl.jpg" link=“true” href="//www.youtube.com/embed/xpV654a09UA?autoplay=1" lightbox_video=“true”]
[lightbox selector=".splvid"]

(I also tried without the class/selector and same result)

**This is the page it’s on: http://vps1.simulationpl.com/ **

THE PROBLEM : all images, that have links, on the page are now being opened in lightbox.

There are no errors in the console.

  • I have many years of web-developer experience - I’m not a beginner. just so you know.

Please advise.

#2

Hey,

I have checked your site and the lightbox is working normally. Could you tell us how to reproduce this problem?

#3

Please look closer ---- the lightbox works, but not correctly.

I only added lightbox code to the one image: the one that is a video play button (to the right of the steps/arrow pic).

  • I want that and ONLY that image to open that video in a lightbox.
  • all other images are just normal images with links.

HOWEVER. if you click the other images *(the one with the steps/arrow and the rounded buttons…)
they all open in the lightbox also - and THEY SHOULD NOT OPEN IN LIGHTBOX.

This is the code I am using in a TEXT element for the ONE I want to open in lightbox:

[image src="/wp-content/uploads/2017/07/HP_video_preview_spl.jpg" link=“true” href="//www.youtube.com/embed/xpV654a09UA" lightbox_video=“true”]
[lightbox]

… so again… the problem is: many other images on this page - the ones that have links - are also opening in lightbox and they should NOT.

#4

Hi There,

Please check your lightbox shortcode, as opposed to what you said above, it seems the selector you used is .x-img-link (https://prnt.sc/g1a77z) which is common to all linked images.

And I don’t see a class splvid on your video poster (https://prnt.sc/g1a7y1).

Please remove your other lightbox shortcode, and use the one you show above

[image class="splvid" src="/wp-content/uploads/2017/07/HP_video_preview_spl.jpg" link="true" href="//www.youtube.com/embed/xpV654a09UA?autoplay=1" lightbox_video="true"]
[lightbox selector=".splvid"]

That should work fine, I did try that on my end.

Cheers!

#5

I"m having the same issue.

I’m using two lightbox folios:

[image class=“folio-1” src="/wp-content/uploads/2017/08/whiskey-4.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/08/whiskey-3.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/07/whiskey-3.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/07/whiskey.jpg" link=“true”]
[lightbox selector=".folio-1"]

And I also have a folio-2 version.

I’m using link “/#sara” on an image to scroll to a section within the page. When I click the image, it opens a blank lightbox.

page URL: bricolage.com.au/furniture2

#6

Hello There,

Thanks for updating in! This does not work because the link for the lightbox isn’t an image. The lightbox is supposed to display the large version of the image. This lightbox does not display a section. You can only display a video or an image. Please change your links and link your image to the bigger version of the image.

Please let us know how it goes.

#7

Can you please re-read what I wrote.

I’m using an image as a link to scroll down to a section of the website. I do NOT want it to open a lightbox at all for that link. I want it to scroll. There is nothing in this image/link that tells it to open a lightbox.

Instead of scrolling, it opens a blank lightbox like this:

Then, in a different section I have images that are linked as light boxes.

I want these to act separately, but instead, the image that should just scroll to a section, opens a blank lightbox.

#8

Hi again,

I checked your page content and there is a lightbox selector ‘.x-img-link’ I see in your page’s source code that’s making all linked images to open up in a lightbox. Please search through your content and remove the the lightbox shortcode that is for x-img-link (see screenshot)

To further point you in the right direction, you’ve added this shortcode in heather section please see screenshot

Go to that section and remove the shortcode or change it’s selector and it should fix the issue. Cheers!

#9

There’s 115 matches of ‘.x-img-link’

I’ve not added this… It’s being created automatically. I’m only pasting the folio like this:

[image class=“folio-1” src="/wp-content/uploads/2017/08/whiskey-4.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/08/whiskey-3.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/07/whiskey-3.jpg" link=“true”]
[image class=“folio-1” src="/wp-content/uploads/2017/07/whiskey.jpg" link=“true”]
[lightbox selector=".folio-1"]

But Pro editor seems to be adding it:

I can’t remove it in Pro editor, because I didn’t add it.

Any other ideas?

#10

Hi again,

If you see my screenshot above, .x-img-link is being added as a lightbox selector, you don’t have to remove it from the images itself, it’s a default class for linked images. Please navigate to your Heather Dining section and find your lightbox selector in there, currently you’ve set to .x-img-link, just remove it.

Can you please paste the entire code for your Heather Dining section and that would be your folio-3 so we can take a look.

Thanks!

#11

I HAVE!

The entire code is all that I have used. That IS the lightbox selector. I cannot see anywhere that there is a class with x-image-link.

I’ve checked every element and there is no where that has the class x-image-link.

Every time I have to wait 24hrs, for a reply, my client is getting more and more annoyed at the delay. Can you please login and look for me because I’m either completely misunderstanding what you’re talking about, or there is some sort of a bug. Even the lightbox itself is acting weird (the icon at the top is pixelated and a weird colour.

#12

Hi,

One of your quotes is incorrect.

[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/bed.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/diagonal2.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/wally-bed.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/06/diagonal-condensed.jpg" link="true"]
[lightbox selector=".folio-2”]

Please change your code to this

[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/bed.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/diagonal2.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/08/wally-bed.jpg" link="true"]
[image class="folio-2" src="http://www.bricolage.com.au/wp-content/uploads/2017/06/diagonal-condensed.jpg" link="true"]
[lightbox selector=".folio-2"]

Hope that helps.

1 Like
#13

Perfect!

That fixed it thank you!

#14

You’re more than welcome, glad we could help.

Cheers!

#15

I have to re-raise this issue.

Using the recommended shortcode [lightbox selector=".wp-block-gallery a"] on a Wordpress Gutenberg Gallery, lightbox is working fine in Chrome, but not in Firefox on two different laptops tested so far.

Some lightbox script event is bound to the a tag around the image, though.
There is no error in the console, it seems like it’s just not firing properly:

https://zahnarzt-helden.de/praxisgruendung/erste-neueinrichtung

Can you please investigate further (and yes, I did clear all caches before!)?

Thanks,
Martin

#16

Hello Martin,

Thanks for writing in!

This is fairly old ticket and started by a different user. Posting on someone else thread create lot of confusion and slows down the response time. Faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thanks.