Jump to content

7.1 Portfolio Hover Background - custom project links

Recommended Posts

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

 

Link to comment

Hi there

Password Golcar not working

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@Adaptive

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

image.thumb.png.5142c0e2da95aedaf8738749d14044bc.png

 

<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>

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 2 weeks later...
  • 4 months later...

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>

 

Link to comment
  • 1 month later...
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)

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Link to comment
  • 5 weeks later...
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

Edited by jpcarr4
Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.