Change Background Image on Text Hover / Change Portfolio Link to Redirect to Lightbox

Site URL: https://mused-interiors.squarespace.com/

I need help with a specific feature on Squarespace. My client is an interior design studio, and wants all of her projects as large links on display, just like the Portfolio page on the Background > Hover mode.

This solution would usually be perfect, but the client also wants her website to be a mostly long scrolling page, so she doesn’t want the project links going to another page, but rather a pop up/ lightbox. I bought Lightbox Anything plugin from SQSP Themes to achieve any link going to a lightbox.

I’ve uploaded the js and css files and tested the code and it does indeed work, but I haven’t figured out how to make it work with the project link opening to a Lightbox. So I need either of the following:

Change background image on hover for text link

I created a blank page with each project text link that opens to the lightbox pop-up and it works perfectly. Since this was a blank page and NOT a portfolio page though, it doesn’t change the background image when I hover over each project.  For this instance, I need to change the background hovers.

OR

Change coding to have the portfolio links open the lightbox pop up

I used a portfolio page and created projects for each like normal. However, I’m trying to redirect each project link away from a separate page and point it towards the new pop up. For some reason, the code isn’t working.

Website Login Info: 
Website: https://mused-interiors.squarespace.com/
Password: mused

If anyone could help me, I would really appreciate it!

To change Portfolio Link to Lightbox Link, try edit this code

<script>
$(document).ready(function() {
	$('a.portfolio-hover-item[href="/work/espacio-waikiki"]').attr('href','&nbsp;espacio-waikiki');
	$('a.portfolio-hover-item[href="/work/hapuna-beach"]').attr('href','&nbsp;#lightbox_hapuna-beach');
	$('a.portfolio-hover-item[href="/work/kohala-coast"]').attr('href','&nbsp;#lightbox_kohala-coast');
	$('a.portfolio-hover-item[href="/work/parklane-residences"]').attr('href','&nbsp;#lightbox_parklane-residences');
	$('a.portfolio-hover-item[href="/work/islands-residences"]').attr('href','&nbsp;#lightbox_islands-residences');
});
</script>

to this new code

<script>
$(document).ready(function() {
	$('a.portfolio-hover-item[href="/work/espacio-waikiki"]').attr('href','#lightbox_espacio-waikiki');
	$('a.portfolio-hover-item[href="/work/hapuna-beach"]').attr('href','#lightbox_lightbox_hapuna-beach');
	$('a.portfolio-hover-item[href="/work/kohala-coast"]').attr('href','#lightbox_lightbox_kohala-coast');
	$('a.portfolio-hover-item[href="/work/parklane-residences"]').attr('href','#lightbox_lightbox_parklane-residences');
	$('a.portfolio-hover-item[href="/work/islands-residences"]').attr('href','#lightbox_islands-residences');
  $('a.portfolio-hover-item').attr('target','_self');
  pluginLightbox();
});
</script>

@tuanphan Shucks, I tried using this code and it didn't change anything on the back end. Is there another code we can use? 

For further context, I created a Loom video here. Thank you!

Add this to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>