How do I vertcally align thumbnails of unknown height using jQuery?

Question

Ok, I am a complete beginner to this, in fact I am still building my first website. I am attempting to do this all by hand-coding without a CMS in order to try and learn as much possible as quickly as possible. If this post is in the wrong place I apologise, and a pointer to right place would be appreciated.

Here goes, I am trying to piece together a bit of jQuery that will automatically vertically align my thumbnails in my image gallery (they are all different sizes). They are within fixed size div's and the function I am attempting looks something like this:

<script type="text/javascript">

$('#ul.photo).bind(function() {

var smartVert=$(this);

var phty=ob.("ul.photo img").height(); //get height  of photos

var phtdif=Math.floor(208 - phty); //subtract height of photo from div height

var phttop=Math.floor(phtdif / 2); //gets padding reqd.

$ob.("ul.photo").css({'padding-top' : phttop}) //sets padding to center thumbnail

});

smartVert();

</script>

Unsurprisingly this doesn't work, if some kindly soul could take pity on a total noob, and point out where I am going wrong (probably in writing complete gibberish would be my first guess), it would be greatly appreciated - even if you could just point me in the direction of a tutorial regarding these things. I have looked and found one reference that said such a function was easy to create, but it did not elaborate.

Answer 1

made some code here for you

for example:

html

<div id="yourdiv">
    <img height="200" width="100" src="x" />
    <img height="100" width="100" src="x" />
    <img height="150" width="100" src="x" />
    <img height="300" width="100" src="x" />
</div>​

css

#yourdiv {
    height: 400px;
    background-color: black;
}
#yourdiv img {
    margin: 0 10px;
}

js

$(document).ready(function() {
    var $yourdiv = $("#yourdiv");
    var divHeight = $yourdiv.height();

    $("img",$yourdiv).each(function() {
        var imgElement = $(this);
        var imgPadding = (Math.floor((divHeight-imgElement.height()) / 2));
        imgElement.css('margin-top',imgPadding+'px');
    });
});​

​

​ edit:

for better aligning: set your images to block and float them left. then clearfix your div.

edit 2:

looping through an set of objects with a for-loop is faster than using .each

Answer 2

Assuming $('#ul.photo') contains multiple <img> tags:

 $('#ul.photo img').each(function() {
   var $img = $(this);
   $img.css('padding-top', (208 - $img.height()));
 });

Answer 3

here is the css for my gallery:

.contentphoto {
    position:relative;
         width:64%
    margin:auto;
    left:10.375em;
    top:-36.625em;
    background-color: #7EC0EE;
    background-image: none;
    background-repeat: no-repeat;
    background-position:center;
    z-index:1;
}

ul.gallery{
    width: 100%; 
    padding-left: 3.2em;
    margin:  0;
    list-style: none;
}

ul.gallery li {
    float: left;
    width: 200px;           /*Set default width*/
    padding: 0;
    margin: 5px 0;
    display: inline;
}

.photo {
    height: 13em;
    font-size: 1em;
    margin-right: 10px;  /*Creates the 10px gap */
    padding: 20px;
    background: #e3e1d5;
}

.photo img {        /*Flexible image size with border*/
         width: 89%;    /*Took 1% off of the width for IE6 bug*/
         padding: 5%;
    background:#fff;
    margin: 0 auto;
    display: block;
    -ms-interpolation-mode: bicubic;

sorry for putting this in another answer box but the comment button stopped working...