Bad thumb ul width causes render problems [#876392]

With galleries containing a big number of images (I can't specify the exact number, in my case: 76) the thumb ul container has insufficient width and causes duplicate render of head and tail thumbs in a second row. (see: bad-ul-width.jpg file attached).
During scrolling to the last page of thumbs the last ones are visibles (see: bad-ul-width-scolling.jpg file attached) but when scroll finish they disappear and the last items didn't show (see: bad-ul-width-end-list.jpg file attached).

The bug is located inside galleryformatter.js file at line 27:

$('ul', $thumbs).width('9999px');

One possible correction:

$('ul', $thumbs).width('99999px');

With this correction the thumbs lists renders as expected (see: correct-ul-width-first.jpg and correct-ul-width-last.jpg files attached)

Note: Thumbs in examples are pixelated to preserve privacity (not a render bug ;-) )

Great module!
Thanks Manuel.

File	Size	Author
correct-ul-width-last.jpg	10.1 KB	miguel_angel
correct-ul-width-first.jpg	12.64 KB	miguel_angel
bad-ul-width-end-list.jpg	12.62 KB	miguel_angel
bad-ul-width-scrolling.jpg	18.93 KB	miguel_angel
bad-ul-width.jpg	23.36 KB	miguel_angel

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

miguel_angel CreditAttribution: miguel_angel commented 7 August 2010 at 13:41

A better solution:

Original:

  /*
   * Only start the thumbs carrousel if needed
   */
  if (($thumbsLi.size() * liWidth) > $thumbs.width()) {
    $('ul', $thumbs).width('9999px');
    $thumbs.infiniteCarousel();
    $thumbsLi = $('li', $thumbs); // we need to reselect because infiniteCarousel inserts new empty li elements if necessary
  }

Solution:

  /*
   * Only start the thumbs carrousel if needed
   */
  if (($thumbsLi.size() * liWidth) > $thumbs.width()) {
    $('ul', $thumbs).width(($thumbsLi.size() * liWidth) + 'px'); // Calculate ul width
    $thumbs.infiniteCarousel();
    $thumbsLi = $('li', $thumbs); // we need to reselect because infiniteCarousel inserts new empty li elements if necessary
    $('ul', $thumbs).width(($thumbsLi.size() * liWidth) + 'px');  // Recalculate ul width due to new elements added
  }

I hope it helps.
Regards.

Comment #2

Manuel Garcia CreditAttribution: Manuel Garcia commented 9 September 2010 at 19:41

Status:

Active

» Fixed

Well, I'm not sure myself that I would use this module for such huge galleries, seems that this would not be the right UI, not to mention the huge amount of images you'd be loading on that page.

I've tested your solution, with fewer images, and it breaks giving you two rows of images.
We could also do:

  var liTotalWidth = $thumbsLi.size() * liWidth;
  if (liTotalWidth > $thumbs.width()) {
    $('ul', $thumbs).width((liTotalWidth * 3) + 'px');

But I fear this will give weird results with a lot of images. I think the browser's canvas actually has a limited width.

So for these reasons I think the first solution is better, it doesn't involve more JS calculations, I want to keep the JS as light as possible, and because of what I mention above.

I've already commited the fix, thanks a lot for reporting it, debugging and contributing! http://drupal.org/cvs?commit=418652