Vanilla 2

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('');
};