Streaming live at 10am (PST)

Add Lightbox Function

I’ve seen a webflow site designs with this: http://www.frescojs.com/

It’s ideal for what I need and I’d imagine many more but I haven’t a clue how to implement it into my site!

Any ideas?

Wow Sergie, so there will eventually be a way to keep all my assets organized and drag and drop them where I please? Now that is a squarespace killer. I keep ending up on their site because I am drawn to the ease of drag and drop image management for galleries and such. But they don’t offer much in the way of building a custom site let alone export without wordpress. If you guys get this out I’ll be ecstatic! Any idea how long it might be? I am trying to decide when to pull the trigger on my pro plan. Also, if you need testers, I am available.

Yep Dave that’s the idea! We’ll most likely be working on these features after our next big feature release. So hang tight!

@Harry_Hammond I tried to implement Fresco in Webflow, but it’s not working because Webflow doesn’t store images locally with the css/html files. It stores images on a CDN which makes them load faster. Because of this you can’t link to an image locally the way Fresco wants you to. We’ll be working on Lightbox soon.

2 Likes

As far as Fresco, if you were using an exported version with the images contained in the images folder it would probably work right? You are referring to hosting on webflow where the images are stored on a CDN right?

And I can’t wait to see what you guys come up with. Any timeline? Within the next month or 2 I hope.

Yeah Dave Fresco should work when exported if the images are contained in a local folder. As far as timeline yeah we’re shooting for release within next two months for sure!

1 Like

I moved a post to a new topic: Next feature release?

1 Like

Yes, please keep us posted on the Lightbox progress, - it’s so desperately needed!

Yes please! Loving webflow and feeling very empowered. A lightbox and custom tool-tip function would be amazing.

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

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

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/

Yup these are things we’re planning on implementing.

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

@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

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:

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

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:

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

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?