Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 Portfolio Hover Background - custom project links


Adaptive

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

10 answers to this question

Recommended Posts

  • 0

Hi there

Password Golcar not working

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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 post
  • 0

@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 post
  • 0

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 post
  • 0
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 post
  • 0
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

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...