[ANN] ScriptyLightbox

Freeway
1

I’ve been using the amazing Lightwindow 2.0 script in my hand-coded work for some time now. It’s an excellent Lightbox in the classic mold, but it can handle almost any format of content you can throw at it. Flash, QuickTime, Windows Media, regular old images, anything you can link to can be displayed in a nice, lazy-loading overlay window.

Today, I finally Action-ized it, and it’s ready for testing.

http://www.actionsforge.com/actions/view/153-scriptylightbox

Here’s a couple of different things you can do with it:

###Traditional Slide-sorter view

  1. Draw an HTML box large enough to hold all of your thumbnail images.
  2. Apply the ScriptyLightbox Action to the HTML box.
  3. Double-click into the box so you get a text cursor, and add an inline graphics box to hold your first thumbnail image. Set it to float left, add some right and bottom margin, import your first photo and resize it, and then apply the Graphic Link to File Action to it (linked to the full-size image or other resource).
  4. Now copy that thumbnail, double-click next to it in the HTML box (to get your text cursor) and paste as many times as you need to add your other images or files, and update the references.
  5. Publish, and click on one of your thumbnails to see the show.

###One-off view

  1. Draw a graphic box for your thumbnail, import the image.
  2. Apply the ScriptyLightbox Action to the graphic box, and also apply the Graphic Link to File Action to the same box. Set your link to the full size image.
  3. Publish.

You don’t need to use an image for your trigger, any sort of link will do. So you could use text links – maybe combine this with a list of links to sites to show a gallery of your work.

A few caveats: QuickTime seems a little flaky in Firefox 2 (or it might just be me). Testing is encouraged. PDFs are known to be bad news on all platforms – the developer recommends using FlashPaper instead. There are dozens of configuration options available in Lightwindow, but I haven’t exposed them in any way (yet). Have a look at the original site for some ideas: http://www.stickmanlabs.com/lightwindow

Hope you enjoy it.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Forgot to mention – besides the general loveliness of this script, it uses Prototype and Scriptaculous, so it won’t conflict with Freeway’s effects or anything Protaculous like that.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Just tested this and it works pretty well. A few issues with how the movie files are displayed in the lightbox (tried .swf and .mov), but amazingly easy.

Walter, you are the best!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Question.

If I want to use the same video in multiple pages in my site, is there a way to have the graphic link get it from a common folder on the server instead of it being attached to each page?

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Some more testing results with .swf and .mov files:

IE6: doesn’t work (surprise!). It loads the .swf file into the window. Not pretty when it get enlarged like that. The .mov file doesn’t do anything

Firefox 3 in Windows: lightbox shows up but video doesn’t play.

Firefox 3 & 2 in Mac OSX: audio only in light box

.mov file cuts the audio off about 2 seconds in on all tested browsers

If the entire world used Safari we’d have no problem with it. I’m sure Walter or another guru will get it to work.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

I’ve released a new version which works around these problems. The underlying cause is that the Lightwindow script needs to know what size to make its display area, but it can’t get that information from QuickTime or Flash until the movie is loaded – causing a Catch-22 situation. Because the way that Lightwindow attempts to work around this problem (adding a ‘params’ attribute to the link) is invalid code, I had to come at the problem sideways.

The Action palette now includes text fields for the height and width of any “media” elements (Flash, QuickTime, WMV, MP3) and also includes a checkbox to do the controller height math for you. If you have a collection of dissimilar movies, pick the largest one and set that dimension.

Important note – this Action, no matter how many times it is applied to the page – will only attach one copy of the script. So if you use more than one instance of the Action, be sure to set these dimensions the same in all of them. There’s no way to determine which one Freeway will attach to your page. The easiest way to do this is to set up one element, then duplicate it to create additional instances of the Action.

Try version 0.2 at ActionsForge, and there’s a demo up on my site: Untitled with some creaky-old photos of my daughters.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Found and fixed the IE problems, and version 0.2.1 works in IE6/XP. If anyone else can, please test in other flavors of that browser.

Thanks,

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

New version testing results:

IE6: Works
Safari3 OSX: Works
Firefox3 XP/OSX: Works
Firefox2 OSX: Audio only

I consider this more than acceptable.

Great job Walter.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Do you get audio-only if you set the lightbox a little larger than the video? Say, maybe 30px larger in each dimension?

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Walter I thought the balloon video was great!

Though I wonder if your daughter Ann looks at that now and wonders why ‘Mommy was toasting me over the candles’

The action is great too and I will have a play with it tonight.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Oh man, this is just one of the coolest things I’ve ever seen and so easy to implement. Walter, you’ve done it again, thanks for this!!

Though I’m a bit curious, I’m using it for a photo album and it seems to be acting strange in IE on both my and a friend’s computer (both XP/IE7). Instead of the image starting small and then growing bigger to load the image, it will start large and then shrink down to a tiny thumbnail.

At first I thought I’d done something wrong, but I tested it on Walter’s demo posted above and it did the same thing. I think I’m using the latest fixed version mentioned above (will have to double check when I get home). Anyone else encountering anything like this?

scott

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

I’ve seen this bug myself, and I’ve also seen a fix for it, but I
haven’t had time to add it to the code. There’s a problem with how the
scaling is figured. On IE, you don’t get to find out the “natural”
size of an image through JavaScript, so that calculation fails.

Walter

On Mar 31, 2009, at 4:19 PM, scottpie wrote:

At first I thought I’d done something wrong, but I tested it on
Walter’s demo posted above and it did the same thing. I think I’m
using the latest fixed version mentioned above (will have to double
check when I get home). Anyone else encountering anything like this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

i’m more than happy!! thank you so much Waltd!! ( btw, lovely daughters you got!)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Hi walter,

How can I add captions as per moo: slimbox ?

Actually it would be really nice if there was a fully featured (action) customizable slimbox/lightbox were the various elements could be controlled ie. background, colour, density, etc.

Great work though and will certainly be using it.

seoras

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Whatever you put in the Title property of your link to the image will
become its caption. That said, the current method for specifying these
links is through the Softpress Action “Graphic Link to File”, which
won’t let you add the title property. You can work around this by
using Upload Stuff to add the images to your Resources directory, then
manually creating the links to the full-size images like this:

In the Hyperlink dialog, External pane, URL field: Resources/book.jpg

In the Hyperlink dialog, External pane, Title field: This is the book

Now when you click on the thumbnail, you will see the title in the
upper-left corner of the screen, opposite the close link. The text in
that field may be styled by creating a style in the Edit Styles dialog
with the Tag field filled with

#lightwindow_title_bar_title

and the Name field blank. Any text properties you set for this style
will automagically be used by the page, you don’t have to apply this
style to anything.

One of the (many) things I have on the back burner is a proper
companion Action for uploading and linking images to be used in the
Lightbox. This will allow you to specify attributes such as the image
caption directly. I may also be able to get this to work around the
problem with IE and image sizes.

As to the other attributes, pretty much everything about this function
can be specified through parameters, but I haven’t spent the time to
add the interface for them. One reason is sloth. Another is a sense of
“less is more” (which is often just a rationalization for the first
reason).

Walter

On Apr 1, 2009, at 8:07 AM, seoras wrote:

Hi walter,

How can I add captions as per moo: slimbox ?

Actually it would be really nice if there was a fully featured
(action) customizable slimbox/lightbox were the various elements
could be controlled ie. background, colour, density, etc.

Great work though and will certainly be using it.

seoras

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

One reason is sloth.

Definitely something I wouldn’t level at you Walter ! Your considerable enterprise, effort and help is always appreciated.

Thanks for further details on this.

best,

seoras

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Just as an extension to styling the caption

#lightwindow_title_bar_title

Is there a corresponding tag to style the ‘close’ text -
I tried

#lightwindow_title_bar_close_link

But it didn’t work properly. I only got the size property.

I also found that if I applied a hyperlink to the graphic using the External pane and any made up file name then whatever I put in the Title box worked as a caption.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Eek. If you’re also using the Graphic Link to File Action (as
documented) then you’re going to end up with an A inside an A, and
that doesn’t sound like a very good idea.

Walter

On Apr 1, 2009, at 3:58 PM, DeltaDave wrote:

I also found that if I applied a hyperlink to the graphic using the
External pane and any made up file name then whatever I put in the
Title box worked as a caption.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Probably not but it did mean that I didn’t need to upload another file with another action - it is only a test page anyway and I was really just seeing what would work.

Not for a commercial application.

So what about

#lightwindow_title_bar_close_link

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

I’m not sure what’s happening there, but if you make a style called:

#lightwindow_title_bar_close_link

it should work. Can you post a link to a page where you aren’t seeing
the desired change?

Walter

On Apr 1, 2009, at 4:19 PM, DeltaDave wrote:

Probably not but it did mean that I didn’t need to upload another
file with another action - it is only a test page anyway and I was
really just seeing what would work.

Not for a commercial application.

So what about

#lightwindow_title_bar_close_link

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options