Lightbox galleries are broken after update to X v8

Support
#1

Hi,
After I updated today the X template (from 7.2.3 to 8.0.7) along with WooCommerce 4.8, Cornerstone 5.0.7 and WP 5.6 the main lightbox galleries are stopped working with javascript error: Uncaught ReferenceError: assignment to undeclared variable height

Sample page: https://www.bombonieres.com.gr/ylika/mpomponiera-eisai-to-gouri-mou

You can start the gallery from the first photo after the feature image with the gallery icon in the corner.
I have more than 4000 post with galleries and I must to fix this.
using images like:
[image src=“https://www.bombonieres.com.gr/wp-content/uploads/2020/12/mpomponiera-eisai-to-gouri-mou_2679.jpg” link=“true” style=“display:none;” class=“p72707” lightbox_caption=“Πλακέτα Ζαμάκ σε χρυσό χρώμα: μια τέλεια σύγχρονη εκδοχή της αγαπημένης μας και σούπερ τυχερής τρύπιας δεκάρας.” alt=“Plaketa Zamak se xryso xrwma: mia teleia sygxroni ekdoxi tis agapimenis mas kai soyper tyxeris trypias dekaras.”]
and trigger:
[lightbox selector=".p72707" opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal” thumbnails=“true”]

Any help would be greatly appreciated,
Nick N.

Lightbox galleries in version 8 of X theme (follow-up)
#2

Hello Nick,

Thanks for writing in! Are you using the old iLightbox powered shortcode? It stopped working after WordPress upgraded the included version of jQuery. We are looking into the best solutions for this. Meanwhile, we would advise using Envira Gallery as an alternative.

You can check out the release notes from our developers here:

Best Regards.

#3

Hi @ruenel
Are you asking me about the shortcode? Everything worked just fine before the upgrade. I dont think I can mass-change my galleries to Elvira on all my post with search and replace. Manually is also almost impossible on thousands of post. (I can start build my new galleries with Elvira in the future).
As you can see the lightbox is starting but something is going wrong with the top position of the gallery images…
The error is related with the ilightbox that is in the cornerstone https://www.bombonieres.com.gr/wp-content/plugins/cornerstone/assets/dist/js/site/ilightbox.js
Thank you,
Nick

#4

@newmangreece, you could try Meow Lightbox. It has configuration for global selectors, but not for multiple galleries on a page to be in different lightboxes. If you want the post image to show in Lightbox as well add .entry-thumb as selector. And I have .x-img-link as an anti-selector.

#5

Hey Nick,

You can try out the following shortcode and see if this works on your end:

[image src="https://www.bombonieres.com.gr/wp-content/uploads/2020/12/mpomponiera-eisai-to-gouri-mou_2679.jpg" link="true" href="https://www.bombonieres.com.gr/wp-content/uploads/2020/12/mpomponiera-eisai-to-gouri-mou_2679.jpg" style="" class="p72707" lightbox_caption="Πλακέτα Ζαμάκ σε χρυσό χρώμα: μια τέλεια σύγχρονη εκδοχή της αγαπημένης μας και σούπερ τυχερής τρύπιας δεκάρας." alt="Plaketa Zamak se xryso xrwma: mia teleia sygxroni ekdoxi tis agapimenis mas kai soyper tyxeris trypias dekaras."]
and trigger:
[lightbox selector=".p72707" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

It seems to be working fine on my end and I don’t see any error in my browser’s console either. However with WordPress 5.6 the iLightbox shortcode stopped working as mentioned in our FAQs. There is no available fix at the moment but our developers are investigating the best solution to fix this.

Thank you for your understanding!

#6

Thanks @nabeel,
But the shortcode not working with the Cornerstone 5.0.7 where is an updated version of the i lightbox. The shortcode is still working but there is a javascript error that i think can be fixed.
You cannot kill shortcode (that users will use so many years on million cases) without any usable replacement. This is not fair with your X users.
Thank you,
Nick

#7

I use the same pop up see here for the fix:

its a temp fix while they make pro work with 5.6

1 Like
#8

Hi,
By downgrading the WP (from 5.6 to 5.5.3) and the Cornerstone to 4.2.3 the issue with lightbox galleries are temporarily fixed.
Is there a chance to fix this issue in the near future here in the X template or in the PRO (maybe by changing the template if its possible)?
Nick

#9

Hi everyone,

To confirm, this effects all versions of X and Pro after updating WordPress to 5.6. We finally discovered the source of a failure in ilightbox and will have a fix in the next point release. I’m not sure this will solve every issue we’re seeing, but I’ve been able to confirm it repairs some common lightbox use cases.

In WordPress 5.6 jQuery was upgraded to 3.0 by default which is was caused the conflict. Very in the weeds here, but if you’re intrigued by the peculiarities of javascript, here’s what happened:

  • In jQuery 3.0 they changed the return value of outerHeight to undefined instead of null.
  • This broke a whole bunch of scripts dependent on doing arithmetic with the output of outerHeight.
  • Assuming there was no outerHeight dimension found, arithmetic would look like 50 + $el.outerHeight() becoming 50 + null which becomes 50 + 0 and finally 50
  • After jQuery 3.0 it would be 50 + $el.outerHeight() becoming 50 + undefined which becomes 50 + NaN and finally NaN
  • The end result is any scripts not checking the type of the return would fail and elements relying on that data won’t be positioned correctly.

TL;DR; keep an eye out for the next point release.

#10

Hi @alexander,
Thank you for your detailed resolution on the issue.
We are waiting for the next release and planning to change the lightbox/gallery script for future use.
Regards,
Nick N.

#11

You’re most welcome Nick.

Cheers!

#12

Hi,
Can you confirm if the above issue fixed with the latest version of cornerstone ?

Thank you,
Nick

#13

Hi Nick,

The new version of the X theme was released with the 8.0.10 version a few days back. I would recommend you update it to the latest version and check if that issue still exists or not.
I would suggest you follow the below steps while updating to the latest version of the theme.

  1. Delete the Cornerstone
  2. Update the X theme to the latest version on automatic updates
  3. After the X theme is updated, use the link in the dashboard to automatically install the Cornerstone. It will be at the latest version

Hope it helps.
Thanks

#14

So tried Envira Gallery to solve this on my site. Have the newest Cornerstone/X/Wordpress installed. It immediately caused a conflict within Cornerstone that wouldn’t allow page to preview in builder. Turned off Envira and everything good again. So I still have about 30 lightbox galleries on my site that aren’t functioning. It’s kind of surprising this happened and no fix in sight.

#15

Hi @marcsp,

As Alexander (lead of the development team) said, they are still planning to fix the issue, and it will be available on the next cycle patch. Please check the changelog from time to time, if they are already done fixing the issue.

Hope that helps.

Thank you.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.