Comment aligner verticalement les vignettes de hauteur inconnue à l'aide de jQuery?

Question

Ok, je suis un débutant complet à cela, en fait je construis toujours mon premier site web. Je tente de tout faire en codant manuellement sans CMS pour essayer d'apprendre le plus rapidement possible. Si ce post est au mauvais endroit, je m'excuse, et un pointeur vers le bon endroit serait apprécié.

Ici, j'essaie de reconstituer un peu de jQuery qui alignera automatiquement mes vignettes verticalement dans ma galerie d'images (elles sont toutes de tailles différentes). Ils sont à taille fixe années div et la fonction que je tente ressemble à quelque chose comme ceci:

<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> 

Sans surprise cela ne fonctionne pas, si une bonne âme pouvait prendre en pitié un noob total et le point où je vais faux (probablement en écrivant complète charabia serait ma première conjecture), il serait grandement apprécié - même si vous pourriez simplement me diriger dans la direction d'un tutoriel concernant ces choses. J'ai regardé et trouvé une référence qui disait qu'une telle fonction était facile à créer, mais elle n'a pas été élaborée.

Answer 1

made some code here for you

par exemple:

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'); 
    }); 
});​ 

modifier:

pour mieux aligner: définir vos images pour bloquer et flotter à gauche. alors clearfix votre div.

modifier 2:

en boucle à travers un ensemble d'objets avec une boucle for est plus rapide que l'utilisation .each

Answer 2

En supposant $('#ul.photo') contient plusieurs <img> tags:

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

Answer 3

Voici le css pour ma galerie:

.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; 

désolé de mettre cela dans une autre boîte de réponse, mais le bouton de commentaire a cessé de fonctionner ...