jQuery Horizontal scroll with unknown width of items

I am creating a gallery using jQuery which displays pictures horizontally, with a "left" and "right" button below, that scrolls the row of images. There are plenty of tutorials and plugins for this.

The problem for me though, is that 1) I don't know the width of the images. And 2) I need the item I scroll to, to be centered.

How do I go about this?

Thanks a lot, Gorm

Okay, I will try to clarify.

Say I have a horizontal row of images (with fixed height but unknown width - though smaller than the surrounding container), with a 'next' and 'prev' button as

<div class="imgContainer">
  <ul>
    <li><img src="01.jpg" alt=""></li>
    <li><img src="02.jpg" alt=""></li>
    <li><img src="03.jpg" alt=""></li>
    <li><img src="04.jpg" alt=""></li>
    ...
  </ul>
</div>
<a href="#" id="prev">Previous image</a>
<a href="#" id="next">Next image</a>

When the page loads, the first image is displayed at the center, with the next images going out to the right.

When yo开发者_如何学JAVAu click on "Next image", the row of images will scroll to center the next image.

I tried different "solutions", but I am too much a js/jquery rookie for this I think. So any help would be greatly appreciated. :-)

Well,

1. Calculate the width of the images
2. Center the item you're scrolling

Seriously though, you need to provide a bit more info to get meaningful answers.

You can calculate the width of images inside a collection like this:

var totalWidth = 0;
$('.container img').each(function() {
    totalWidth += $(this).outerWidth();
});

Otherwise it's just simple arithmetics. Give some more details about the problems you're facing if this doesn't help.