Jump to content

Pop-up Video from clicking on a thumbnail in a photo gallery

Recommended Posts

Posted

Site URL: https://www.nickpagephotography.com/landscapes

I like the way Nick Page has used Squarespace to produce this page: https://www.nickpagephotography.com/landscapes It`s a wall of photo thumbnails which I find really artistic. But it`s just a still photo gallery. Do you think Squarespace or perhaps a plug-in within Squarespace could be used to do the same for video ie produce a pop-up video (Vimeo) upon clicking on an image in a "wall of images"? Most embedded videos are obviously video links with a play button. But I like the clean look of a pure image thumbnail. Perhaps the play button could only be made to appear when scrolling over the image?
Thanks.
Ian

  • Replies 7
  • Views 2k
  • Created
  • Last Reply
Posted
3 hours ago, Swarbrick said:

Site URL: https://www.nickpagephotography.com/landscapes

I like the way Nick Page has used Squarespace to produce this page: https://www.nickpagephotography.com/landscapes It`s a wall of photo thumbnails which I find really artistic. But it`s just a still photo gallery. Do you think Squarespace or perhaps a plug-in within Squarespace could be used to do the same for video ie produce a pop-up video (Vimeo) upon clicking on an image in a "wall of images"? Most embedded videos are obviously video links with a play button. But I like the clean look of a pure image thumbnail. Perhaps the play button could only be made to appear when scrolling over the image?
Thanks.
Ian

are you on squarespace 7.0 or 7.1 template

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

Posted

Neither I`m enquiring at the pre-purchase stage.

Posted

There is this also, one of Paul's responses .

You may want to retain the play button but move it above the titles so that visitors realise a video will play. To do this, add the following to Design > Custom CSS:

.collection-type-gallery .video-play-icon {
  bottom: 33%;
}

play-icon.png.a7b003e0cfa7423c9bd75a45e9d5304c.png

 

If you prefer to remove the icon, use this instead:

.collection-type-gallery .video-play-icon {
  display: none;
}
  • 2 weeks later...
Posted

I am trying to achieve exactly what was described in the initial comment in 7.1 and was unable to even figure out the lightbox option in the gallery blocks in 7.1.  Can you describe in more detail how this can be achieved?

Posted
On 2/9/2021 at 10:09 PM, myburket said:

I am trying to achieve exactly what was described in the initial comment in 7.1 and was unable to even figure out the lightbox option in the gallery blocks in 7.1.  Can you describe in more detail how this can be achieved?

Hi. You want

Clicking on Gallery Item >> Lightbox will appear?

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!)

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.