differentkennedy Posted June 16, 2020 Share 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! Link to comment
Beyondspace Posted June 16, 2020 Share Posted June 16, 2020 (edited) differentkennedy I wonder if this is what you are after: Edited June 16, 2020 by bangank36 change Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
differentkennedy Posted June 18, 2020 Author Share 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! Link to comment
Beyondspace Posted June 18, 2020 Share 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Beyondspace Posted June 18, 2020 Share Posted June 18, 2020 (edited) 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; } Edited June 19, 2020 by bangank36 change Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
differentkennedy Posted June 18, 2020 Author Share Posted June 18, 2020 (edited) @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!! Edited June 18, 2020 by differentkennedy Link to comment
Beyondspace Posted June 18, 2020 Share 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Beyondspace Posted June 18, 2020 Share 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
differentkennedy Posted June 19, 2020 Author Share Posted June 19, 2020 @bangank36 Still no lightbox unfortunately. Beyondspace 1 Link to comment
Solution Beyondspace Posted June 19, 2020 Solution Share 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 differentkennedy 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
differentkennedy Posted June 19, 2020 Author Share Posted June 19, 2020 (edited) @bangank36 That last one did it! Bumped to best answer - thanks so much for working with me on that! Appreciate it! Edited June 19, 2020 by differentkennedy Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment