[Fluid-108] Thumbnail scrolling - possible solutions?

[Jonathan Hung]

Hi everyone.

I have been investigating the bug documented in Fluid-108 (
http://issues.fluidproject.org/browse/FLUID-108). To see this problem more
clearly, modify the Lightbox.css so that overflow is scroll (not hidden) in
.image-inner-container

.image-inner-container{
  height: 100px;
  width: 140px;
  background-color: #eee;
  overflow: scroll; /* <-- changed from "hidden" */
  margin: 0 auto 3px auto;
}

If you've made the above change, load Lightbox.html demo page, and then
navigate with the keyboard. You will see that the scrollbars on the
thumbnail image would shift as focus moves around (like on "Blackberry",
"Cherry", or "Fig").

It would appear that this problem occurs when the thumbnails supplied to the
Lightbox are not the proper size (or proportion?). For thumbnail images that
are either really wide or really tall, navigating with the keyboard in
Firefox would cause the thumbnail image to scroll within its div when the
outer parent div gains focus.

There are a couple ways we can fix this.

1. Use Javascript to force the browser not to shift the thumbnail when
focused.
2. Use Javascript to resize the thumbnails to fit the div properly
(140x100px)
3. See if there is a CSS solution
4. Have the server generate thumbnails that fit into 140x100px (by either
cropping or proportionally scaling the longest side ?)
5. other?

The Javascript solutions are not desirable as this would severely degrade
performance especially on a large image gallery. Personally I would prefer
solution #4 as it would reduce the memory requirements on the client by
having smaller thumbnail images (perhaps it would solve some of the "slow
dragging" bugs too?).

Anyone else would like to comment on how best to fix this bug?

- Jonathan.


-- 
Jonathan Hung / jonathan.hung at utoronto.ca
University of Toronto - ATRC
Tel: (416) 946-3002
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20071219/c4ef3678/attachment.html>