0

I want to create a slideshow of images that are contained in a <ul>:

<ul>
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li>
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li>
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li>
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li>
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li>
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li>
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li>
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li>
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li>
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li>
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li>
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li>
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li>
</ul>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    li {
        display: none;
        list-style-type:none;
        margin:0;
        padding:0;
        position: absolute;
    }
</style>

You can see that the html markup and CSS is pretty straight forward. The problem I have is that although all images are of same size, the size is not known in advance. I therefore cannot set a fixed height on the <ul> but I really have to -- because the absolute positioned elements inside relative positioned element means that the container has zero height and the images start to appear over the content below it.

I am using jQuery so please guide me towards a CSS and/or jQuery based solution. Please note that I 've already tried:

$("ul").height(
    $("ul li:eq(0)").outerheight()
)

but, on document ready, the images are not loaded and hence the height is unknown. I also tried adding a delay/waiting for $("ul li:eq(0)").outerheight() > 0 but this gives problems in IE. IE often returns a value greater than zero when it has partially downloaded the image but this value if often less than actual image height. Let me know if you need any clarification.

Salman A
  • 262,204
  • 82
  • 430
  • 521

3 Answers3

1

For example: 

var width, height;

$('ul img').load( function () {
    width  = this.width;
    height = this.height;
});

Borrows from the answer to this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Community
  • 1
  • 1
pharalia
  • 709
  • 4
  • 6
  • Obviously, you don't need to run it for each image if the images are the same dimensions, and if you did then you need to assign each image dimension into an array instead of overwriting width and height each time. I think it gives the gist of what is needed. – pharalia Oct 22 '10 at 14:55
1

I would say it'd be technically better to do this from the opposite angle. Remove the display: none; from your CSS, then get the height of the box when the page loads (this way, without javascript people can still see the images). Then, set the display property of the li's to none via javascript.

You get the height, and the same functionality!

Alex
  • 7,320
  • 1
  • 18
  • 31
  • I.e. calculate the height on window.load instead of document.ready? – Salman A Oct 22 '10 at 15:00
  • I'm pretty sure the images may not have loaded, but their heights should've been calculated on document ready? @Salman - no. Render the page as normal, showing everything, then use javascript to hide what you don't need – Alex Oct 22 '10 at 15:02
  • Nope, it returns 0 height on document.ready unless images were cached. I am doing almost exactly what you said: that I leave the first li `display: list-item;` but the height is not available on document.ready in case the page is loaded fresh. – Salman A Oct 22 '10 at 16:23
  • Instead of getting and setting height via jQuery, I revised CSS to display the first slide by default and let the browser determine the height. – Salman A Oct 23 '10 at 11:58
0

And by doing this?

$("ul").css({
   height: $("ul li:eq(0)").find("img").outerheight()
});
Arnaud F.
  • 8,252
  • 11
  • 53
  • 102
  • I've tried it, but on document ready this often returns 0 if the cache was empty, and on IE it often returns incorrect height when the cache was empty. – Salman A Oct 22 '10 at 14:55