How do I vertcally align thumbnails of unknown height using jQuery?
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.
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
Assuming $('#ul.photo')
contains multiple <img>
tags:
$('#ul.photo img').each(function() {
var $img = $(this);
$img.css('padding-top', (208 - $img.height()));
});
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...
精彩评论