Jump to content

Code or Extension to achieve custom lightbox pop-up?

Recommended Posts

I am building a site for a client who has asked for lightbox functionality on clicking on a gallery image.

I have created a block with 3 x Gallery images (see attached). Each image has the title/ description displayed below. The client would like to be able to click an image to open a lightbox or overlay where we can have additional content on each tour (ie. Beach Run). Additional content would be, for example, header, paragraph text, image, bulletpoint list, etc.

I am interested in understanding the best way to achieve this as the client doesn't want to open up a page in a new tab to take customers away from the original tour page.

Is this something that can be done with native Squarespace functionality (I don't think so)? Or an extension/ plug in? Or would it be custom code?

Any help gratefully received. 

Screenshot 2024-02-16 142502.png

Edited by scottotm
forgot attachment
Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can use a Lightbox Plugin (affiliate link) or this link (non-affiliate link) to achieve this

I created a quick demo for you here: https://tuanphan.squarespace.com/hover-text-show-lightbox-1?noredirect (use Image Block)

or https://tuanphan.squarespace.com/gallery-page-with-lightbox-1?noredirect (use Gallery Section)

password: abc

You can enable Lightbox appears by Hover or Click.

You can use Lightbox with any blocks (Gallery Block, Gallery Section, Carousel, Text Block, Image Block, Video Block, Code Block, Button Blocks, Navigation Items, Header Buttons..)

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.