I think Lightbox2 uses the classname rather than the rel for the initial hook. Rel is used for a lot of other stuff like geometry and format, but classname does the initial hookup.
But that didn't work either. It links to the image but not with a
popup effect. It just redirects to the image url and shows a page with
the image. So the popup effect doesn't work.
Any other tips?
But the effect doesn't work. So I think my setup is wrong.
I have moved lightwindow.js to my public Javascript folder, and I have
moved lightwindow.css to my public CSS folder. My application.html.erb
looks like this:
But the effect doesn't work. So I think my setup is wrong.
I have moved lightwindow.js to my public Javascript folder, and I have
moved lightwindow.css to my public CSS folder. My application.html.erb
looks like this:
Maybe move lightwindow after scriptaculous, since it depends on that to work correctly. Do you have Firebug installed there? Are you getting any errors?
The offending function is _fileType, starting at line 850 in lightwindow.js.
You're going to have to dig into the type matching code and strip off the querystring part of the URL before trying to match. It's looking to match on "everything after the last dot" and it's not sanitizing that cache-busting string that Rails is tacking on to the URL for the image. There's a function that does that, but it appears to be coming two or three lines too late to have any effect. But if you move line 854 above line 851, you'll have to see if that breaks some other aspect of the matcher.
Thanks, that seemed to work. But I ran into another problem. The
effect starts but my image doesn't show up. It just keeps loading. I
get the following error from Firebug (line 3314):
(I don't know if this is the actual problem since it comes from
prototype.js.)
property is undefined
[Break on this error] if (property.include('left') ||
property.include('right') || property.include('width')) {
I've got the same error before I made any changes in lightwindow.js.
That looks cool, but it uses a LOT of really non-standard HTML. (Validate their demo page for a study in angry-looking error icons over at W3.) I am still wishing for one of these that doesn't use made-up attributes on the A or IMG to communicate the metadata for the popup. I have the start of such a thing, but I haven't had time to really flesh out its support for non-image media.
That looks cool, but it uses a LOT of really non-standard HTML.
(Validate their demo page for a study in angry-looking error icons
over at W3.) I am still wishing for one of these that doesn't use made-
up attributes on the A or IMG to communicate the metadata for the
popup.
Actually, made-up attributes are often the best way to do this. I'm an
HTML validation Nazi, but I'm perfectly happy to use extra attributes
like these -- the nice thing about HTML is that unknown attributes won't
break anything, and they prevent you from having to mix JS into your
HTML.
I have the start of such a thing, but I haven't had time to
really flesh out its support for non-image media.
That looks cool, but it uses a LOT of really non-standard HTML.
(Validate their demo page for a study in angry-looking error icons
over at W3.) I am still wishing for one of these that doesn't use made-
up attributes on the A or IMG to communicate the metadata for the
popup.
Actually, made-up attributes are often the best way to do this. I'm an
HTML validation Nazi, but I'm perfectly happy to use extra attributes
like these -- the nice thing about HTML is that unknown attributes won't
break anything, and they prevent you from having to mix JS into your
HTML.
I have the start of such a thing, but I haven't had time to
really flesh out its support for non-image media.
Where do you put your metadata?
I use the a:title, the a:class, the a:rel, the img:class and the img:alt. I'm also thinking about the img:src to encode geometry for Flash and other plugin content. I haven't added support for non-image media types yet, though.
break anything, and they prevent you from having to mix JS into your
HTML.
I have the start of such a thing, but I haven't had time to
really flesh out its support for non-image media.
Where do you put your metadata?
I use the a:title, the a:class, the a:rel, the img:class and the
img:alt.
I'd love to see sample usage. I would say, however, that I think
img:alt is 100% inappropriate for metadata -- after all, it's the text
that displays *instead of* the image in a non-graphical browser, not a
*description* of the image -- and for me at least, I'd take some
convincing for a:title.
I'm also thinking about the img:src to encode geometry for
Flash and other plugin content.
That sounds smelly to me. Of course, there's img:height and :width...
I haven't added support for non-image
media types yet, though.
img:height and width only relate to the thumbnail itself, and the whole point of a Lightbox is that you go from a little thumbnail to a massive original, scaled to fill the screen if possible. This is trivial in a static photo setting, because with careful application of CSS dimension inheritance rules, you can get this more or less for free.
But you have to tell your Flash or QuickTime object/embed code what dimensions the movie is -- BEFORE you load the movie. There are ways to (sometimes) ask the movie after it's loaded what its dimensions are, but until you get the movie in place, you can't do that, so it's a chicken-or-egg problem, particularly vexing for very large files.
So if you can make your thumbnail image or link "aware" of the final SWF dimensions -- remember, that's probably not the same size (and maybe not even the same aspect ration) as the thumbnail -- and use that as a hint to your object/embed code that you are assembling on the fly in response to that click, then your lightbox will know what size to make itself etc.
