Newbie - Rails 3 lightbox?

Hello!

I'm trying to create a simple image "popup" effect using Lightbox2,
http://www.huddletogether.com/projects/lightbox2/. But I don't get it
to work. My code looks lite this:

<span class="ad_image">
  <a href="<%= ad.image.url(:thumb) %>" rel="lightbox"><img src="<%=
ad.image.url(:thumb) %>" /></a>
</span>

This generates:

<span class="ad_image">
  <a href="/system/images/301/thumb/tufftroja_19225958.jpg?1287075644"
rel="lightbox"><img src="/system/images/301/thumb/
tufftroja_19225958.jpg?
  1287075644" /></a>
</span>

And in my application.html.erb

<%= render 'layouts/stylesheets' %>
<%= stylesheet_link_tag 'lightbox' %>
<%= javascript_include_tag :defaults, 'lightbox' %>

The image shows up, but nothing happens when I click on it.

Any suggestions on what I'm doing wrong would be appreciated!

Thanks!
// Anders

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.

Walter

Hi!

Thanks for your quick answer. I've tried:

<span class="ad_image">
  <a href="<%= ad.image.url(:thumb) %>" class="lightbox"><img src="<%=
ad.image.url(:thumb) %>" /></a>
</span>

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?

// Anders

Oh, try linking to the full size image. Here's how the rendered HTML works in one of my pages:

<a href="path/to/full_size_image.jpg" class="lightwindow"><img src="path/to/thumbnail_image.jpg" width="123" height="123" alt="foo" / ></a>

Walter

It's class="lightwindow" to get the effect to fire.

Walter

Hi,

I think we were talking about different modal window plugins. But I've
changed to LightWindow now, it seems much better.

I'm now getting the same output as you from my source code,

<span class="ad_image">
  <a href="<%= ad.image.url(:original) %>" class="lightwindow"><img
src="<%= ad.image.url(:thumb) %>" /></a>
</span>

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:

<%= render 'layouts/stylesheets' %>
<%= stylesheet_link_tag 'lightwindow' %>
<%= javascript_include_tag :defaults, 'lightwindow', 'scriptaculous.js?
load=effects' %>

Have i forgotten something or is it something else?

Thanks!

// Anders

Hi,

I think we were talking about different modal window plugins. But I've
changed to LightWindow now, it seems much better.

I'm now getting the same output as you from my source code,

<span class="ad_image">
  <a href="<%= ad.image.url(:original) %>" class="lightwindow"><img
src="<%= ad.image.url(:thumb) %>" /></a>
</span>

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:

<%= render 'layouts/stylesheets' %>
<%= stylesheet_link_tag 'lightwindow' %>
<%= javascript_include_tag :defaults, 'lightwindow', 'scriptaculous.js?
load=effects' %>

Have i forgotten something or is it something else?

Thanks!

// Anders

Maybe move lightwindow after scriptaculous, since it depends on that to work correctly. Do you have Firebug installed there? Are you getting any errors?

Walter

I'm getting this error from Firebug.

uncaught exception: Page Type could not be determined, please amend
this lightwindow URL http://localhost:3000/system/images/301/original/tufftroja_19225958.jpg?1287075644

I use Paperclip for uploading images. LightWindow maybe doesn't
recognize that file ending (tufftroja_19225958.jpg?1287075644)?

Any suggestion how to solve that?

Thanks
// Anders

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.

Walter

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.

Any suggestions on how to solve this?

Thanks
// Anders

Hi again!

Sorry, newbish misstake. I had forgotten to replace my old prototype
file with the file from lightwindow, so now it works!

Thanks again!
// Anders

Yay!

If anyone else is having lightbox troubles I recommend using Top Up. I
show how to integrate in this blog post:
http://webtempest.com/easiest-lightbox-solution-for-a-rails-3-app-with-paperclip/">lightbox
in rails

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.

Walter

Walter Davis wrote in post #960734:

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?

Walter

Best,

Walter Davis wrote in post #960734:

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.

Walter

Walter Davis wrote in post #960750:

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.

Walter

Best,

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.

Walter