Newbie - Rails 3 lightbox?

Rails
1

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:

This generates:

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

2

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

3

Hi!

Thanks for your quick answer. I’ve tried:

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

4

It’s class=“lightwindow” to get the effect to fire.

Walter

5

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

<img
src=“path/to/thumbnail_image.jpg” width=“123” height=“123” alt=“foo” /

Walter

6

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,

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

7

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

8

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

9

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

10

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

11

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

12

Yay!

13

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

14

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

15

Walter D. 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,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

16

Walter D. wrote in post #960750:

On Nov 11, 2010, at 10:11 AM, Marnen Laibow-Koser [email protected]
wrote:

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,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

17

On Nov 11, 2010, at 10:59 AM, Marnen Laibow-Koser wrote:

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.

Walter

18

On Nov 11, 2010, at 10:11 AM, Marnen Laibow-Koser [email protected]
wrote:

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