Getting black overlay screen on every click

[themightymo]

I have at least 2 sites that use your script that were experiencing the same issue today: a black overlay on every single click on every page. See https://digitaldirectoryexpress-com-2020-12-09.mystagingwebsite.com/directories/ for an example. The div that is covering everything is:

<div id="swipebox-overlay" style="width: 1346px; height: 983px;"><div id="swipebox-container"><div id="swipebox-slider" style="transform: translate3d(100%, 0px, 0px); display: block;"></div><div id="swipebox-top-bar" style="display: none;" class=""><div id="swipebox-title"></div></div><div id="swipebox-bottom-bar" style="display: none;" class=""><div id="swipebox-arrows"><a id="swipebox-prev" style="background-image: url(&quot;https://digitaldirectoryexpress-com-2020-12-09.mystagingwebsite.com/wp-content/themes/alivepromo/lib/images/swipebox/icons.svg&quot;);"></a><a id="swipebox-next" style="background-image: url(&quot;https://digitaldirectoryexpress-com-2020-12-09.mystagingwebsite.com/wp-content/themes/alivepromo/lib/images/swipebox/icons.svg&quot;);" class="disabled"></a></div></div><a id="swipebox-close" style="background-image: url(&quot;https://digitaldirectoryexpress-com-2020-12-09.mystagingwebsite.com/wp-content/themes/alivepromo/lib/images/swipebox/icons.svg&quot;);"></a></div></div>

Similar markup was in the overlay on the other site. Both sites use completely different themes, plugins, etc.

Any idea if this issue is related to Swipebox?

[sayontan]

I think you got hit with the latest WordPress update. It looks like Swipebox is not compatible with the version of jQuery included in this. This may be an issue with Swipebox, or it may be an issue with the jQuery code that WP includes (WP does some modifications to the jQuery library to make it play nicely with the rest of its ecosystem).

[netzgestaltung]

Yes its related to Swipebox and jQuery updates - done in WP 5.6:

• Not working with jquery 3.x.x #379
• https://wordpress.org/support/topic/website-goes-blank-swipebox-overlay/
• https://wordpress.org/support/topic/swipebox-and-jquery-3-5-x/
• https://wordpress.org/support/topic/pop-up-gets-shown-all-over-the-screen-please-help/
  br,
  tom

[sayontan]

OK, I had to dig around a bit and I think I found the problem. The issue is that Swipebox relies on $.selector, which was removed in jQuery 3.0 (https://api.jquery.com/selector/). To fix this, you will have to modify some Swipebox code, and some code at your end:

Firstly, if you are calling $('.swipebox').swipebox(...), you will have to change it to $('.swipebox').swipebox('.swipebox', ...). This edit is in your code.

Now, for the Swipebox edits, firstly, you have this at the bottom of the swipebox.js (https://github.com/brutaldesign/swipebox/blob/master/src/js/jquery.swipebox.js):

	$.fn.swipebox = function( options ) {

		if ( ! $.data( this, '_swipebox' ) ) {
			var swipebox = new $.swipebox( this, options );
			this.data( '_swipebox', swipebox );
		}
		return this.data( '_swipebox' );

	};

You will change this to accept the additional parameter. This becomes:

	$.fn.swipebox = function(selector, options ) {

		if ( ! $.data( this, '_swipebox' ) ) {
			var swipebox = new $.swipebox(selector, this, options );
			this.data( '_swipebox', swipebox );
		}
		return this.data( '_swipebox' );

	};

Now, you will have to modify some lines near the top of the file:

	$.swipebox = function( elem, options ) {

... becomes:

	$.swipebox = function( sel, elem, options ) {

And:

			selector = elem.selector,

... becomes:

			selector = sel,

This works for me.

Hopefully the author of Swipebox can merge this into the master.

[netzgestaltung]

there is a fork that has it patched: https://github.com/mho79/swipebox/

[trcyshw]

@sayontan - thanks for sharing this. Superstar.

[gorkemtunali]

Hi, @sayontan & @netzgestaltung

I am having the same problem.

But my English is not very good.

I would be very happy if you could send a video about the solution to the problem.

mail: tunaligorkem@gmail.com thx for all!!!!!

[gorkemtunali]

Important!

I solved the problem by installing the jQuery Migrate plugin.
But this is not a solution, I guess. It warns to make the necessary updates.

I am waiting for your help @sayontan @netzgestaltung

[netzgestaltung]

Hi @gorkemtunali i don't do videos at all, whats your preferred Language?

[FARAZFRANK]

Thanks for the solution worked. 👍

[PathhanSahab]

Thanks for the solution @sayontan

[netzgestaltung]

Hi @joshbounds you can either implement @sayontan s changes to that file or replace it with that forked one: https://github.com/mho79/swipebox/

[netzgestaltung]

you can also contact me over my page https://www.netzgestaltung.at/impressum/ for direct support.

[cinkagan]

Thanks bro @sayontan

[brutaldesign]

Thanks for sharing, I think this is the best solution. I will update the repo soon.

Happy new year everyone

[FARAZFRANK]

That's great @brutaldesign .