differentkennedy Posted June 16, 2020 Posted June 16, 2020 Site URL: http://www.differentkennedy.com While I'm aware of squarespace's inherent gallery block customization features, I'm not seeing an option to customize the thumbnail display of items in a gallery block. My goal would be to have a gallery block of thumbnails [bottom right in the attached image -- trying to set up a template I can copy for "sub galleries" within an index gallery] but have them display as numbers but still click through to that respective image and a lightbox display of the gallery. My initial thought was to have this as two seperate images, one the "thumbnail" of the number, and one the intended image; however, I'm not seeing an option for dictating the thumbnail, or even a custom thumb display if I were to include the number within the lightbox image. Looking for solutions that could achieve this effect, whether it be through CSS, different blocking etc. if this is possible. Any help would be much appreciated!
Beyondspace Posted June 16, 2020 Posted June 16, 2020 differentkennedy I wonder if this is what you are after: BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
differentkennedy Posted June 18, 2020 Author Posted June 18, 2020 @bangank36 This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much!
Beyondspace Posted June 18, 2020 Posted June 18, 2020 12 minutes ago, differentkennedy said: @bangank36 This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much! sure let me send you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Beyondspace Posted June 18, 2020 Posted June 18, 2020 Here we go, paste this Design->Custom CSS #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid { /* Set "design-grid-counter" to 0 */ counter-reset: design-grid-counter; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after { background: #9E9E9E; z-index: 998; content: " "; width: 100%; height: 100%; left: 0; top: 0; position: absolute; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before { /* Increase "design-grid-counter" by 1 */ counter-increment: design-grid-counter; content: "0" counter(design-grid-counter); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #9E9E9E; z-index: 999; color: #fff; font-size: 3em; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before, #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after { opacity: 0; cursor: pointer; z-index: -999; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
differentkennedy Posted June 18, 2020 Author Posted June 18, 2020 @bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options? Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!!
Beyondspace Posted June 18, 2020 Posted June 18, 2020 3 hours ago, differentkennedy said: @bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options? Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! Noticed the issue, will update BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Beyondspace Posted June 18, 2020 Posted June 18, 2020 3 hours ago, differentkennedy said: @bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options? Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! I just update the accepted answer content, pls have a look BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
differentkennedy Posted June 19, 2020 Author Posted June 19, 2020 @bangank36 Still no lightbox unfortunately.
Beyondspace Posted June 19, 2020 Posted June 19, 2020 6 minutes ago, differentkennedy said: @bangank36 Still no lightbox unfortunately. #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid { /* Set "design-grid-counter" to 0 */ counter-reset: design-grid-counter; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after { background: #9E9E9E; z-index: 998; content: " "; width: 100%; height: 100%; left: 0; top: 0; position: absolute; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before { /* Increase "design-grid-counter" by 1 */ counter-increment: design-grid-counter; content: "0" counter(design-grid-counter); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #9E9E9E; z-index: 999; color: #fff; font-size: 3em; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before, #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after { opacity: 0; cursor: pointer; z-index: -999; } My bad, pls take this http://recordit.co/Ywd7XDS9EX BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
differentkennedy Posted June 19, 2020 Author Posted June 19, 2020 @bangank36 That last one did it! Bumped to best answer - thanks so much for working with me on that! Appreciate it!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.