Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Posts

  • Joined

  • Last visited


Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi @Samkirby Do you know if you will be embedding a simple MP3 OR would it be a Soundcloud or Spotify playlist widget? If a simple MP3, here is a great tutorial on the code for that - https://www.w3schools.com/html/html5_audio.asp You would use the code they have in their Example to adjust to your MP3 URL and then paste that into the Lightbox.
  2. @djonn Glad it works. You can try to add that CSS code to the image. So for example, the code for the image in the lightbox might be <img style="max-width:500px;" src="images/myimage.jpg" alt="Image of Cosmo Kramer">
  3. @djonn There may be another issue going on. You can try using "/#" instead of just the "/". You can view my tutorials on the LIghtbox for a step-by-step setup - https://www.spacetutorials.com/squarespace-lightbox
  4. @ColeH_design I'm not sure. I have a tutorial on changing the background color from white of the page when a lightbox appears but I haven't come across any documentation for changing the color of the actual lightbox itself.
  5. @ColeH_design You can easily create a lightbox from clicking on an image. In my tutorial of a lightbox by clicking on text (https://www.spacetutorials.com/squarespace-lightbox/text), you would change the HTML code for the link to something like this: <a href="#/" data-featherlight="#bio-john"><img src="https://www.mywebsite.com/john.jpg" alt="John Smith"></a>
  6. @mgoins200 There are a few options: In your Squarespace Design settings, you should be able to set the max width of your site. This will help with the imaging continuing to enlarge regardless of screen size. Otherwise, you can use CSS to set a "max-width" of the images. So if you set a max-width:100px, the images would not get larger than 100px wide. If you do this option, be sure to also include CSS for height: height:auto;
  7. @mgoins200 You're welcome. It looks like you have fixed your issue by using some CSS on your images in the lightbox. Let me know if you have any other questions.
  8. @aarnaa If that happens, you'll then need to edit the code that links to the lightbox by adding a " / " in the link, see below: <a href="#/" data-featherlight="#bio-john">Learn About John</a>
  9. @aarnaa I completely forgot about this so thank you for reminding me. See below for <div style="display:none;"> <div id="bio-john"> <h1> Title of Lightbox </h1> <img src="http://www.imageurl.jpg"/> <p> Insert the bio text here </p> <p> <a href="#" id="close_button">Close</a> </p> </div> </div> <script> // Close Button featherlight jQuery(document).on('click','#close_button',function(){ console.log("test"); jQuery('.featherlight').click(); }); </script>
  10. @kabodhi I've come across some lightboxes that won't show the X to close if it has a lot of content and uses bullet points. I used some CSS to fix this issue. I'm not sure what your lightboxes look like but if you want to include a link, I can take a look. In order to hide them on Mobile, you can use some JavaScript (hopefully someone on here can provide details on what to include for this to happen) OR you can duplicate the code you have to show a lightbox, remove the link to the lightbox, and use some HTML & CSS to show one for Deskopt and show the one for Mobile.
  11. You'll need to insert a slash after the # like the following: <a href="#/" data-featherlight="#bio-john"><img src="/s/photo.jpg" alt="Photo of John"/> </a>
  12. @andreacacique You would use code similar to this: <a href="#" data-featherlight="#bio-john"><img src="/s/photo.jpg" alt="Photo of John"/> </a>
  13. @klein11 Be sure the other lightboxes have different IDs such as would be the name of the ID for the first lightbox, would be the name of the ID for the second lightbox, would be the name of the third lightbox, etc.
  14. @ArielleSika4 It's working fine for me. Be sure you are logged out of your Squarespace website OR open it in an Incognito Window in Chrome and see if it works then.
  15. @andreasis This would be with more CSS. Try the below to see if it works: <div style="display:none;"> <div id="bio-john" style="max-width:375px;"> <h2 style="font-size:36px;">Featherlight Title</h2> <p style="font-size:24px;">>Body text of the Featherlight pop-up</p> </div> </div>
  • Create New...