Costino80 Posted July 1, 2020 Share Posted July 1, 2020 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. Link to comment
tuanphan Posted July 5, 2020 Share Posted July 5, 2020 You can use custom JavaScript to solve this. Can you share link to your site? We can check easier. 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
Costino80 Posted August 17, 2020 Author Share Posted August 17, 2020 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. Link to comment
Costino80 Posted August 21, 2020 Author Share Posted August 21, 2020 Can someone help me with the custom JavaScript ? Thanks Link to comment
tuanphan Posted August 22, 2020 Share Posted August 22, 2020 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
Costino80 Posted August 24, 2020 Author Share Posted August 24, 2020 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 Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 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. 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
Costino80 Posted August 24, 2020 Author Share Posted August 24, 2020 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 ! Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 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> 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
Costino80 Posted August 24, 2020 Author Share Posted August 24, 2020 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... Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 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
Costino80 Posted August 24, 2020 Author Share Posted August 24, 2020 Script updated. Still no luck :S Strange... Maybe I'm missing sthg ? Strange.... Link to comment
Costino80 Posted August 25, 2020 Author Share Posted August 25, 2020 Any idea ? I tried many things but I can't get it work...:S The html is not read... Link to comment
Costino80 Posted August 27, 2020 Author Share Posted August 27, 2020 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. Link to comment
tuanphan Posted August 27, 2020 Share Posted August 27, 2020 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
Costino80 Posted September 1, 2020 Author Share Posted September 1, 2020 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. Link to comment
Richard_SG Posted December 21, 2020 Share Posted December 21, 2020 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. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment