Support for list items with variable sizes
  • Hi,

    If each list item has a different width, they become overlapped. So I've slightly modified the source code in order make gallery width calculations more dynamic:

    [...]
    // Global variables needed in multiple functions.
    var currentPage = 1,
    itemWidth = 0,
    itemMargin = 0,
    maxItemHeight = 0,
    galleryWidth = 0,
    galleryTotalWidth = 0,
    pageCount = 0,
    animated = false,
    $gallery = $(this);
    [...]

    var _formatGallery = function () {
    $gallery.find('li').each(function (ix, listItemDOM) {
    var listItem = $(listItemDOM),
    listItemWidth = listItem.css('position', 'absolute').width(),
    tmp, itemSpacingLeftRight = 0,
    itemSpacingTopBottom = 0,
    itemHeight, marginRight;

    itemSpacingLeftRight += (marginRight = ((tmp = listItem.css('margin-right')) === 'auto') ? 0 : parseFloat(tmp));
    itemSpacingLeftRight += ((tmp = listItem.css('margin-left')) === 'auto') ? 0 : parseFloat(tmp);
    itemSpacingLeftRight += ((tmp = listItem.css('padding-right')) === 'auto') ? 0 : parseFloat(tmp);
    itemSpacingLeftRight += ((tmp = listItem.css('padding-left')) === 'auto') ? 0 : parseFloat(tmp);

    itemSpacingTopBottom += ((tmp = listItem.css('margin-top')) === 'auto') ? 0 : parseFloat(tmp);
    itemSpacingTopBottom += ((tmp = listItem.css('margin-bottom')) === 'auto') ? 0 : parseFloat(tmp);
    itemSpacingTopBottom += ((tmp = listItem.css('padding-top')) === 'auto') ? 0 : parseFloat(tmp);
    itemSpacingTopBottom += ((tmp = listItem.css('padding-bottom')) === 'auto') ? 0 : parseFloat(tmp);

    itemHeight = listItem.height() + itemSpacingTopBottom;

    if (itemHeight > maxItemHeight) {
    maxItemHeight = itemHeight;
    }

    listItem.css({
    top: 0,
    left: galleryTotalWidth
    });

    galleryTotalWidth += listItemWidth + itemSpacingLeftRight;

    if (ix < settings.itemsPerPage) {
    galleryWidth = galleryTotalWidth;
    }
    });

    $gallery.css({
    width: galleryWidth,
    height: maxItemHeight,
    overflow: "hidden",
    position: "relative",
    clear: "left"
    });

    $gallery.wrap('
    ');
    };
  • I guess, the html template in the final line has been deleted by your validator.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter