How to link to a product in the Lightbox caption ?

Hello,

I'm trying to add a hyperlink (text or button) in the lightbox of an image.

I'm a photographer and when a customer opens an image in a lightbox, I would like him to be able to click on a button (or text) "buy" to redirect him straight to the product page (the image to buy).

I tried to add the product link in the caption, but it doesn't seem to work.

Any idea ?

Thanks for the help.

You can use custom JavaScript to solve this. Can you share link to your site? We can check easier.

Sorry for the very late answer but I was on holidays and didn't check the forum.

The link is : www.costerquentinphotography.be and the password is 12345 (the website isn't finished yet)

Thanks for your help. That would be a great option if possible.

Can someone help me with the custom JavaScript ? Thanks

edit an image caption to this, then let me know, I will test some Java code

Burning sunset in the mountains <a href="https://google.com" target="_blank">Buy Now</a>

Thanks.

I tried that already but the html is not used by Squarespace and appears in plain text in the caption or title :S

Something is missing :S

1 hour ago, Costino80 said:

Thanks.

I tried that already but the html is not used by Squarespace and appears in plain text in the caption or title :S

Something is missing :S

 

Keep it & share link to page in screenshot. I will check some jQuery to make html to work.

Great ! 

Here is the page : https://www.costerquentinphotography.be/mountains

First image. Pass : 12345

I prefer having the "buy now" in the description rather than in the title.

Thanks in advance !

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(function(){
  $(".yui3-lightbox2 .sqs-lightbox-meta h1").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  .yui3-lightbox2 .sqs-lightbox-meta h1 a {
    float: right;
    background: white;
    color: gray;
    padding: 5px;
    border-radius: 5px;
}
</style>

Thanks.

I did the injection but the html still appears as plain text. 

The script is in the header (see image attached) but no button showing. 

After that, I added the h1 tag to the link : <h1><a href="https://www.costerquentinphotography.be/prints/burning-sunset-in-the-mountains" target="_blank">Buy Now</a></h1> but no luck either...

try again with

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $(".yui3-lightbox2 .sqs-lightbox-meta h1").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  .yui3-lightbox2 .sqs-lightbox-meta h1 a {
    float: right;
    background: white;
    color: gray;
    padding: 5px;
    border-radius: 5px;
}
</style>

Script updated.

Still no luck :S

Strange... Maybe I'm missing sthg ?

Strange....

Any idea ?

I tried many things but I can't get it work...:S

The html is not read...

Can someone help ? 

I tried various things (disable other code snippets, etc...) but I can't get it work ! 

I don't understand :S

Thanks in advance.

Perhaps the code runs before the Lightbox code is loaded. It will take time to retest some code. I will check back on the weekend.

On 8/28/2020 at 12:39 AM, tuanphan said:

Perhaps the code runs before the Lightbox code is loaded. It will take time to retest some code. I will check back on the weekend.

How can I check that ?

Thks.

Hi. I am a bit late, but I was looking for something similar, and it works nicely for me.

I think the issue is that you have no space between the mountain and the <a ... . It's silly, but please try again putting the space.