[Fluid-108] Thumbnail scrolling - possible solutions?

[Ray Davis]

At 09:36 AM 12/19/2007, Eli Cochran wrote:
>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...

Well, more precisely speaking, it was an Image Gallery design 
decision made in April that the team might well want to rethink 
now.... :)  Another issue with on-the-fly browser resizing, by the 
way, is that the quality may be appreciably lower than what can be 
produced on the server side.

I have a fairly long write-up from the earlier discussion that I can 
paste into whatever JIRA task / Confluence page gets added.

Best,
Ray

>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>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 / <mailto:jonathan.hung at utoronto.ca>jonathan.hung at utoronto.ca
>>University of Toronto - ATRC
>>Tel: (416) 946-3002
>>_______________________________________________
>>fluid-work mailing list
>><mailto:fluid-work at fluidproject.org>fluid-work at fluidproject.org
>>http://fluidproject.org/mailman/listinfo/fluid-work
>
>. . . . . . . . . . 
>.  .  .   .    .      .         .              .                     .
>
>Eli Cochran
>user interaction developer
>ETS, UC Berkeley
>_______________________________________________
>fluid-work mailing list
>fluid-work at fluidproject.org
>http://fluidproject.org/mailman/listinfo/fluid-work
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20071219/3083c42a/attachment.html>