what do you expect / look for in a lightbox clone?

I have just written a small class for lightboxing called largerBox (in js + mootools 1.2)

http://fragged.org/dev/largerBox.php -> still very much work in progress but its just 4-5 hrs of coding thus far.

the idea was to get the effects from opening a movie trailer box that apple do, eg http://www.apple.com/trailers/independent/nightsandweekends/

anyway. its fairly customisable and yet very straightforward to do, it will be fully self-contained, including images and css, all built from javascript, so just framework and class and bombs away...

w/o going over the top, what features do you expect when using a lightbox clone? keep in mind, this is about images, the ones that do modal popout and load content via iframes etc - not what this is for.

thanks for any ideas, feedback or issues you may discover.

 

I run it on my home computer (1.2gHz with 256mb of ram), under IE6, while watching my black and white t.v. And it crashed the browser twice and then kind of worked... barely. But then it worked well enough in FF on the same computer. But I have still never had that happen with any website before... so I think that IE6 may have some issues with it.

 

heh, yes. IE6 works fine in principle. but i just did a little experiment where my image data was embedded as base64 data into the js file that injects it into the head. regretfully, IE6 does not support this... so i will need to think of some degradation techniques.

wanted to package all css and image data into the same js file... such shame

embeddedStyles: [
        ".overflowHidden { overflow: hidden; }",
        "#arrowLeft {float:left;width:34px;height:100%;background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;}",
        "#arrowRight {float:right;width:34px;height:100%;background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpwABCBxIsODAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7LhSAAORGiCJHljQZMqVBkixbuiQIkyXKmQVrmryJc6BOkDx7Avh5UijNlTsLxlzK1CbBplCb3oxKNSbKqlg3FhCYFetWrl2jfjV6IOZYoWVZnu2Z1uRanG1Bvp1pwKxRgQXs3s2r9i4Avm79EtDrN26CuULrVkRsNC/ju0H99gwIADs%3D) no-repeat center center;}",
        "#boxClose {position:absolute;width:32px;height:32px;background:url(data:image/png;base64,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) no-repeat center center}"
    ]

PHP:

 

Well I normally code by the principle that if you don't have the latest (or at least fairly new) browser then it's your own problem. I normally only test in IE7+ and FF3+. That covers the majority of users and I have no time for Opera or Mac(Safari) users... and does Netscape still even exist? I hate macs.

 

totally agree. this works fine in ie7, ie8(probably when i do compat mode), FF 3.12, 3.5, chrome, opera 10, safari 4. i really don't care if it breaks somewhat in IE6 but it's an easy fix to have a fallback anyway.