7.1 Portfolio Hover Background - custom project links

Site URL: https://fish-sailfish-58dj.squarespace.com/

How can I change the project links on a 7.1 Hover Background Portfolio to custom links? 

I want the project titles on this page https://fish-sailfish-58dj.squarespace.com/home2

To go to https://fish-sailfish-58dj.squarespace.com/weddings etc

I have tried adding <a href="weddings">weddings</a> to the project title but it kills the styling and the hover effect.

I have also tried URL mapping from /home2/weddings to /weddings but that doesn't work either 

The password is Golcar for the test site

Hi there

Password Golcar not working

@Adaptive

Is this the result you're after? If so you can add this code to your code injection.

<script>
(function(){
	window.addEventListener('load', function() {
	var portfolioLinks = document.querySelectorAll('.portfolio-hover-items-list a');
    portfolioLinks.forEach(item => item.href = item.href.replace(window.location.pathname,''));
})

})()
</script>

Trying to do this exact thing. Did you ever figure out how to redirect the portfolio links? I'm not quite sure what to edit/customize in the coding suggestion above to get the desired effect.

Thanks!

If you are still looking for an answer to this question please inject the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.portfolio-hover-item[href="/home/eat"]').attr("href", "/menu");
     $('.portfolio-hover-item[href="/home/drink"]').attr("href", "/menu/drinks");
   });
</script>

On 11/5/2020 at 11:35 AM, AltitudeDesign said:

If you are still looking for an answer to this question please inject the following code:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.portfolio-hover-item[href="/home/eat"]').attr("href", "/menu");
     $('.portfolio-hover-item[href="/home/drink"]').attr("href", "/menu/drinks");
   });
</script>

 

@AltitudeDesign would it be possible to replace portfolio links with lightbox links using the above code method?

I am trying to accomplish this on my page here:

https://rb4.squarespace.com

(pass: RB4)

On 12/12/2020 at 1:19 AM, joshroos said:

@AltitudeDesign would it be possible to replace portfolio links with lightbox links using the above code method?

I am trying to accomplish this on my page here:

https://rb4.squarespace.com

(pass: RB4)

 

Try using Lightbox Plugin

Then insert this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.portfolio-hover-item[href="/home/eat"]').attr("href", "#lightbox_page1-url");
     $('.portfolio-hover-item[href="/home/drink"]').attr("href", "#lightbox_page2-url");
   });
</script>

Replace /home/eat /drink with your project page urls

Replace page1, page2 with project page urls

13 hours ago, tuanphan said:

Try using Lightbox Plugin

Then insert this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.portfolio-hover-item[href="/home/eat"]').attr("href", "#lightbox_page1-url");
     $('.portfolio-hover-item[href="/home/drink"]').attr("href", "#lightbox_page2-url");
   });
</script>

Replace /home/eat /drink with your project page urls

Replace page1, page2 with project page urls

Where should this code be inserted?

Last line in Code Injection Footer

On 12/13/2020 at 8:28 AM, joshroos said:

Where should this code be inserted?

On 12/15/2020 at 12:59 AM, tuanphan said:

Last line in Code Injection Footer

Hey guys, I'm trying to get this to work on my site. I have a hover background portfolio page and can't seem to get the lightbox to show up. Lightbox works on other pages, and on the portfolio page I can see the code working to change the url to the correct #lightbox_(url) but the lightbox doesn't pop up.

Any thoughts? I see joshroos has it working on their site.

Site: https://trumpet-trumpet-ag3h.squarespace.com/

Page with working lightboxes: https://trumpet-trumpet-ag3h.squarespace.com/new-page

On 1/14/2021 at 2:55 AM, jpcarr4 said:

Hey guys, I'm trying to get this to work on my site. I have a hover background portfolio page and can't seem to get the lightbox to show up. Lightbox works on other pages, and on the portfolio page I can see the code working to change the url to the correct #lightbox_(url) but the lightbox doesn't pop up.

Any thoughts? I see joshroos has it working on their site.

 

Site: https://trumpet-trumpet-ag3h.squarespace.com/

Page with working lightboxes: https://trumpet-trumpet-ag3h.squarespace.com/new-page

Hi. I see both pages worked here. You can check again.