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