Check the height of an image with a display block - resize

Question

This is what I'm trying to achive:
I have list of images which are rotating inside a div (fade in, fade out effect)
in each rotation there is one which displays and all the rest are hidden (display: none)
I am trying to create a "resize" event which will always check the height of only existing image (the only one that is showing in the sequence) and assign this height to it's main container (in my case: the UL)
Here is my HTML:
<ul id="output">
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="/images/sample3.jpg">
</li>
</ul>
and my JS:
jQuery(window).resize(function() {
slide_img = jQuery.find("ul#output li img");
slide_img_height = jQuery(slide_img).height();
if(jQuery(slide_img).css("display") != "none"){
jQuery("ul#output").height(slide_img_height);
}
});
It is not working. it also get the height of the "hiddden" images in the sequence and displays their height (which equals to 0)
how do I pull only the image with the display block always and get it's height and then assign it to the main UL?
Thanks

Answer 1

Let me make sure I understand your question:
1.) You have a container for several images, only one of which will be visible at a time.
2.) You want to change the size of the container to just fit the image currently displayed.
3.) Are you also trying to display the height (in pixels) as a text element?
If you're just trying to accomplish the first two, you can nest your images in a instead of like:
<div id='output'>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample1.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample2.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample3.jpg' />
</div>
</div>
</div>
If you do this, the height of your 'output' div will always be the height of the only displayed image. If you needed to display the value of the actual height, you could use:
var outputHeight = $('#output').height();

Answer 2

Since I can't add enough code in a comment to answer your follow-on question, here it is:
If you need to keep your original structure, try this:
<ul id="output">
<li class="container active">
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample3.jpg" />
</li>
</ul>
Then you can select the <li>'s to be either hidden or visible with some CSS like this:
.contaner {
display: none;
}
.active {
display: inline;
}
Like this, the entire <li> gets removed when you set display: none; and only the visible one will take up space in the <ul>. That will let your <ul> only be as high as the currently displayed image.
Hopefully that answers your question.

Answer 3

So eventually, this is what I came up with and it works perfectly:
jQuery(window).resize(function() {
// variables presenting the LI, IMG and th eheigt of the img
slide_li = jQuery("ul#output li").css('display','list-item');
slide_img = jQuery(slide_li).find('img');
slide_img_height = jQuery(slide_img).height();
jQuery("ul#output").height(slide_img_height);
});
This way I was able to find the only image that has a display of "list-item" (I know it's weird but this is how the slider works, I didn't build it)
and then, get the image height and assign it to the main container which is in my case:
ul#output
Credit to #anson for doing his best to help
Thanks