Axure Photo/Video Lightbox (Fancybox)

[Paul]

This lightbox technique uses the new "Pin to Browser" feature as seen in 6.5, which keeps the lightbox centered no matter where you scroll.

One of our users, Ulrich, sent us this file to use as an example and it's awesome! The idea is that you create a dynamic panel which contains a grey background, with a lightbox ontop. You pin this whole dynamic panel to the browser, and when you want to show it, the lightbox is always centered.

EDIT: See Axure's new complete lightbox tutorial go to photo and video lightbox tutorial -AxTeam

See it live



Additionally, check out the "Better Defaults" widget library from our website http://www.axure.com/widgetlibraries there is a "Dialog - Lightbox" widget that you might be interested in checking out.

[klausmartin]

It seems this lightbox does not work properly in IE 8. Any workarounds?

Thanks, Klaus

[josh_db]

You actually don't need two different states to get the same effect. (see attachment)

Having a second state means you have to add some sort of action to it, such as hide or send to back. It's better just to hide the one state to keep everything simple.

The article mentioned above (photo and video lightbox tutorial) will actually give you the same result, you just have to remember:

In the Dynamic Panel Manager > select the background state > right click the lightbox dynamic panel in the working area > Edit Dynamic Panel > Pin to Browser.

In the Pin to Browser area you define where you want that dynamic panel to appear on the page. This is the same functionality as Page Align that appears in the Page Formatting panel. Typically you would set the Page Align and the Background dynamic panel the same. In my example I don't need to set the Background dynamic panel because it inherits the page formatting.

[philipweber]

This was really helpful. Much better than the silly method I came up with on my own. I'd love to see a future version of Axure where it doesn't take a hack like this to create modal overlays.

[gejoreni]

This would be a good opportunity to use Hiding panels on click away