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

spacetutorials

Circle Member
  • Posts

    143
  • Joined

  • Last visited

Everything posted by spacetutorials

  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>
  16. @andreasis This would be done with CSS code. Below is one example: <div style="display:none;"> <div id="bio-john"> <h2 style="font-size:36px;">Featherlight Title</h2> <p style="font-size:24px;">>Body text of the Featherlight pop-up</p> </div> </div>
  17. @SimonaZ7 From the looks of the code, nothing is standing out as being an issue. Are each "services" block their own HTML Code block? Or do you just have one block with all of the HTML code in there? If you feel comfortable enough, you can give me access to the Site and I can dig more into this issue if you'd like. Email is ken @ kensdesigns.com
  18. @SimonaZ7 Looking at the HTML code, you are missing the end quotes after each with the end quotes added. Adding that should fix it.
  19. @SimonaZ7 That is very strange. Are you able to share the URL of the website or webpage where you have this so I can investigate? Thanks,Ken
  20. @bethybeau Are the Code blocks placed on the page side by side OR on top of each other (stacked position)? I've had no issues thus far with putting them side by side and them staying that way. Feel free to just try to put the two pictures of the staff members side by side (not using HTML code) and see if they revert to a stacked position.
  21. @Sjiron To fix that issue, some people have used "#/" instead of just using "#" in the code here
  22. @Dhikari Can you share a Screenshot of this OR the URL of the page that has this? I have come across some users that are now having to put the a " / " in the a href like this: <a href="#/"></a>
  23. @SandlotSportsNYC It's working fine for me. What browser are you using & what version? I've tested it on the latest version of Chrome, Firefox v53, and also Microsoft Edge.
×
×
  • Create New...