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: [email protected] 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 .

[dis-mal-skull]

Hi, for me the most simple way was, just like @gorkemtunali says:

• Install a wp plugin called: Enable jQuery Migrate Helper
• Then, go to Tools > Jquery migrate > en Settings , look for jQuery Version and choose the option: Legacy 1.12.4-wp in my case.
  And reload the site, you can see a new widget.
  -Visit the website, the plugin will scan the depreciated jquery strings, and automatic this can be fixed.

[sciueps]

Hi, for me the most simple way was, just like @gorkemtunali says:

• Install a wp plugin called: Enable jQuery Migrate Helper
• Then, go to Tools > Jquery migrate > en Settings , look for jQuery Version and choose the option: Legacy 1.12.4-wp in my case.
  And reload the site, you can see a new widget.
  -Visit the website, the plugin will scan the depreciated jquery strings, and automatic this can be fixed.

it works for me, thanks :)

[qasim5611]

Yes Also Worked for Me. Thanks You

[handfulofcats]

@brutaldesign So was this fix implemented in your codebase? Please advice

[themightymo]

@handfulofcats It's not clear to me if the codebase includes the update, but @sciueps' comment was 12 days ago, so I'm guessing not (e.g. there have been no commits since 12 days ago).

[handfulofcats]

@themightymo I updated the js files with the latest that's available on this repo and the issue was solved for me. Mind you, it could be that we're experiencing similar but different issues.

[sweatherholt23]

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

Can someone please explain this further? I was able to find and replace the rest of the code but cannot find this anywhere. "This edit is in your code" isn't exactly descriptive.

I've tried the Enable JQuerry Migration plug-in and the site loads, when signed in, but no errors are logged and nothing is automatically fixed.

[themightymo]

@sweatherholt23, Just confirming re: jQuery Migrate plugin - Did you configure the plugin to load the "legacy" version of jQuery? If you didn't do that in the plugin settings, then the jQuery Migrate plugin does nothing.

[sweatherholt23]

@sweatherholt23, Just confirming re: jQuery Migrate plugin - Did you configure the plugin to load the "legacy" version of jQuery? If you didn't do that in the plugin settings, then the jQuery Migrate plugin does nothing.

Sorry - tried the plug-in again and it is working.

[Gayashanjayasinghe]

I got the same problem and downgrade the WP version to WP 5.5.5 and it works perfectly.

[kanish-111]

tried updating the js file, didnt work idk y , then tried the plugin , works thank you sm

[peterstavrou]

Thank you for the solutions!
Both the Enable jQuery Migrate Helper plugin worked for me as well as copying jquery.swipebox.js and jquery.swipebox.min.js to the js directory.

[RAAdjei]

Hi, for me the most simple way was, just like @gorkemtunali says:

• Install a wp plugin called: Enable jQuery Migrate Helper
• Then, go to Tools > Jquery migrate > en Settings , look for jQuery Version and choose the option: Legacy 1.12.4-wp in my case.
  And reload the site, you can see a new widget.
  -Visit the website, the plugin will scan the depreciated jquery strings, and automatic this can be fixed.

This worked for me as well, thanks! @gorkemtunali @sciueps

[vbuaquina]

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

This worked for me. Thank you!