Question

I am using a slideshow script that needs the dimensions of every image for it to work properly. There are going to be some 50+ images that a client would have to add dimensions too.

Is there a script I can use that will find the width of all the images in an unordered list with an ID of “scroller”, and then set the width just like it’d be set within the image tag?

If somebody could help me write it, and possibly explain what each section does, I would greatly appreciate it.

And if you are looking for code, here it is.

Before JQuery code.

<ul id="scroller">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>

After JQuery code.

<ul id="scroller">
<li><img src="image.jpg" width="100"></li>
<li><img src="image.jpg" width="350"></li>
<li><img src="image.jpg" width="70"></li>
<li><img src="image.jpg" wudth="250"></li>
</ul>

The images would have different widths, but all the same height.

Answer 1

Yes you could. It’s very intuitive really.

$('image selector').width(); //to access width
$('image selector').width(N); //to set width to Npx.

In order to loop through all of them, you’ll use .each().

$('#scroller img').each(function() {
    //Do stuff width each image. $(this).
}

---

You may want to know that you can grab the existing width and set it, but only after the element is fully loaded. This may cause a bit of jumpiness on older browsers, so it would be worth it to hide the images, grab the existing dimensions, do the transformation, and then fade them all in at the same time or something pretty looking like that.
Thanks @Whetstone

---

$(function() {

    $('#scroller img').each(function() {
        $(this).attr('width', $(this).width());
    });

});