Sorry that my debugging skills may not be up to par, but I think I may have come across a small glitch in how image widths are calculated. Part of my script includes functionality to iterate over a ul, find the images in each li (one image per li), and add their widths to a variable that keeps track of the sum. I originally had an anchor link around each image, but the moment that I removed those anchor links, the calculation screws up. Hopefully this is just operator error. Portion of the script is as follows:

window.onload = function () {

var totalItemWidth = 0;

var firstItemWidth = $("#productListing img:first-child").width();

var lastItemWidth = $("#productListing img:last-child").width();

$("#productListing img").each(function (i) {

totalItemWidth = $(this).width() + totalItemWidth;

});

$("#productListing").css("width", totalItemWidth);

$("#productListing").css("left", (890 - totalItemWidth)/2);

var container = $('div.productSlider');

var ul = $('ul', container);

//var itemsWidth = ul.innerWidth() - container.outerWidth();

$('.slider', container).slider({

min: 0 - firstItemWidth - 20,

max: totalItemWidth - 680,

value: ((0 - firstItemWidth - 20) + (totalItemWidth - 680))/2,

handle: '.ui-slider-handle',

stop: function (event, ui) {

ul.animate({'left' : ui.value * -1}, 500);

},

slide: function (event, ui) {

ul.css('left', ui.value * -1);

}

});

...............

HTML is as follows:

<div id="container">

<div class="productSlider">

<ul id="productListing">

<li><a href="#"><img src="images/test_image_large.png" title="The image title" alt="The image title" border="0" /></a></li>

<li><a href="#"><img src="images/test_image_large.png" title="The image title" alt="The image title" border="0" /></a></li>

...............