[Fluid-108] Thumbnail scrolling - possible solutions?

[Eli Cochran]

I was about to toss out some CSS and JS hacks but after looking at  
what's going on here...

As far as I can tell, there are no thumbnails -- these are full sized  
images being resized on the browser. That's not cool on a number of  
levels... mostly download performance, but I bet there's some drag  
performance and other performance issues on the browser-side because  
the browser is having to deal with the extra data.

So... my statement is... this is an Image Gallery bug... we need to  
generate (probably alongside Resources) real thumbnails. The  
trickiness is that those thumbs need to be part of the data that is  
carried around with the image in Resources... but that's not your  
problem.

- Eli

On Dec 19, 2007, at 7:50 AM, Jonathan Hung wrote:

> 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
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work

. . . . . . . . . . .  .  .   .    .      .         .              .     
                  .

Eli Cochran
user interaction developer
ETS, UC Berkeley


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20071219/933c8290/attachment.html>