Jump to content

Gallery Block Custom Thumbnails

Recommended Posts

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! 

Screen Shot 2020-06-16 at 7.32.57 AM.png

Link to comment
  • Replies 10
  • Views 926
  • Created
  • Last Reply

differentkennedy

I wonder if this is what you are after: 

image.thumb.png.c034293d60f4bf3f2f3ed658d907c841.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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;
}

image.thumb.png.f512928c04fbeccfffd53487890d37c1.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.