[Fluid-108] Thumbnail scrolling - possible solutions?

[Jonathan Hung]

Hi Ray,

I've filed this bug into Jira:
http://jira.sakaiproject.org/jira/browse/GAL-74

- Jonathan.

On 19/12/2007, Ray Davis <ray at media.berkeley.edu> wrote:
>
>  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).
> 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
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
>  http://fluidproject.org/mailman/listinfo/fluid-work
>
>
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work
>
>


-- 
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/20071220/5a642ba1/attachment.html>