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. 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!
  2. 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,
  3. 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!
  4. 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; }
  5. 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.
  6. 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!
  7. 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!
  8. 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!
  9. 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
  10. 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.
  11. 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
  12. 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; } }
  13. 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.
  14. 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!
  15. 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
  16. 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
  17. 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.
  18. Hi! I am using a Masonry Grid gallery, the caption feature is turned on, however when I'm on lightbox mode, the description doesn't appear. I would like the caption to only appear on lightbox, not in the grid. Is this possible?
  19. 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
  20. β€”Brine template I would like to know if it is possible to disable the Lightbox in a summary box (from a gallery) and, if possible, how to do it. I would like that for images that have no link indicated, there was no cursor mousehover nor Lightbox, while for images that have the link, there was the mouseover and the link working. Thanks for the help
  21. Site URL: https://planpals.co.uk/corporateevents Hi All, Looking for some code help. I would like to add a floating "Enquire" button on the bottom right of all pages of my site which opens a contact form in a lightbox on click. Looked around and tried a few options I've seen but couldn't get any solutions to work for some reason. Website: https://planpals.co.uk/corporateevents psw: Hann0v3r123* Thanks for any help! πŸ™‚ Catherine
  22. Site URL: https://www.erinncapko.com/ I'm trying to achieve the layout this girl has: https://www.irenafreitas.com/ where you have the hover overlay with the title of work, which is only in portfolio grid:overlay, but I want tit o be clickable and not lead to projects/more pictures, much like when you turn on Lightbox in Gallery, then click on a image then it brings up a bigger image then just click the prev/next arrows to sort through the images.
  23. Hi, I'm just wanting to see if it's possible to create a lightbox that automatically opens when the page loads instead of having to click on something. Essentially I want a promotional popup that is more customizable than Squarespace seems to allow which is why I was thinking to use a lightbox. Is that even possible? I have several different ideas for uses for this so it would be very handy. Thank you in advance if anyone has any ideas or suggestions. And if it's not possible, if anyone has any other ideas that would achieve something similar I'd be grateful to hear them. Thanks!
  24. Site URL: https://www.magnusriise.no/illustration Hi, I'm trying to change the color behind the picture/illustration when using a light box, in my gallery. It doesn't look good when you can see the other illustrations in the background. I found this code, that helped with the opacity: .yui3-lightbox2 .sqs-lightbox-overlay { opacity: 1 !important; } .gallery-lightbox-background { opacity: 1 !important; } It would look much better with solid white, so the white background in my illustration doesn't show. Anyone know what I can do?
  25. Hi, I have a series of images I want to display as big as possible when they go into lightbox mode. The problem is that lightbox has this black padding/margin that prevents the images from being brought right up to the edge of the browser window. Is there a custom code I can use to reduce that margin to get it as close to the edge of the browser as possible? I include a screenshot of one of my images in lightbox and the pink outline is how big I would like the image to be, magnified so that it comes very close to the edge of the browser. if this isn't possible then is it possible to somehow get the image to magnify all the way to 1:1 to act like a loupe so you can see all fine details of the image? Thanks for any help on this guys
  • Create New...