Baio84
04-04-2013, 10:46
Il mio problema è il seguente: ho una lista di immagini (<li><img><li>) e vorrei dare a <li> un margine alto in proporzione all'altezza dell'immagine, in modo tale che l'immagine poi risulti centrata verticalmente. Ho creato una funzione con jquery che me lo fa, il problema è che non riesco a dare ad ogni <li> il giusto margine collegato all'immagine, in quanto la funzione me li standardizza tutti uguali. Ho pensato che l'unica possibilità sia di utilizzare un ciclo for, ma pensavo che con jquery si potesse farne a meno
HTML
<div id="box-immagini">
<ul>
<li><img src="DSC01126.jpg" class="anteprima" alt="Duchi" /></li>
<li><img src="DSC01127.jpg" class="anteprima" alt="Noi 3" /></li>
<li><img src="DSC01128.jpg" class="anteprima" alt="Noi 3 2" /></li>
<li><img src="DSC01133.jpg" class="anteprima" alt="Triade" /></li>
<li><img src="DSC00943.jpg" class="anteprima" alt="Frutta" /></li>
<li id="nina"><img src="Bonnie.jpg" class="anteprima" alt="Bonnie" /></li>
<li><img src="briseide.jpg" class="anteprima" alt="Briseide" /></li>
<li><img src="budino.jpg" class="anteprima" alt="Budino" /></li>
<li><img src="Diamante.jpg" class="anteprima" alt="Diamante" /></li>
<li><img src="Dile e Toby.jpg" class="anteprima" alt="Dile e Toby" /></li>
<li><img src="dorothy1.jpg" class="anteprima" alt="Dorothy" /></li>
</ul>
</div>
JQUERY
$("li img").load(function() {
var alte = $("li img:first").height(); //Prelevo l'altezza dell'immagine
var marginTop = (83 - alte) / 2; //Calcolo il margine
$("li").css({marginTop: marginTop + "px"}); //Qui si dovrebbe assegnare il margine, però così me lo assegna a tutti
});
HTML
<div id="box-immagini">
<ul>
<li><img src="DSC01126.jpg" class="anteprima" alt="Duchi" /></li>
<li><img src="DSC01127.jpg" class="anteprima" alt="Noi 3" /></li>
<li><img src="DSC01128.jpg" class="anteprima" alt="Noi 3 2" /></li>
<li><img src="DSC01133.jpg" class="anteprima" alt="Triade" /></li>
<li><img src="DSC00943.jpg" class="anteprima" alt="Frutta" /></li>
<li id="nina"><img src="Bonnie.jpg" class="anteprima" alt="Bonnie" /></li>
<li><img src="briseide.jpg" class="anteprima" alt="Briseide" /></li>
<li><img src="budino.jpg" class="anteprima" alt="Budino" /></li>
<li><img src="Diamante.jpg" class="anteprima" alt="Diamante" /></li>
<li><img src="Dile e Toby.jpg" class="anteprima" alt="Dile e Toby" /></li>
<li><img src="dorothy1.jpg" class="anteprima" alt="Dorothy" /></li>
</ul>
</div>
JQUERY
$("li img").load(function() {
var alte = $("li img:first").height(); //Prelevo l'altezza dell'immagine
var marginTop = (83 - alte) / 2; //Calcolo il margine
$("li").css({marginTop: marginTop + "px"}); //Qui si dovrebbe assegnare il margine, però così me lo assegna a tutti
});