Add Lightbox Function

Community resources Product feedback
23

Hey guys we’ve started work on a native Webflow Lightbox. We’re hoping to have it ready by the end of the month. We’ll keep you posted.

5 Likes
24

Thanks Sergie! The is excellent news! This is the one feature i’m dying for to complete my site. I’ve been struggling with a way to show lots of work in a portfolio site, and jumping to a new page each time just isn’t cutting it – or at least i’m having trouble finding a way to make it elegant with my “one page” site design.

Can I ask that the new lightbox feature you’re implementing NOT load in all the lightbox images when the page loads but wait to load them when a thumbnail is clicked. (Muse does this and it’s a total show stopper for sites with large galleries)

Also, I’m hoping that the feature will allow for clicking a single thumbnail image to show multiple images in a slideshow. For example, say I have a page with 20 thumbnails images. Each thumbnail image when clicked will show it’s own set of images in a lightbox gallery in a slideshow fashion.

I can’t wait to take this feature for a spin.

Loving Webflow by the way!

Bryan

25

I’ve found lightboxes to be tricky responsively in the past, they never really user tested very well. Though from a quick scout around, I see that there are now quite a few responsive options which seem to have improved things:

http://webdesignandsuch.com/responsive-image-lightboxes-websites/

26

Yup these are things we’re planning on implementing.

27

Hello! For some reason it is impossible to me, you don’t look?
https://preview.webflow.com/preview/videobg1?preview=7e8b7f9804089ba1525da1fcb24649ae

29

@John_Swanson, It isn’t necessary to add lightbox using an embed anymore. Webflow has a built in widget with many options:

Tutorial video:

You can build a lightbox gallery of grouped images that launch from a single image thumbnail
-or-
build an array of individual lightbox instances that all point to a group gallery.
-or-
individual thumbs with single full size images.

and the lightbox also supports video.

1 Like
30

I’m in need of the lightbox / shadowbox and I’m very excited to see what you have to offer. A lightbox / shadowbox that has a separate area for text would also be greatly appreciated.

Here is what I’m trying to do:

1958×1250 135 KB

Also, willing to test it out. Keep up the good work!

31

Hi @Frank_Tran, thanks for your post :slight_smile:

The built in lightbox is (for the moment) only for images and videos (youtube and vimeo). You could create a custom lightbox using our example from the Demokit:

Page: Custom Lightbox
Folder: Interactive Elements
Read-only link: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb

See if that helps, if not, then let us know and we can take a look further. Cheers, Dave :slight_smile:

32

-EDIT-
Alright! So I have figured it out!

Where I resolved my problem: the group naming actually does work.
Where the instructions were unclear:

  • When you click “Link other lightboxes,” you must give it a group name–otherwise Webflow will automatically uncheck the “Link other lightboxes” box.
  • The group name must be the same, make a single typo and it will not link. Webflow will assume it is a different group; I made a typo.
  • You MUST add the same image as the one you uploaded. You only need to add the image of the thing you are uploading. You don’t need to reattach all the images. Adding a caption to the image is optional.

An example of how to do this: Picture 1 is a duck. Picture 2 is a can opener. Picture 3 is a whistle.

  1. Add a lightbox widget.
  2. Upload duck picture. Click add media and add the duck picture (caption optional)
  3. Check box “Link with other lightboxes” and give it a groupname: LIGHTBOXTEST
  4. Add another lightbox widget
  5. Upload can opener picture. Click add media and add the can opener picture (caption optional)
  6. Check box “Link with other lightboxes” and name it the same: LIGHTBOXTEST
  7. Add yet another lightbox widget
  8. Upload the whistle picture. Click add media and add the whistle picture (caption optional)
  9. Check box “Link with other lightboxes” and name it the same: LIGHTBOXTEST
  10. Test it out. It SHOULD work.

Things I still wish were there without me having to figure it out:

  • Numbered slides
  • Slide x of n. Something that told people visiting my website how many slides they are to expect.

-EDIT END-

Alright. So I’ve played with Lightbox a little bit. The demo was a bit confusing to me, I’m not sure what I was supposed to be looking for or at.

The video you sent was moderately helpful, but the MOST important piece of information, which I’m sure most would agree, comes at the end of the video. Unfortunately, the end of the video does not explain how I am to set up multiple “linked” lightboxes.

Here is what I did:

  1. Insert Lightbox
  2. Inserted Media A
  3. Inserted Media B & C (under settings)
  4. Clicked on “Link with other lightboxes” made a group name.

Here’s where I’m a bit confused.

  • Group name seemed to do nothing
  • ID for linking at the top of the SETTINGS menu doesn’t allow me to link elements
  • Unsure if I have to reattach all the images on the next light box
  • If I were to do the above mentioned attaching, the second image would be redundant.
  • I want the image selected to pick up where it last left off (x of n images)

In short. HOW DO I LINK MULTIPLE LIGHTBOXES LIKE THAT END OF THE VIDEO? SHOW ME, PLEASE!

33

Hi guys,

Was wondering if there’s any way to make vertical images shown in the lightbox to be scrollable (as apposed to ‘scale to fit height’)?

Besides my specific situation I can imagine this being a scenario which most apparel webshops have when enlarging their vertical clothing images with Webflow?