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

Search the Community

Showing results for tags 'lightbox'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi all. I have a Gallery section, (in 7.1) set to Masonry layout, with Lightboxing activated. I would like to have the images' individual descriptions/captions HIDDEN at the top level (so the masonry grid stays clean), but VISIBLE in full when someone clicks on an image to expand it into the lightbox format. I know it's not natively possible, but is there a way to do it with a code snippet perhaps? There is so much I need to say about each image, but not at the top, section level. The first impact has to be one of clean lines and no clutter. The second level, is drilling down to the descriptions. The logical way to do that is by creating a lightbox state that also shows the image's description. Any help or advice greatly appreciate. Happy to venmo some cash to someone who could help me add the right code. Cheers
  2. Site URL: https://www.jurajsimkovic.com/projects/slovak-national-theatre Hi, as the title says, I would like to add specific captions to specific images in my gallery and, this is important, I want them to only appear in the lightbox view. I don't want them to appear under the images when viewed casually on the site, without lightbox. Most of them are masonry grid-galleries, one of them is a simple grid-gallery. I have just paid for the personal plan and would like to avoid upgrading and paying for the higher tier business plan. The picture attached to this post should clarify the look of the captions. Thank you in advance. Juraj
  3. Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!
  4. Site URL: https://kwmulticultural.ca/interpreters I have an embedded jotform in a lightbox - when users click submit, there is a custom thank you message - however users have to scroll up to see it. What coding I can put into the button so that it scrolls to to the top when users hit "submit" TIA!
  5. Site URL: https://ariaconsulting.net Hi, Does anyone know how I can add embed code for a lightbox object to a button? I have a jotform I want to come up in a lightbox when the button is clicked. Thanks!
  6. Hi I am interested in having image thumbnails that once hovered upon, play a short loop and show the title of the video project... possible? Creating a video portfolio page and would like to use the new Fluid Engine to scale my own thumbnail grid, with blocks of different sizes holding videos. Once a cursor goes over that thumbnail, the title would pop up simp, and an 8 sec loop i created would begin to loop, then if clicked, the video would start - and - it would start in a lightbox scenario and not just play right there. Similar to this site: https://davidmcmurry.com/ Is this at all possible? And I am not proficient in the least bit with any CSS. Thank you in advance!
  7. Hi, I want to add an Inquire button on my products detail page, which in click opens the form in lightbox popup. The problem is I can add it as additional info but now I have more than 500 products, and adding it to each product manually will take so much of time. I don't want to use plugin. I have added the button using custom code, created a form in new page but don't know how I can show a popup on button click. Thanks.
  8. Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh). So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that: - it matches the length of the image, wether it's portrait or landscape mode. - the opacity is reduced and the block is overing the image. Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂 Thanks a lot! This is the code I have: .image-caption-wrapper { background: none !important; /* Background Overlay*/ margin-left:25px; } /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: Lato; font-weight: 200; font-style: normal; line-height: 1.8em; font-size: 15px; margin: 0 0 1em; color: #EBEBEB; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 0.5em; padding: 1em 2em; max-width:55%; text-align:center; background-color: #121212; transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; }
  9. Site URL: https://www.stigfloberghagen.com/portfolio How can I get the lightbox image to open as bigger? There seem to be some padding around them when opened in Lightbox
  10. Site URL: https://mauve-fife-pcpk.squarespace.com/weneednewfriends I'm trying to have a video light box pop out when you click on an image. I think using featherlight is the right option but I'm not that experienced in web design and how to set that up. The password to the website is "123" This is what I hope for it to look like: https://www.amfilms.ca/portfolio-item/lego/ The photo on my website is the one at the top of the page of the 4 guys sitting on the couch.
  11. Site URL: https://unchartedtrvl.squarespace.com/config/ On our site, within a page, we have a lightbox form with a button that says "Request Detailed Itinerary By Mail or Email." Submission, opening, and fields work fine but there is no way to close the lightbox form. It essentially breaks the page and requires a refresh. Can anyone help out here, I am at a complete loss. https://unchartedtrvl.squarespace.com/scheduled-group-tours-2022/north-caucasus
  12. Site URL: https://pumpkin-pentagon-fmgr.squarespace.com/blk-101-nova-scotia Hi guys, I've implemented a featherlight lightbox biography for my website. However, sections or elements below the lightbox area become interactive and those sections open a lightbox when there should be none opening up. Is there a problem with the coding? I've been having difficulty configuring how the lightbox coding. My current code looks like this: Code Injection (Header and Footer): <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-latest.js"></script> <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> Code Block: <a href="#" data-featherlight="#bio-Lindell"> <img src=imagelink</a> <div style="display:none;"> <div id="bio-Lindell" style="text-align:center;"> <img src="Image link" width="300" height="300"/> <h3 style="text-align:left">Name</h3> <p style="text-align:left">Text</p> </div> </div> Looking forward to see how to remedy this issue. My password for my site is 7412!
  13. Site URL: https://hexagon-seahorse-9ths.squarespace.com/portfolio I have just created a video collection page. I like how everything is categorised and laid out. But I wonder is it possible to: 1. Open the videos in a lightbox and autoplay instead of sending the user to another page. I'd like less clicks for my users. (Also would be nice to overlay the thumbnail with a video play icon) or if not possible then: 2. Send the user to the video page as normal and have it autoplay https://hexagon-seahorse-9ths.squarespace.com/portfolio pass: portfolio Thanks Terry
  14. Site URL: https://www.angeliquebrochery.com/shop Hi, I would like to know it its possible to reduce the line height in all my lightbox ? I cant change it otherwise all the other part of my site will move and want them to stay the same. https://panda-quillfish-s63g.squarespace.com/painting-on-paper mdp : alouette1991
  15. Site URL: https://burgundy-jaguar-fltk.squarespace.com/1-lost Hello, I created a photo gallery in the style of "Grid: Masonry" and turned on the "Lightbox" function so that visitors can scroll through all the images as pop-up images. My client wants a custom background image (in the style of a newspaper) to be placed behind all the images when they scroll through the gallery. I cannot find any codes to do this. I have provided a mockup of what my client wants. I would really appreciate some help finding a custom code to make this happen! Thank you!
  16. Site URL: https://dpinto.ca/en/portfolio/brand-identiity Hi 🙂 Since my site has a slide show reel, my images show smaller on mobile and I was wondering if there's a way to add a lightbox method (when you tap on them it appears bigger) ? I really like the slideshow and wouldn't want to remove it... Thank you!
  17. Site URL: https://burgundy-jaguar-fltk.squarespace.com/1-lost Hello, My client sent me a mockup (first image attached "2-LOST complete.png") of how she wants the images to be displayed on the page, which we describe as a "cluster format". We were hoping to have a cluster format while also allowing visitors to click on an image and click through the rest of the images (the light box function in a slideshow gallery). I've attached a second image ("Screen Shot...") to explain what I mean by light box slideshow gallery function. Is it possible to have a custom format while retaining its slideshow capabilities and what would the code for this be? Thank you for your help! The password is: intheNYT Url: https://burgundy-jaguar-fltk.squarespace.com/1-lost
  18. Site URL: https://www.angeliquebrochery.com/shop HI, I find a code to change Lightbox in light overlay for my products, it works well, but I would love it to be a bit a more opaque. If anyone can help. the result https://www.angeliquebrochery.com/shop/test-1 What I would like/light lightbox a bit more opaque like here : see image attached
  19. Site URL: https://www.mesemestudio.com/alma-tl-semi-matted Hello All! I managed to use snippets of css code to create a centre aligned Lightbox form for the 'CLICK FOR PURCHASE' button, although now struggling to remove the Form Title and description from the post-submit pop up. Could you please help with this? Refer to the image here. Also how can I reduce the width of the Lightbox form from the current one? Thanks a lot!
  20. I would like to be able to zoom in on images on my website when they are open in the lightbox...I'd like to be able to zoom in either by scrolling or by clicking + /- buttons and then be able to pan around. I do not want a magnifier though. And I don't want to lose the ability of clicking the arrows on the sides to go to the next image. Is there a code I can add to make zooming in on an images in the lightbox possible? My website isn't published yet, so I can't provide a link... I don't understand coding at all, so I don't know how much information is needed, but my images are in a Summary block that displays a separate Gallery page (because that's the only way I could get everything to display the way I wanted). The page that the Summary block is on has slug /ryugu-jo and the Gallery page that the images are actually on has slug /ryugu-jogallery. But I open the images in the lightbox from the Summary block on the ryugu-jo page and that's where I want to zoom in on them...Hope that makes sense...
  21. Site URL: http://www.oxbowphoto.com Hi all, I was wondering if anyone could provide any suggestions for changing the size of images opened from a gallery into a lightbox. For some reason, when I click on images in a gallery on This page for example (scroll to the very bottom) they open in a lightbox and are far too small, and are not centered on the screen, even though the images are uploaded at the recommended 2500px . Does anyone know of a workaround in CSS or otherwise for this? Thanks so much for the help
  22. Site URL: https://www.pai.com/payroll-integration-test-page I've seen this question asked a few times, but I haven't been able to get any of the code that's been provided on the other forums to work on my site. I'm designing a page that lists a bunch of partners our clients could choose to work with and have added code that allows users to filter through the available options based on their needs. The page can be found here: https://www.pai.com/payroll-integration-test-page. I would like the captions for each partner's logo (their phone number & website URL) to appear underneath the logo in the lightbox when clicked without having to hover over the image to see the caption and without covering up a large portion of the logo. I'm not a coder (and our in-house developer is on medical leave), so I'm not sure if all the custom code I already have in the page header injection and sitewide header injection is interfering with this working. Any help would be appreciated!
  23. Site URL: http://www.xaviervoirol.ch Is there a way to change the display size of an image when it appears in the lightbox? When I click on a thumbnail, vertical images come with a size of 750 x 1125 px, but I would like them to be a bit bigger. At least a height of 2000 px or, even better, at full uploaded size (3000 x 4000 px). Actually, I need a hack to override the presence of the "?format=750w" taht appears at the end of the image URL.
  24. Site URL: https://chiton-mouse-ymtr.squarespace.com/artist-gallery/bernard-safran-e6zfe First of all, I did not design this website. Just trying to help clean it up. The person who created it used the blog to add artists as posts and not pages. They would like the background of the lightbox to be white not black. I know how to change this on a page under design and colors but not when it's on a post. I will need help with the background as well as the close and arrows. Can anyone help please? Thanks!
  • Create New...