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

Gallery: External link in new window/tab?


Cirqster

Question

I have an image in my gallery that i need to link to an external site. I need this to open in a new tab otherwise it will send customers off of my site, not ideal.

Squarespace have told me this is not a currently available feature (no idea why).

Does anyone know a way around this/way to inject code to help me out?

Edited by Cirqster
Tidy
Link to comment

Recommended Posts

  • 7

To add some clarification here, this is what you're doing:

To get a link to open in a new page, the proper HTML is:

<a href="http://answers.squarespace.com/questions/23324/gallery-external-link-in-new-windowtab" target="_blank">Link</a>

Squarespace doesn't offer the "Open in new window" checkbox in the gallery images like they do in the image block and other link fields. That checkbox simply adds the

target="_blank"

code before the close bracket.

The hack for gallery links to open in a new window is to add the necessary code for it to open in a new window before the closing quotation marks, which is why you add this to the end of your URL (without closing quotes):


"target="_blank

The first set of quotes are the closing quotes for the URL, and the original closing quotes that Squarespace provides become the closing quotes for the target="_blank".

Since Squarespace doesn't allow spaces in its URLs and gives you an error if you try to add it, you need to leave the space before target out.

Hope that helps!

Edited by Mixtus Media
Link to comment
  • 5

To all of those who are getting an error. The reason is that in a few of the postings listed on this page, people have said to add the

http://yourlinkhere.com" target="_blank

in the URL box. The problem is that there is an extra space before the

target="_blank

area. Just get rid of that extra space and it should work just fine. So, in conclusion, the exact coding should be:

http://yourlinkhere.com"target="_blank

Hope this helps.

@nataliemumford @jasminerh @samfinding_alliants @Mixtus Media @AndersArrenius @mpcole73

Edited by Fubeman
Initial Revision
Link to comment
  • 1

I am using Five template, have a Gallery Summary Block placed on homepage that was not allowing links (video, pdfs) to open in a new browser window.

After much searching, reading, trial and error, I think I finally pieced together a method to make all of the links in a gallery summary block open in a new browser window (without affecting the rest of the links on the site page).

First, enable jQuery on your site by going to main menu (Settings/Advanced/Code Injection) and pasting this code snippet into the header field:


<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Next, go to the page you want your gallery summary block to allow external links to happen on, and go to (Settings/Advanced/Page Header Code Injection) and paste this code snippet in the box:


<script>
$(document).ready(function() {
   $('.sqs-gallery-container a').click(function(event) {
       event.preventDefault(); // preventDefault first
       var link = $(this).attr('href');

       if(link != '#'){
           window.open(link);
       }
   });
});
</script>

I tested this on my page, every link on the site works normally, and all of the gallery summary block links now open in a new browser window.

NOTE: if you are using multiple gallery summary blocks on one page, this code snippet will affect ALL of them... so if you only want to have it affect one particular gallery summary block, you will need to specifically call out that gallery summary block in the page snippet.

This is the section of code you would need to change in the snippet:


$('.sqs-gallery-container a').click(function(event) {

In my case, the gallery summary block I needed to change was the 2nd of 3 on my index page. I viewed the page in Preview mode, then right-clicked and selected"View Source"... then scrolled (and scrolled... and scooooolllled) until I found which gallery summary block it was (summary-thumbnail-container) and edited the code snippet to reference that block specifically:


<script>
   $(document).ready(function() {
       $('.summary-thumbnail-container').click(function(event) {
           event.preventDefault(); // preventDefault first
           var link = $(this).attr('href');

           if(link != '#'){
               window.open(link);
           }
       });
   });
   </script>

I saved and previewing my page, and bah-da-bing, just the intended gallery summary block opened links in external browser windows, leaving the other gallery blocks alone and not affecting any other links on my page.

Advanced coders (who didn't start out web coding in good ol' html waaaaay back when dinos ruled the planet) - feel free to chime in on suggestions/improvements to this method, as I am not familiar with this scripting language, but managed to muddle around with things to make it work (as far as I can tell...... if it does something wonky I will post an update).

Hope this helps someone else! :)

Link to comment
  • 0

When I try to use this style of link for an image in my gallery, it says it is an invalid link...I tried to upload a photo of the issue, but I'm too new.

So I put in my link precisely as instructed, but there's a red warning saying "please enter a valid URL."

Is there a reason for this? Please help : (

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