Jump to content

Image blocks on a page with Gallery light box features

Recommended Posts

Does anyone know if there is a CSS code to enable a page of image blocks to have the "click to next image" function once an image is opened in its own LightBox? In essence giving a page of image blocks the same feature as a Gallery once an image is opened in a light box. The user clicks on an image - it opens in a lightnbox (which is easy to do), and now the user should be able to click to next image on the page and have it appear in the light box. Rather than close the image down, move to the next one and then click to view bigger and in isolation.

I find it so much easier and intuitive to arrange and curate a page of images by using single image blocks, but the light box function is basically useless because it only work for one image at a time, and the user has to close each image and move onto the next instead of simple clicking onto the next image on the page without leaving the Light Box view.

Galleries are very clunky to curate and  the design features are so limiting. 

many thanks,

Damon

Link to comment

Hi, is this what you are looking for?

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Thanks for the quote @melody495!

@DamonCameron if you send me your site url with all enabled image lightboxes, I can send a dedícted playground url so you can test it on your site 

See client site with feature enabled https://demoarch.com/projects-demo/olivepassivehouse

Edited by Beyondspace

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
1 hour ago, DamonCameron said:

Thanks @melody495.

And thanks @Beyondspace. Yes it appears thats exactly what Im after.

URL:  https://www.photosbydamon.com/

Thanks,

Damon

 Hi @DamonCameron please check the recording for your homepage and gallery page where individual image blocks are connected into the single lightbox gallery

You can test the playground here https://beyondspace-showcase.squarespace.com/lightbox-studio?noredirect&websiteUrl=www.photosbydamon.com

Note: I just noticed the Playground has a problem displaying the connected Lightbox (I'm working on it), but rest assured it will work correctly on your page per the recordings

Edited by Beyondspace

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
48 minutes ago, DamonCameron said:

@Beyondspace the recording look good. But the test link doesn't seem to work as per your note. So how does it work? is it code?

 

@DamonCameron it is just the problem of the playground, the plugin is working just fine, now you can check the test URL again

By default the settings is not enable, please follow this to enable the feature for testing

 

SCR-20231116-jub.png

Edited by Beyondspace

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
25 minutes ago, DamonCameron said:

@Beyondspace my site is not loading. Spinning black circle in middle...tried refreshing... 

hmm, looks like the cache has messed up the site, please retry now, I just tested it on separate PC

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 months later...
On 11/17/2023 at 4:50 AM, DamonCameron said:

@Beyondspace Ok. Looks good, thanks. Lightbox Studio Playground 👍🏼

Will look at purchasing the plugin. Thanks 

In the last update, lightboxes now can be group from all lightboxes in the page, check the detail

 

connect lightbox page (1).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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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