On grid gallery block adding clickthrough link on title

Hello, I am trying to make the title or caption on the gallery grid images to also be a clickthrough link. The text appears underneath the image but it is just the image that acts as the link, not the text.

Thanks.

were you able to resolve this issue?

Can you share link to your site? I can take a look.

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.

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. 

Thank you very much @tuanphan

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

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

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.

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>

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.

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>

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.