jQuery Horizontal scroll with unknown width of items

Question

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

Answer 1

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.

Answer 2

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 you 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. :-)