Jump to content

Search the Community

Showing results for tags 'lightbox'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. if you click on portfolio > portrait, you see the caption under the images on the grid:masonry, I would like the caption to show in the lightbox on a hover. Just like the current site:https://www.kentin.net/portret-portfolio
  2. 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!
  3. Got lightbox anything plugin and works well with CSS but not for javascript. When I press on link on live site the lightbox appears but nothing is in the box. I have also tried a external URl and same thing happens there. Please help! I put an example on website below: www.elevatesportsventures.com/f1-java
  4. Hi, I've created a lightbox contact form in the 'additional info' section of my product but I want that to be in the 'product description' area just below the text. I've been messing about with it but can't seem to get it to work. Any help would be greatly appreciated!!
  5. Hi, I'm new here. I have 3 questions: 1) I'm wondering how to customize the lightbox on this website with code? I want the background to be solid white and for the description to show below the image. Also for the image to be larger. Is there any way to have a title and a description, or only description? The lightbox here is great but I don't have any idea how to do it: https://www.lucasmasch.com/ 2) How do I get the dropdown links under 'work' to align the other way? The menu is too wide and the links align right instead of left. 3) The margin between the menu and content on the 'Shop' page is enormous. I don't see any function to make it less so I guess I have to do it with code, but don't know how. Website: https://cod-giraffe-b6w7.squarespace.com/ Haven't published the site yet so the password is 'sunflower'. Thank you for your help!!!
  6. Site URL: https://www.sarahbergeronartist.com/paintings I am using the masonry gallery on a number of pages on my website https://www.sarahbergeronartist.com/paintings. I would like to find a way to have all image captions show up ONLY in lightbox - centered under the image - and not show the captions in the gallery view. I'm using version 7.1 and I have the most basic squarespace plan, if that is relevant. Can someone help me do this?
  7. 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!
  8. Site URL: https://joel-amit.com/works Hi I have a portfolio website in which one of the pages has all my works in a gallery (masonry) type, it already has a lightbox pop up when images are clicked. Is there a way of adding a button to the lightbox view only so when pressed it can show a form (inquiry about the specific work/image)? Thanks
  9. Site URL: https://seal-reindeer-3la9.squarespace.com/contact Hello! For layout purposes, I chose to hide the captions "First name" and "Last name" on the lightbox form. Since I hid those, I would like to add placeholder texts for those fields as "First" and "Last" respectively. Would this be with jQuery? I attempted and failed because I could not figure out how to target these fields... Any advice would be much appreciated. Thank you so much for your time! pw: sqspcontacttest
  10. Hi all, My website has a product where we require the customer to fill out a custom form in order to complete the purchase. For some reason, the form I created will not scroll down when opened. https://www.sdfsa.org/store/resource-organizing-workshop Click on 'register' If you place your cursor in any of the visible fields within the form, you can move through the fields/questions by hitting 'tab' Is it due to the code I've added into the code injection and CSS areas? Or is there code that I can add to my website to ensure that this form scrolls down? Or code that can open the form in a new page rather than a lightbox? Please help, I really need this to work. Thank you.
  11. Hi All, I am creating a new personal site, and am wanting to keep it very clean and simplistic. I create videos, and currently on my homepage I have a Slideshow Reel Gallery, displaying frame from my individual projects. I want users to be able to click on these images and a lightbox pop up of the video itself. Seemingly the only option is to turn this image into a link to another page. Is there anyway of being able to achieve this in square space? Upon research it is possible with the use of paid plugins, but surely there is a way to achieve this without having to do say? Any pointers in the right direction are greatly appreciated. Thanks, Patrick
  12. Replace your Squarespace lightbox with gallery that allow pinch-to-zoom and support wheel zoom on desktop - Support Squarespace lightboxes image, gallery section, gallery block, and product page gallery - Can link the images blocks in the same section (useful for the custom image grid feature) - Allow download button to download the image to user machine (on iOS new page will open with the image for non-Safari browser) - Compatible with 7.1, 7.0 (Brine) Lightbox Gallery for Squarespace Created with ❤️ Ngan Le BeyondspaceStudio Squarespace Circle Member
  13. Site URL: https://www.americanpacificgroup.com/experience-test Hi there! I'm updating the portfolio page for my client's Brine 7.0 site. I'm used to designing in 7.1, so I'm not as familiar with the design capabilities of this template. I would like it so that when a visitor clicks on one of the logo images, a lightbox opens up with more details about the specific project. (Like this site here has done: https://long-ridge.com/portfolio/ I've also attached a screenshot) I see there is a way to link to a new page within the grid gallery block editor; however, my client doesn't want visitors to be taken to a new page. Any advice on how I can achieve this? Here's the page I'm trying to update: https://www.americanpacificgroup.com/experience-test
  14. I have a gallery grid with images (of artwork). I have it set to pop-up with enlarged images in a lightbox, and display the captions on hover. This is fine on desktop, but on mobile devices the captions do not display unless you tap a tiny dot in the lower right hand corner. Absolutely no one sees this, so mobile visitors to my site always think there is no caption information given. A fine solution would be to simply have the captions below the enlarged lightbox images, and always show up (no hover). This seems like a really, really basic format, but it seems that this is simply not an option on Squarespace, which is baffling to me. Are there any workarounds for this? Having a simple grid of images where you click an image and get a bigger image with a caption below it really seems like something that should be possible.
  15. Site URL: http://www.devinehealings.com Hello, So I have a Lightbox form on my home page (4th section) that is completely fine on desktop, however the scrolling is totally messed up on mobile. It seems to look fine upon the initial opening of the form, but once a field is selected, my phone zooms in automatically (which I have found out is due to the font-size and I wouldn't mind that happening if it wouldn't break the form). The display of the form in a zoomed in state seems to be fixed, as the lowest text field won't show even if selected. And when trying to scroll down it only scrolls the main page beneath the actual Lightbox form. I have tried changing the display, position and overflow-y properties but nothing has worked. I also checked and none of the custom CSS used says anything about how the position or display has to react, yet it seems to be fixed. I also removed all my Custom CSS to see if any of the code is causing the issue but it remains regardless. Please does somebody know how to fix this? I would highly appreciate your help! Password to the site is devinehealing Thank you
  16. I have purchased and installed Lightbox Anything plugin for adding Lightbox to the Portfolio Hover layout on the website. It works fine overall but there is a huge issue with the section margins. For some reason, Lighbox adds margins in between sections even if there weren't any on the original page which is redirected to the lightbox. I have contacted the creators of the plugin but it seems like they don't get the problem... Here are screenshots of the original page and its formatting and the lightbox version. On the mobile version the upper title in Lightbox also gets a margin between the video. Is there a way to code inject something inside the Lightbox plugin? I saw such an option in the manual but don't know how this command should be formulated. My website is: https://gardenia-copper-8dp3.squarespace.com/ Pass: LightboxAnything Thank you.
  17. I am hoping someone can help me! I am getting tired of using accordions for extra information so I am looking for relatively easy coding to create popup/lightbox text when someone clicks underlined text or even an image. I want to use this on my "MEET THE TEAM" page. Looking for any and all suggestions on how to accomplish this.
  18. 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; }
  19. 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
  20. Hello, Wondering if there is a way to add left and right arrows on lightbox mode (without a gallery mode) , so when people click on one image they can keep clicking through them all and not have to constantly click out of them to go to the next. Currently have my pages set up where the images on a blank page and added in the images in inline setting (looks better than the grid masonry, which is the look I'm to achieve, just too big.) (example below) Thank you!
  21. Hi, Is there a code to show a simple Lightbox popup that would look like the Squarespace form? I would like to include a piece of html code in this Lightbox, showing some text and a form field without any submit button. I find expansive plugins doing stuff I don't need or the jQuery Lightbox plugin. But is it possible to replicate the Form Lightbox with a simple code and without calling JS from other sources? Many thanks
  22. Hello and happy new year to everybody! I have a problem with my products page, i made the product photos clickable so they can open in lightbox but the size of the lightbox images is too small, is there a way to make them bigger when in lightbox or even clickable when in lightbox to zoom in? Thanks in advance!
  23. Site URL: https://jonathan-gaber.squarespace.com/work/bricks I was following this topic from a previous post but it seems my request for help got lost. As so many others, I am looking for a solution to show a caption in lightbox. The code below works but looks awful as it sits oddly on the art work. The other part of this is that I have added code to the caption to control bold and line breaks specific to art. If anyone can help I would be grateful and if anyone knows how to request this be added to 7.1 even better. Thank you! ------ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .35em text-align: center; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style>
  24. Hello, When images are opened in lightbox, by pressing the arrow key with the mouse and then using the keyboard arrows to move images, an outline appears around the "next arrow" in lightbox. Similarly, immediately after opening lightbox, if you use the keyboard arrow key to move to next image, an outline appears around the "x" (exit button). Is there a way to remove these distracting oulines? Thank you!
  25. Hello There! I have a gallery of images that I've added captions to, however, I want the captions to only appear in the light box view, not under the photos in the gallery grid view. I have tried some custom code with no luck. If anyone has a solution I would love some help! Thank you so much. Please see photos attached for reference.
  • 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.