Jump to content

How to link to a product in the Lightbox caption ?

Recommended Posts

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.

493022861_Capturedcran2020-07-0121_13_09.thumb.png.2711d627eb676da73a653193f72176ef.png

Link to comment
  • 1 month later...

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>

 

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

1791419584_Capturedcran2020-08-2409_40_36.thumb.png.3d63993ac43129c74f96fc88113d98ba.png

Something is missing :S

 

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

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

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>

image.thumb.png.311f97ed39ddaf183dbd2fe4d560089c.png

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

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

 

Capture d’écran 2020-08-24 à 11.41.16.png

Link to comment

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>

 

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

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.

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

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.