Lightbox opens 3 boxes with same content

Support
#1

I have set up lightboxes throughout a one page site to show portions that are heavy in text content without filling up my page with a lot of text. When I click on some of them, they open 3 overlapping lightboxes with the content I want to show in the lightbox. So when you scroll you can see one of the lightboxes scrolling, but the text from the other two are stationary. Not the desired effect. Please help!

See site here

#2

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#4

Other issues include:

Top/Bottom part of longer lightboxes are being cut off
width of lightboxes gets progressively smaller with each successive box in page

#5

Hey not sure if I was supposed to inline reply, I’ve never submitted via the forum before. But I did respond with my login info and a couple other issues (above and then a new comment below). I am trying to resolve this today as the launch is for Monday.

If this can’t be resolved easily, do you have a recommendation for a lightbox plugin that will behave nicely?

#6

Hi There,

Please avoid bumping on your own thread as it pushes them to the end of the line.

I have tested your lightboxes on the texts below, and they are loading nicel

Complete
Repertoire
Orchestre Symphonique
de Montréal Repertoire
2016 – 2017
Contemporary
Repertoire
2012 – 2017

What browser and device you are using while experiencing the issue?

Thanks!

#7

Ya I was testing another solution that doesn’t work either. Mobile issues.

I have put the site back with the original code iLightBox code, please go in and take a look. Same issues. Thanks!

#8

Hi there,

The problem is because your content has malformed HTML. You’re adding too many line breaks and converted to <p></p>.

<a href="#current_rep
 " class="show_current_rep
 " data-type="inline"><h3>Complete
Repertoire</h3></a>

[lightbox selector=".show_current_rep"]

When it’s outputted and processed by Wordpress, it becomes like this

<p><a href="#current_rep
 " class="show_current_rep
 " data-type="inline"></p>
<h3>Complete<br />
Repertoire</h3>
<p></a></p>
<p><span id="x-lightbox-2" data-x-element="lightbox" data-x-params="{&quot;selector&quot;:&quot;.show_current_rep&quot;,&quot;deeplink&quot;:false,&quot;opacity&quot;:&quot;0.85&quot;,&quot;prevScale&quot;:&quot;0.85&quot;,&quot;prevOpacity&quot;:&quot;0.65&quot;,&quot;nextScale&quot;:&quot;0.85&quot;,&quot;nextOpacity&quot;:&quot;0.65&quot;,&quot;orientation&quot;:&quot;horizontal&quot;,&quot;thumbnails&quot;:false}"></span></p>

Notice that <p></p> appears where the line breaks are. And because of that, the browser sees it like this

<p><a href="#current_rep&#10; " class="show_current_rep
 " data-type="inline"></a></p><a href="#current_rep&#10; " class="show_current_rep
 " data-type="inline" style="outline: none;">
<h3>Complete<br>
Repertoire</h3>
</a><p><a href="#current_rep&#10; " class="show_current_rep
 " data-type="inline"></a></p>
<p><span id="x-lightbox-2" data-x-element="lightbox" data-x-params="{&quot;selector&quot;:&quot;.show_current_rep&quot;,&quot;deeplink&quot;:false,&quot;opacity&quot;:&quot;0.85&quot;,&quot;prevScale&quot;:&quot;0.85&quot;,&quot;prevOpacity&quot;:&quot;0.65&quot;,&quot;nextScale&quot;:&quot;0.85&quot;,&quot;nextOpacity&quot;:&quot;0.65&quot;,&quot;orientation&quot;:&quot;horizontal&quot;,&quot;thumbnails&quot;:false}"></span></p>

Browser tends to fix broken elements and close elements left open, and add opening element to elements left with no proper opening. In result, multiple instances of <a>, and hence, multiple lightbox modal instances.

Your content should be like this with no line breaks.

<a href="#current_rep" class="show_current_rep" data-type="inline"><h3>Complete Repertoire</h3></a>
[lightbox selector=".show_current_rep"]

Hope this helps.

#9

Great thanks! Have resolved by just dropping most of the content into Raw HTML Blocks so I can format as I wish. Seems to have fixed the triple window issue.

But the other two issues are still taking place: lightboxes getting inexplicably narrower as they progress through the page and the top and bottom parts get cut off more and more.

Please advise.

Thanks!

#10

Hi There,

Glad that the first issue was resolve, but I am sorry I don’t quiet get the other issue. Please shed us light on this two points.

This lightbox looks fine to me (https://prnt.sc/g2q8wb)

Keep in mind that the lightbox shortcode is intended for image and video (not for page/text), so if you have other options please utilize that instead of the lightbox shortcode.

Thank you.