How can I inject a link banner image in an hayden template with jquery?

Question

One of my clients has a site on squarespace using the hayden template. They have a banner image (thumbnail) on the home page with text and a button link over the top. The button links to a contact page but I'm trying to also get the ENTIRE background image to link to an external URL.

I do not have access to the HTML, I can only add custom CSS. And there's a thing called PAGE HEADER CODE INJECTION (Enter the code that will be injected onto the header for this page.)

I've been trying to inject jquery into the advanced editor but I think I might be using the wrong ids or classes?

Here's what I've been trying. Is there anyway for me to link this image without touching the HTML?

Site url: www.ironathleteclinics.com

I'm injecting this into the header:

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

And this into the footer:

<script> $(document).ready(function(){ $('#collection-55dc8e2fe4b00187e448da91 .content-fill').css('cursor', 'pointer'); }); </script>

<script>$(function(){ $('#collection-55dc8e2fe4b00187e448da91 .content-fill').bind('click',function() { window.location = "www.google.com" }); });</script>

You aren't waiting for the page to load. – Niet the Dark Absol Sep 17 '15 at 22:26 — Niet the Dark Absol, Sep 17 '15 at 22:26

score 0 · Answer 1 · edited Sep 18 '15 at 13:48

0

I actually just now figured it out in my particular case on the hayden template! Header:

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

Footer:

$('#promotedGalleryWrapper, .promoted-gallery-wrapper, .banner-thumbnail-wrapper, .sqs-featured-posts-gallery').css('cursor', 'pointer'); }); </script>

<script>
   $(function(){ 
      $('#promotedGalleryWrapper, .promoted-gallery-wrapper, .banner-thumbnail-wrapper, .sqs-featured-posts-gallery')
      .bind('click',function() { 
                        window.location = "http://www.athleteps.com/nike-weightlifting/" 
           }); 
      });
 </script>

edited Sep 18 '15 at 13:48

rene

41,474
78
114
152

answered Sep 18 '15 at 13:41

Kate Moore

11
5

Can you explain a little bit why/how this works? You seem to be missing a `;` at the end of your `window.location` statement. JavaScript takes a guess where to add a `;` if you don't provide them, sometimes that guess is wrong but it takes forever to find such mistakes... (based on experience...) – rene Sep 18 '15 at 13:51
Thanks, I'm still very new at this. I didn't realize I was missing a ; I had originally found a forum suggesting this but it was in response to opening an internal link which is why window.location was used I think. After playing around with it a little longer however I switched over to using window.open(); because then I could target '_blank' I also think that might be better in this case because it looks like location is a property and open is a method where you can add more parameters. – Kate Moore Sep 22 '15 at 18:28

How can I inject a link banner image in an hayden template with jquery?

1 Answers1