A Fullscreeen and re-sizeable image gallery

This experiment was inspired by the following two articles, http://css-tricks.com/perfect-full-page-background-image/ and http://www.cssplay.co.uk/layouts/background.html, both focus on displaying a picture in full height and full width of the browser window regardless of the actual window sizes and with no scrollbars at all. However these features are also useful when you want nothing but see pictures.

Here you find a demo of the picture gallery and below is a list of lessons I learned during this job. Pictures are courtesy of my favorite artist.

• I cannot keep 100% of both width and height beacuse it changes the aspect ratio when the window is resized. So I decided to keep the height to 100%. Width is calculated by the browser using height and the original aspect ratio. This however means that resizing the browser to extremely small width but big height will cut off the edges of the picture.
• I need to learn jQuery. I preferred to keep raw javascript so far, but this time I realized that this would be far too much... So, go for jQuery, for the first time ;-)
• I use a big height div ("pics", with blue border) nested in a smaller height one then clip the outstanding parts width style="overflow:hidden" to prevent scrollbars. Visible part is marked width blue background, gray head and tail are invisible. Then I use the inner (big and clipped) div's actual height measured in pixels to control scrolling.
  
  <div id="wrapper" style="height: 100%; overflow:hidden; ...etc...">
    <div id="pics" >
      <ul>
        <li><img ...><li>
        <li><img ...><li>
        <li><img ...><li>
        ...
      </ul>
    </div>
  </div>
  
  I found that IE and other browsers handle this case in different ways. In case of IE8 and Opera for the inner (big and clipped) div the jQuery height() function returns full height of picture bar, but NOT in Chrome and Firefox. In case of Chrome and Firefox height() returns the parent div`s height that is equal to the screen height. Therefore, in for Chrome and Firefox I use the picture`s list ul height which rises slowly as the pictures download. This means that I need to check the height of the ul each time when a scroll event is triggered. Once the pictures are downloaded the ul size does not grow further.
• IE cannot catch jQuery mouseenter() for a div which is transparent ( filter : alpha(opacity=0) ) and there is no background color. That's why a white background is set for the divs that control scrolling ("scroll up" and "scroll down" in the example). As the divs are 100% transparent is is not visible though...