Jump to content

On grid gallery block adding clickthrough link on title

Recommended Posts

  • 4 months later...
  • 2 weeks later...
12 minutes ago, whoshenry said:

Hello @tuanphan, I was unable to resolve this. Here is my site - https://daechecreative.com/photography

@Integrated No I was unable to resolve this, hopefully @tuanphan can work his magic.

I have code for this. 

But I don't remember which file I saved 😅

Tomorrow I will find again and send you. 

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
11 hours ago, whoshenry said:

Thank you very much @tuanphan

 

3 hours ago, rvdhout said:

Following... I just bumped into the same issue... 

First add to Code Injection Header

<style>
  .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
    cursor: pointer;
}
</style>

Next Add to Code Injection Footer

<script>
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(1) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/baptisms"};
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(2) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/wedding"};
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(3) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/food"};
</script>

Repeat this for other items

There is a better way, and you don't need to manually enter each link. However it takes time to check (~1 hour), and is outside the scope of free support at the forum. If you are interested you can email via the link in my signature. 😅

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
On 2/19/2020 at 4:37 AM, tuanphan said:

 

First add to Code Injection Header


<style>
  .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
    cursor: pointer;
}
</style>

Next Add to Code Injection Footer


<script>
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(1) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/baptisms"};
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(2) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/wedding"};
  var c=document.querySelector(".sqs-gallery>.slide:nth-child(3) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/food"};
</script>

Repeat this for other items

There is a better way, and you don't need to manually enter each link. However it takes time to check (~1 hour), and is outside the scope of free support at the forum. If you are interested you can email via the link in my signature. 😅

Thanks for the code, I have entered this and added the other links but now every title goes to the last link I entered and not for each separate page.

 

So for example if I have this code:

<script>
var c=document.querySelector(".sqs-gallery>.slide:nth-child(1) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/baptisms"};
var c=document.querySelector(".sqs-gallery>.slide:nth-child(2) .image-slide-title");c.addEventListener("click",n);function n(){window.location="/photography/weddings"};
</script>

The baptisms title goes to weddings.

Edited by whoshenry
Addition.
Link to comment
15 hours ago, whoshenry said:

Thanks for the code, I have entered this and added the other links but now every title goes to the last link I entered and not for each separate page.

 

So for example if I have this code:

The baptisms title goes to weddings.

Add this link to Code Injection Footer, and let me know. I will check again.

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

 

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
3 hours ago, tuanphan said:

Add this link to Code Injection Footer, and let me know. I will check again.


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

 

I have added this link but it's still doing the same thing. Every image title link goes to the last one in the list.

Link to comment
14 minutes ago, whoshenry said:

I have added this link but it's still doing the same thing. Every image title link goes to the last one in the list.

Okay. Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".sqs-gallery>.slide:nth-child(1) .image-slide-title").click(function() {
    var link = $(this).text(),
        href = "/photography/baptisms";
    window.location.href=href;
});
$(".sqs-gallery>.slide:nth-child(2) .image-slide-title").click(function() {
    var link = $(this).text(),
        href = "/photography/weddings";
    window.location.href=href;
});
</script>

 

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
On 2/22/2020 at 11:46 AM, tuanphan said:

Okay. Add to Code Injection Footer


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".sqs-gallery>.slide:nth-child(1) .image-slide-title").click(function() {
    var link = $(this).text(),
        href = "/photography/baptisms";
    window.location.href=href;
});
$(".sqs-gallery>.slide:nth-child(2) .image-slide-title").click(function() {
    var link = $(this).text(),
        href = "/photography/weddings";
    window.location.href=href;
});
</script>

 

That's it! It's working great now, thank you so much for your time.

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.