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
  • 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. Using brine template using a gallery block inside a page using grid design style. if you choose the lightbox option - it doesnt give option NOT to display a caption in the lightbox. i need captions to show under each image in the grid so i cant delete it to solve the lightbox caption problem. so i would like to either: a - not display the caption - or - b - be able to style the caption to match the site better. ive tried all kinds of code i found in this forum and it isnt working. hoping this can be done with custom css code? this is a 7.0 site. any help is appreciated! thanks!
  2. Hey all, does anyone know how to add a caption to an image so that it appears when you click on the image in lightbox. Basically, I want thumbnails but when you click on one it opens the lightbox (larger view) and has a caption to the side of the image. Thanks
  3. Site URL: https://endive-denim-89ds.squarespace.com/contact Hi all! 👋 After some intensive research on the forum and on the web, I am looking for a way to close the popup Lightbox form (when you select any of the "Pitch" "Ask" "Join" button...) by clicking outside the form (like, in the background for example). Right now, the Lightbox form can only be closed by clicking on the X button, but I notice that people always try first to click on the background (away from the Lightbox) to close it, and I'd love to make this available to them too. Would someone know how to do that? Thank you so much!
  4. Hi all, I am building a site and i not a coder, but i can follow instructions. Haha! I am trying to have a pop-up text box for a bio field. A button below a photo that says "More About Cam", which pops up a lightbox text when you click the button. I have been following this: https://www.spacetutorials.com/squarespace-lightbox/button I basically want to do this: https://ellipsis-partners.squarespace.com/leadership/ -- a button instead of the text to make the pop-up lightbox The button was created fine and it is sort of working, but the lightbox does not display the text when the button is clicked (attached). it only displays a blank white box. i see the same when i open the page incognito or on a different browser where i have not logged in. Any help is really appreciated!
  5. Site URL: https://www.stigfloberghagen.com/store/p/slow-autumn I have searched but not found the answer Is there a way to add lightbox to store items photos?
  6. Site URL: https://raccoon-salamander-dgyf.squarespace.com Hey y'all, so I have lightbox anything set up to display an image gallery when a user clicks an image on the Collections page (password for the site is highfashion, if you want to take a look. I need a way to integrate some kind of magnifying glass or an image zoom that follows the cursor within the lightbox, any ideas? Cheers! @tuanphan, any help? 🙏🏽
  7. Site URL: https://popmutations.com/past-artists Hey! I'm trying to add a lightbox for caption text when hovering over an image. The built-in option with Inline images looks a bit rubbish when there's more text than it can hold at a glance. A little stuck on how to make it work and help appreciated! Cheers! Chris
  8. Site URL: https://mayellre.squarespace.com/about Hello forum peeps ! Does anyone know of a way I can customize a gallery lightbox action using css (or any other way)? What I would like to happen is that when an image in the gallery is clicked, instead of showing that same photo in the lightbox, I'd like it to show a different photo. I've attached a screenshot for example. Note the text in the "new image" shown in the screenshot will be part of the image. Unless of course, you know how I can keep it live! 😄 the access password is: bennythejet
  9. Site URL: https://glockenspiel-lily-ypyr.squarespace.com/floor-plans-s-d Hello! I would like to have images in the simple slideshow enlarge when clicked or zoom in and move with the cursor when hovered over. Basically I want people to be able to see the details of each image (floor plans in this case). I'm a novice to coding, but I was able to find a basic code that makes the image enlarge when hovering. My issue with this is, you can't move around the image to see different parts of it while zoomed in. Any advice or work-around would be much appreciated! I've seen some people say that they uploaded each image to a page of their own, then used a link or code to have the image page open. If there's a way to do that without it opening a new page I'd be happy to try that.
  10. Site URL: https://bullfrog-shark-2tkh.squarespace.com Hello! I am wondering if it's possible to maintain the original image size when you click on a lightbox image. Currently, when I click on the images on desktop, it expands the image to nearly the width/height of my monitor, stretching out the image a lot and making it appear not clear/crisp. The images' original size is 960 x 540px but the default lightbox settings are stretching it to be much larger, which is not ideal. Squarespace Site: bullfrog-shark-2tkh.squarespace.com Pass: test2021 My current site (which I am trying to move over to Squarespace) is able to maintain the correct image dimensions but I am not at all coding savvy. See here for example of what result I would like to apply to my Squarespace site: http://amyle.ca Thank you in advance if you are able to help!
  11. Site URL: https://tarantula-porcupine-bkrr.squarespace.com/ Right now I'm using this code injection in the header: <link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/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.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link> And this code in the code block: <a href="#" data-featherlight="#popPK-service"> <h2> Population pharmacokinetics </h2> <p2> Any more info here</p2> </h2> <div style="display:none;"> <div id="popPK-service"> <h2 style="font-size:36px;"> Population Pharmacokinetics </h2> <p style="font-size:18px;"> • Derivation of pooled analysis-ready datasets and exploratory tabular and graphical analysis </p> </div> </div> However, only three of the five pop-ups work, with the remaining two opening a small, empty square. Is this a problem with the code injection? Any help would be greatly appreciated. Site: https://tarantula-porcupine-bkrr.squarespace.com/ Password is 1234 Thanks!
  12. Site URL: https://www.krystenjade.com.au/wren Is it possible to add a lightbox feature to this template for the Gallery Images? So on mobile, users can click on the images to open larger.
  13. Site URL: https://beginagainhypnotherapy.squarespace.com/ This is strange and not something I've encountered before. I've used the lightbox anything plugin from sqsp themes a number of time on different websites. It's a great plugin. So i've installed it on the latest website that i'm building and everything was working fine on the built-in domain; https://beginagainhypnotherapy.squarespace.com/ Password Peartree!23 However, after connecting a third party domain from uk2.net the plugin will not run on the primary domain https://beginagainhypnotherapy.co.uk/ The image attached is what can be seen in the dev tools console. Any ideas? i'm scratching my head!
  14. Hey guys- I can not seem to find where on squarespace you change the background colour of the quick view / product lightbox.. see image attached for reference. Am I daft? It must be somewhere... I found the way to change the transparency overlay in the colour pane to green but not the lightbox background. My background is currently red with white text... anyone out there able to assist? @tuanphan maybe? Thanks!
  15. I'd like to use the Lightbox Anything plugin to display some speaker bios, instead of having them click through to their individual pages. Is it possible to add the lightbox to a summary block, without having to replace all the source URLs individually for each post? Is it also possible to use the lightbox anything plugin for a URL such as /speakers/speaker-name? This doesn't seem to work for me. Thanks!
  16. Site URL: https://frog-antelope-dxpg.squarespace.com/config/ I only have a temporary site right now... I'm trying to see if I can get this set up as I need it before actually purchasing it. I'm very close, but can not seem to figure out how to get my image name appear under the image. I'll be honest, my son has set most of this up for me, but I've done some, AND I'm beyond new to this. Not really that "techy". Is this something easy that I'm just missing? I've read a little on this in the forums and help sections, but honestly, it's too technical for me. I need it dumbed down. LOL Thanks,
  17. I have worked thought a few CCS mods to get my gallery image block lightbox to look they way I want it to. I am having a problem getting the lightbox opacity to be 1 or full background with no opacity. Every time I inject a CCS mod the element z-index and opacity revert back to opacity:0.98 I have tried several variation but nothing works. Here is the latest CCS I injected. .yui3-lightboxoverlay-content .sqs-lightbox-overlay .sqs-lightbox-overlay-default.light.element { z-index: 10000000; opacity: 1; }
  18. Site URL: https://www.oxbowphoto.com/new-page Hi, I would like to show image captions only when I click an image and view it in the Lightbox. Right now, if I enable captions in the gallery settings it only shows descriptions below the image in gallery/grid view which isn't ideal. Does anyone know how to fix this with CSS? Any help is greatly appreciated.
  19. Site URL: https://www.petitjeanjewellery.ca/ Hi folks. First time poster. I'm new to CSS, HTML and JavaScript but have used custom code for this website. Working on this site: www.petitjeanjewellery.ca, password: julesjewels My question surrounds the shop page. The actual shopping experience takes place at a different URL, https://petitjean.jewelershowcase.com which, before you ask, I cannot modify at all. The squarespace shop page therefore is just a list of hyperlinks pointing to that other site. When clicking on a shop category, early test users are finding it confusing to be linked away from the 'squarespace' environment and into a new one, with the familiar layout and navigation bar suddenly gone and no way to get back. So I'd like to alert them any time they click on a link beginning with "https://petitjean.jewelershowcase.com". A shadowbox-type alert that says "We are about to launch our online shop in a new tab. Ok/Cancel/Learn More." I'll attach a mockup image. I'm reading about modals, but can't seem to make them work in squarespace. Nor do I know how to make them appear only when a hyperlink is clicked that begins with "https://petitjean.jewelershowcase.com". References: https://www.w3schools.com/howto/howto_css_modals.asp https://www.solodev.com/blog/web-design/how-to-make-an-external-link-pop-up-modal.stml Any ideas? I've already been down the embedded iframe road, and don't want to go that route. Thank you in advance!
  20. Site URL: https://flugelhorn-goldfish-3hfm.squarespace.com/ Hey there, I'm having a hard time trying to figure out why the standard lightbox on the Product Page is defaulted at an enormous size and I can't quite figure out how to target it to make it smaller. Has anyone else run into this problem or have any potential solutions? Additionally, if anyone has a fix on why the product status shows below and not on the product image, I'd love for a fix for that as well. Thanks in advance
  21. Site URL: https://www.angelamannofineart.com/endangered-species-collection Hi there, I am trying to get the captions on each image in this collection to generate when clicking on each individual image as well and generating the lightboxes which have their own URLs. I've tried a few codes I came across in various forums but nothing worked. Also, the images changes sizes in the grid view. Is there a way to resolve this and keep the consistent.
  22. Is there any way to show the description when I click on a photo? The description shows in the default mode (image A) and it disappears when I click on the photo (image B) * the gallery mode is Grid: Simple
  23. Site URL: http://stonewall-construction-inc.squarespace.com/multi-family-old Hey, I'm having trouble with the mobile arrows in the lightbox being centered on the images. I have added the code below to my css. The page to view is http://stonewall-construction-inc.squarespace.com/multi-family-old. Password is "jackson". Any help would be appreciated. Thanks! /* Show arrows on mobile */ @media screen and (max-width:640px) { .gallery-lightbox-controls { display: flex !important; } .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; } }
  24. Site URL: https://www.sammillington.com/ Hello, I have my captions enabled in my gallery but i'd also like to be able to add more information about the image by adding a description while the image is open in lightbox, is this possible? Thanks
  25. Site URL: https://www.gorgeousgelato.com/next-day-delivery/gelato-pint I have a test page www.gorgeousgelato.com/automatic-gallery-test where I was able to pull firestore.onSnapshot query results and display them in a real-time gallery of images with this code (which works as intended): // CREATE GALLERY <div id="coolGallery" class='flavorsOfTheDayGallery'></div> // FIND FLAVORS THAT ARE MARKED AVAILABLE let flavors = db.collection("flavorsOfTheDay").where("isAvailable", "==", true) .limit(16) // ORDER AVAILABLE FLAVORS ALPHABETICALLY AND BUILD EACH AN IMG TAG WITH SOURCE AND ALT TEXT portlandsFlavors.orderBy('flavorName') .onSnapshot((querySnapshot) => { coolGallery.innerHTML = ""; querySnapshot.forEach((doc) => { coolGallery.innerHTML += "<img class='flavorImage' src='"+doc.data().url+"' alt='"+doc.data().flavorName+"'>" console.log(doc.id, " => ", doc.data()); }); }) I have been trying to recreate this success for product select dropdowns '<select><option value="">"text"</option></select>' where each 'value' and 'text' would be equal to a flavorName derived from the firestore query (standard dropdown shown below). I can push the query results to the console.log only if I remove reference to 'selectDropdown.innerHTML' from the querySnapshot. The goal is to update the dropdowns above with live code from a firestore .onsnapshot query // Target select ID let selectDropdown = document.getElementById('select-yui_3_17_2_1_1588782094999_71107-field'); // Search for Portland's available flavors & limit to 16 let dropdownOptions = db.collection("flavorsOfTheDay").where("isAvailablePortland", "==", true) .limit(16) // ALPHABETIZE AVAILABLE FLAVORS let alpha = dropdownOptions.orderBy('flavorName') .onSnapshot((querySnapshot) => { selectDropdown.innerHTML = ""; // .innerHTML cannot read querySnapshot.forEach((doc) => { selectDropdown.innerHTML += "<option value='"+doc.data().flavorName+"'>'"+doc.data().flavorName+"'</option>" console.log(doc.id, " => ", doc.data().flavorName); }); }) The last thing to mention is that the lightbox modals (shown below) which hold the select dropdowns are not loaded into the DOM until product "Add to Cart" buttons are clicked. My attempts at using MutationObservers have been unsuccessful and I'm not certain I will be able to make changes even if the mutationObserver catches the addition of the lightbox-modal to DOM.
  • Create New...