Yet another lightbox clone: anabox (please test)

[Thomas Mayer]

Hello,

there are many lightbox clones out there, but most need an AJAX
framework to work, yet many people do not want to do other AJAX stuff,
therefore much bandwidth is wasted for a cool gallery script.

This has made me completely rewrite the ligthbox script (minus effects)
to a simple pure JavaScript version, and the non-compressed, human
readable version including full license et al. uses ca. 11kB. I plan to
make a compressed version of the script sometime soon to save another
shipload of bandwidth.

The script is call _anabox_ (another box, anorexic box, anabox's not
another box, [insert acronym here]).

The script will be released under an MIT style license, the code is IMHO
well documented, so please give feedback, especially about browser
support, as I have only tested it with Iceweasel 3.0.6 (= Firefox for
Debian) and Opera 9.63 for Linux, so please test with other browsers.

So, here is the first anabox demo page:
http://www.residuum.org/anabox.htm

cu Thomas

 

[Gregor Kofler]

Thomas Mayer meinte:

Hello,

there are many lightbox clones out there, but most need an AJAX
framework to work, yet many people do not want to do other AJAX stuff,
therefore much bandwidth is wasted for a cool gallery script.

This has made me completely rewrite the ligthbox script (minus effects)
to a simple pure JavaScript version, and the non-compressed, human
readable version including full license et al. uses ca. 11kB. I plan to
make a compressed version of the script sometime soon to save another
shipload of bandwidth.

The script is call _anabox_ (another box, anorexic box, anabox's not
another box, [insert acronym here]).

The script will be released under an MIT style license, the code is IMHO
well documented, so please give feedback, especially about browser
support, as I have only tested it with Iceweasel 3.0.6 (= Firefox for
Debian) and Opera 9.63 for Linux, so please test with other browsers.

So, here is the first anabox demo page:
http://www.residuum.org/anabox.htm

Some points:
* reuse references; 10 gEBI() for the same element are hard to read an
inefficient.
* Number + String gives String. No need for toString()
* forget about setAttribute(), particularly with event handler attributes
* most of the time you go with appendChild(), then one some occassions
with innerHTML. Why the latter one?
* Is there a reason why you designed AnaBox in constructor style and not
as a plain function?
* Why do you need to call an initialize() method explicitly? That's what
a constructor is for
* Having a public function called "chain" might mean trouble with other
scripts

Gregor

 

[Thomas Mayer]

Hi,

Thomas Mayer meinte:

Some points:
* reuse references; 10 gEBI() for the same element are hard to read an
inefficient.

I will try to do something about that, but I am not sure, which route to
go: Reinplement $() once again for the script, private properties,
public properties, or even something else?

* Number + String gives String. No need for toString()
done.

* forget about setAttribute(), particularly with event handler attributes
done.

* most of the time you go with appendChild(), then one some occassions
with innerHTML. Why the latter one?

I first forgot to appenChild(document.createTextNode('')); to all
references which led to any DOM manipulation with text nodes as
firstChild impossible, and innerHTML was working

* Is there a reason why you designed AnaBox in constructor style and not
as a plain function?

not really, I just like OOP.

* Why do you need to call an initialize() method explicitly? That's what
a constructor is for
done.

* Having a public function called "chain" might mean trouble with other
scripts

renamed the function to chainFunctions(), which in turn can also might
mean trouble ...

That said, thanks for your feedback, I have updated the js file.

cu Thomas

 

[Thomas 'PointedEars' Lahn]

I will try to do something about that, but I am not sure, which route to
go: Reinplement $() once again for the script,

Certainly not. That would make the script shorter, but even harder to read,
more incompatible with some existing libraries (if that is a concern), and
certainly not more efficient.

private properties, public properties, or even something else?

The latter.

var o = document.getElementById("foo");
... o ... o ... o ... o ...

I first forgot to appenChild(document.createTextNode('')); to all
references which led to any DOM manipulation with text nodes as
firstChild impossible, and innerHTML was working

`innerHTML' is a proprietary property with quite a few quirks where
implemented. Avoid it.

not really, I just like OOP.

Globally declared functions are properties/methods of the Global Object.


PointedEars

 

[Thomas Mayer]

Hi,

Certainly not. That would make the script shorter, but even harder to read,
more incompatible with some existing libraries (if that is a concern), and
certainly not more efficient.

That's what I have thought by myself, but as I still was unsure, I
haven't pointed that out and left this on my TODO list (without
mentioning it in the source comments).

The latter.

var o = document.getElementById("foo");
... o ... o ... o ... o ...

Thanks for that to point out. I have done that for all instances of
document.getElementById().

`innerHTML' is a proprietary property with quite a few quirks where
implemented. Avoid it.

Yes, I have replaced any instance of that as well.

cu Thomas

 

[JR]

Hi, Thomas Mayer!

Congratulations for the initiative. As you I enjoy a lot the
programming exercise instead of copying and pasting third-party code,
although I don't have much time on my hands to spend in developing all
the codes I may need.

First off, I'd suggest that you always submit your code to http://www.jslint.com
and http://www.javascriptlint.com/online_lint.php in order to
anticipate problems that might arise in your code. For instance,
JSLint returned many problems in your code, such as some missing
semicolons, many global variables and some unused variables.

It's not good to use global variables and functions
(addOnloadListener, chainFunctions) while you put some effort in
developing anabox() as a constructor.

I didn't see captions for the images in AnaBox. I think you might have
implemented that.

Anyway, keep up the work and let us know about any new versions.

Cheers,
Joao Rodrigues

 

[JR]

Hello,
May I add up one more suggestion to the list? I think you might
provide a listener to document.onkeypress, for example to hide AnaBox
whenever the user presses 'x' on the keyboard. I did something like
this recently too:

http://www.jrfaq.com.br/lightbox.htm

There are still a few items to tick in my "to-do" list to improve this
code, such as you did with the forward image (arrow) to show the next
image in Anabox.

Some javascript purists would question the need for effects in a
website such as fade, slide, lightbox, etc., and frankly, I agree with
them most of the time. However, when it comes to present a gallery
it's horrible to open new images in popups or another tab. Take a look
for example at this site:

http://www.stevesbeatles.com/pictures/thumbs.asp?group=group

Would it be nice to show the full sized images in AnaBox instead of
new browser's tab?

Cheers,
Joao Rodrigues

 

[RobG]

Some JavaScript purists would question the need for effects in a
website such as fade, slide, lightbox, etc.,

It's not a question of "JavaScript purism" - JavaScript is just one of
the tools used to implement the effect.

and frankly, I agree with
them most of the time. However, when it comes to present a gallery
it's horrible to open new images in popup or another tab.

Given the ability of web browsers to quickly load pages and
intelligently use a cache, I wonder how many designers consider
putting each image into its own HTML page for display, rather than
using a "lightbox" type effect. Then instead of an image on a blank
background, they can apply an appropriate background colour or image,
place a custom border around it and even center it on the page. Then
adding things like captions, links and additional information becomes
a standard HTML authoring exercise.

Users can then use normal web navigation to view images rather than
waiting for some effect to complete before the image becomes visible.

Take a look
for example at this site:

http://www.stevesbeatles.com/pictures/thumbs.asp?group=group

Would it be nice to show the full sized images in AnaBox instead of
new browser's tab?

How much effort would it take to create a template page and display
the images in that? No script required at all.

 

[Gregor Kofler]

JR meinte:

Some javascript purists would question the need for effects in a
website such as fade, slide, lightbox, etc., and frankly, I agree with
them most of the time. However, when it comes to present a gallery
it's horrible to open new images in popups or another tab. Take a look
for example at this site:

http://www.stevesbeatles.com/pictures/thumbs.asp?group=group

Would it be nice to show the full sized images in AnaBox instead of
new browser's tab?

Between an "effects"-loaded JS solution and "opening the bland image in
a new tab" there are quite a few solutions in between. Pretty ones
without the need for JS, too.

Gregor

 

[beegee]

Given the ability of web browsers to quickly load pages and
intelligently use a cache, I wonder how many designers consider
putting each image into its own HTML page for display, rather than
using a "lightbox" type effect. Then instead of an image on a blank
background, they can apply an appropriate background colour or image,
place a custom border around it and even center it on the page. Then
adding things like captions, links and additional information becomes
a standard HTML authoring exercise.

Ugh. No amount of cacheing and fast rendering prevents the flicker
from occuring sometimes when going from page to page. Actually, I
prefer iframe driven galleries. Then you can have all your
advertisements plus clickable thumbnails on the main page or in
another iframe. I am well aware of all the messaging problems of
iframes. I'm solely talking about user experience.

I do agree that lightboxes are less than optimal for picture viewing.
Even ones with great controls prevent access to the rest of the page.
There are places where modal dialogs are really useful but a gallery
is probably not one of them.

Bob

 

[Daniel Kabs]

So, here is the first anabox demo page:
http://www.residuum.org/anabox.htm

To be able to edit the code, I tried "save as complete website". But the
page would not behave as expected when run locally: Firefox does open
the overlay but then follows the link and loads the image from your
server. I wonder why it ignores the "return false;" in the onclick handler.

Cheers
Daniel
--
,-. . . .
,-. ,-. | | ,-. /,-.\ | , ,-. |-. ,-. . ,-| ,-.
| | |-' ||| `-. |,-|| |< ,-| | | `-. | | | |-'
' ' `-' `^' `-' \`-^/ ' ` `-^ ^-' `-' ' :; `-^ `-'
`-'

 

[Thomas Mayer]

To be able to edit the code, I tried "save as complete website". But the
page would not behave as expected when run locally: Firefox does open
the overlay but then follows the link and loads the image from your
server. I wonder why it ignores the "return false;" in the onclick handler.

Hmm. I just noted the same thing, as well as the problem with any
version of Internet Explorer that I can use at work for testing. Has
anyone any idea why "return false" in the following code is ignored?

if (aElements.rel.search(/^anabox(\[([a-zA-Z 0-9\-_]*)\])?$/) != -1)
{
aElements.onclick = function()
{
ana.popup(this.rel, this.href, this.title);
return false;
};
}

cu Thomas

 

[Thomas 'PointedEars' Lahn]

To be able to edit the code, I tried "save as complete website". But the
page would not behave as expected when run locally: Firefox does open
the overlay but then follows the link and loads the image from your
server. I wonder why it ignores the "return false;" in the onclick handler.

Hmm. I just noted the same thing, as well as the problem with any
version of Internet Explorer that I can use at work for testing. Has
anyone any idea why "return false" in the following code is ignored?

if (aElements.rel.search(/^anabox(\[([a-zA-Z 0-9\-_]*)\])?$/) != -1)
{

Your concept appears to be jQuery-ish (flawed): modifying all matching
elements. Get informed about event bubbling instead.

In any case, /.../.test(...) is probably the best way to determine if a
Regular Expression matches a string (or a value convertible to string),
unless the matches are of interest (in which case you should use
RegExp.prototype.exec() which is (or should be) internally called by
test(), or String.prototype.match()).

aElements.onclick = function()
{
ana.popup(this.rel, this.href, this.title);

There could be a fatal error in ana.popup(), ...

return false;

.... in which case this statement will not be executed.

However, this `return' statement is not supposed to do anything useful
anyway in current UAs; unlike in event-handler attribute values, you need to
call (window.event || e).preventDefault() or assign .returnValue = false
(MSHTML) instead. Which is why you should make use of event-handler
attribute values for standards-compliant event-handler attributes for
intrinsic events and event bubbling instead again.


PointedEars

 

[David Mark]

Ugh.  No amount of cacheing and fast rendering prevents the flicker
from occuring sometimes when going from page to page. Actually, I

Keep your pages light, use far future expiration dates for assets,
don't use unload listeners, etc. and you won't have that issue. Done
right, there's not an Ajax-based solution that can touch standard
navigation. I know that is the opposite of prevailing opinions.
Everybody who has written about Ajax for the last four years or so is
simply wrong.