▼
Streaming live at 10am (PST)

Test Lightbox Beta

Community resources Webflow announcements
#1

Hey Webflowies (webflow homies) you can now test out the Beta version of the lightbox by typing the shortcut CTRL+E+L.

Structure:

|400xauto
ui-when-inside-of_ai____100___RGB_Preview_.png842×784 86 KB

NOTE: Don’t use on production sites

Instructions:

  1. Activate by typing Ctrl+E+L.

  2. Drag from library:

    |188xauto
    Webflow_-_Helix_and_Slack.png476×632 105 KB

  3. Drop into page:

    |345xauto
    Webflow_-_Helix.png1088×744 798 KB

  4. Structure: It’s pretty much a link block with an image.
    |237xauto

  5. Go to settings:
    |236xauto

  6. Upload images:

    |177xauto
    Webflow_-_Helix.png480×676 98.5 KB

  7. Replace thumbnail image.

  8. Click on Lightbox link in preview mode or published site. BLAM!

Webflow_-_Helix_and_Slack.png1000×557 459 KB

–

Let us know if you run into anything. Thanks for being a beta tester!

8 Likes
Adding a Lightbox
Poll: How should the Webflow Lightbox work?
#2

Nice. Will test it for sure :smiley: If any short documentation can be shared here please. Thanks.

#3

THAT WAS TOO EASY!!!

http://spaceshipspaceshipspaceship1.webflow.com/

dear webflow employees. i love you.

3 Likes
#4

Looks great guys and functions exactly as it should… but no surprise there!

One thing, the light box is a full take over, is there any way to:

  • change the opacity of the background
  • put some sort of div restriction on the images that are placed inside (other than making their h&w set)
  • Put anything else inside of the lightbox? (thinking upload form, login form, email signup, video, ect)

I’m sure you guys have thought of these things to, and we’re only looking at the first iteration here - just wanted to throw it out there. Otherwise no issues at all - works just as advertised.

Thanks!

JSB

#5

Great to see the progress. I think this is a great start! Looks like this was harder to implement then it would seem.

Questions / Comments:

  • One issue I’m seeing right off the bat is when you click on a thumbnail
    to show the lightbox, the page scrolls all the way back up to the top. The
    page should stay at its current position. When the page jumps like that it’s
    very disorienting - especially if the liightbox is initiated from a
    thumbnail at the bottom of a long page. See my example here: http://dayone-wip.webflow.com (Scroll down to the Valentine’s Day thumbnail)

  • Are you planning on giving us the ability to style the lightbox elements
    ourselves? Seems to me there should be an option similar to the Menu
    Widget that would let us “open LightBox” in order to style the components within.

(image from the menu widgets settings)

  • If no plans to allow us to style the elements inside the lightbox
    it would be nice to at least have a couple more controls in the lightbox’s
    Setting:
    • Background color and transparency
    • Arrow color and transparency
    • Caption font, font size, and font color
    • Ability to hide the thumbnails and/or use the circle or square indicators like in the slider widget.

(Of course if the previous point is implemented, then these settings would not be necessary.)

  • While i’m glad you started with Option 1 from the previous lightbox thread: Here being that this is my immediate need. Are you still planning on implementing Option 2?

#6

Hmm. That shouldn’t be happening. Is there something else that’s making it scroll up?

Are you planning on giving us the ability to style the lightbox elements
ourselves?

It was a tough choice, but we decided to release the first version of the lightbox with a standard look/feel because we’d be able to release it much faster. We do plan on making each lightbox instance editable (background fill color, arrow customization, caption text customization, and other things like animations).

Are you still planning on implementing Option 2?

Yeah we’re still planning on it.

@james said “Put anything else inside of the lightbox? (thinking upload form, login form, email signup, video, ect)”

I would consider that to be a different Modal Window widget, which will have different behaviors than the lightbox. The lightbox is reserved for showcasing media (images and videos, which are coming later).

Thanks for the feedback guys!

3 Likes
#7

After typing the Ctrl + E + L is not activated. Why?

#8

Can’t wait to test it, so pumped. Thanks a million to the whole Webflow team (:

1 Like
#9

It’s Control on mac and windows. While holding CTRL press E, unpress it, and then press L. Try to refresh your browser and see if it works after that.

#10

Nice kitty… :smiley

#11

Like it :wink: Not love, but like :slight_smile: I just need some more advanced stuff in here so I’m still forced to use my own scripts. But that’s a great news for some simplier stuff! :))

Well done Webflow Team :slight_smile:

1 Like
#12

Great start !! Thanks for all your Team’s efforts into this and making Webflow a “go to” for web design… Probably thinking of this already but how about:

  1. Being able to “caption” pics
  2. Being able to select more than 1 image at a time or an entire folder full of images

You guys really are great !! Keep up the good work…

#13

Very happy for what it is now. Will be happy with option 2 too when it comes too. I can’t help but calling the actual one a “gallery”, because that’s really what it is (and it’s great). Now if you want to have a grid of thumbs each showing a lightboxed bigger version of the image, it’s a bit fastidious to make, you need to handle your image versions by yourself.

This raise the question : What is Webflow supposed to do with image resources? I’m fine with Webflow not doing anything to optimize or manipulate my images resources. Because i’m skilled at it and prefer to do it myself, when I want it to be done. But for less skilled users, aren’t you tempted to put things in place for them, to create their thumbs on the fly, to optimize their images for them?

#14

Not that I can see. I’ve simplified it down to the very basics and the page still jumps to the top when the lightbox is activated.

Site Here:
http://dayone-wip.webflow.com

Public Link Here:
https://webflow.com/design/dayone-wip?preview=3a9276102c0680bc13baef982aa4ede2

#15

More Observations:

I’ve seen some strange behavior that I can’t yet seem to pinpoint the cause because it’s been very intermittent but has happened more than once.

  • BUG: On iPhone landscape, sometime the lightbox launches with the image showing small just above the thumbnails. (See screen capture)

  • BUG: I’ve had a couple times where in the design view i’m not able to scroll down to the yellow section that holds the thumbnail… seems to happen randomly when exiting out of preview mode. Clicking to site settings and back to design seems to restore functionality.

  • BUG/FEATURE?:I like how swiping works on mobile but it doesn’t seem to work on iPad. Which is OK i guess while not optimal - but the arrows don’t seem to show by default on iPad so it’s a little unnatural tying to figure out how to move to the next image.

  • FEATURE REQUEST: Would be nice if the images in the lightbox had “infinite scroll” rather than stoping on the last image. I guess i’m asking for an infinite scroll option in setting here.

  • QUESTION: is there any costum css code we can use to do some basic styling? i.e font size, font face, font color of caption area?

Links:
Test site:
http://dayone-wip.webflow.com

Public Link:
https://webflow.com/design/dayone-wip?preview=3a9276102c0680bc13baef982aa4ede2

#16

Hi, I’m on a PC and Ctrl + E + L doesn’t work. I Refreshed and quit the browser and restarted. Any suggestions?

#17

This widget is supreme. Seriously, who needs Balsamiq when you have this?

2 Likes
#18

Same here, I’m also on a PC. I’ve tried multiple times refreshing, logging in and out and it still doesn’t work. As soon I hit CTRL + E the cursor jumps to the browser URL field and populates it with a “?” then when I hit CTRL + L, it highlights the “?”.

#19

Update to this observation: The swiping does in fact work on iPad but you have to swipe really fast. nothing happens with a normal swipe speed (or at least what I consider normal;)). You have to swipe fairly quickly before anything happens.

#20

I figured out what is causing the issue with the page jumping to the top when clicking on a lightbox thumbnail.

If you have the body selector height set to 100% it will causes the issue. I’m using Method #2 as suggested by @thesergie in this thread here to make the hero section span the height of the browser window. Apparently this doesn’t play well with the lightbox widget.

Do you think this will be corrected or do I need to find another way to do this.

P.S i’ve given a lot of feedback but not getting much response. I hope the feedback is helping and the team is taking it all into account.

Thanks.