Funktion each() in jQuery zum Bildgrößen auslesen will nicht funktionieren

[Modulfux]

Ich möchte alle Produktbilder in der new_products-default.html vertikal zentriert darstellen.
Es gibt zwar CSS-Lösungen, die haben aber alle ihre Macken in verschiedenen Browsern.

Nun dachte ich mir, läßt du das ganze dynamisch mit jQuery auslesen. Dazu wollte ich die Höhe des jeweiligen Produktbildes auslesen und dieses Bild dann mit einem margin-top versehen.

Bisher bin ich soweit:

Code: PHP  [Auswählen]

$(document).ready(function() {
        var maxheight = $('.dynMargin').attr("height");
        $(".dynMargin").css({'margin-top':(140 - maxheight)/2});
});
 

Das funktioniert jedoch nur beim ersten Bild, weil keine weiteren Referenzen mit $(this) vorhanden sind.
Selbst wenn ich ein each() drumherum lege, will es nicht so richtig funktionieren.

Jemand da, der sich mit Schleifenlogik besser auskennt?

Gruß
Ronny

Linkback: https://www.modified-shop.org/forum/index.php?topic=19264.0

[h-h-h]

Code: Javascript  [Auswählen]

$('.dynMargin').each(function(i){
  $(this).css({'margin-top': (140 - $(this).attr('height'))/2});
});

Gruß

h-h-h

[Modulfux]

Mensch, h-h-h, das ist ja ein Volltreffer.

Noch eben die Parameter ein wenig angepasst und schon werden alles Bilder vertikal zentriert angezeigt.

Danke
Ronny

[h-h-h]

Noch cooler wäre es, wenn die Größe der übergeordneten Box durch $(this).parent().height() in der Schleife ausgelesen wird.
Wobei ich eine Lösung mit CSS verwende die einwandfrei funktioniert.

Besten Gruß

h-h-h

[Modulfux]

Also als CSS-Variante habe ich folgendes versucht.
Bilder vertikal zentrieren, doch leider ohne Erfolg.

Es hat lediglich das Layout zerhauen. Wenn ich ehrlich bin, wäre mir eine CSS-Variante lieber, weil diese eben nicht auf die Performance geht.

Gruß
Ronny

[web28]

Bilder vertikal und horizontal zentrieren, aus meinem Image Silder Modul:

Code: XML  [Auswählen]

<div class="slider-img">
<div class="slider_img_inner">
<img ...>
</div>
</div>

CSS

Code: CSS  [Auswählen]

.slider-img{
margin: 0 auto;
width: 200px;
padding: 0px;
height: 155px;
text-align: center;
line-height:155px;
display: table;
}
.slider-img img{
vertical-align:middle;
}
.slider_img_inner{
display: table-cell;
vertical-align: middle;
}

Funktioniert auch im IE7/8

[Modulfux]

Hmm, diese divitis bereit mir ein wenig Magenschmerzen. Daher habe ich auch die new_products_default.html
nach folgendem Schema umgebaut.

Code: XML  [Auswählen]

<ul class="new-products-grid">
{foreach name=aussen item=module_data from=$module_content}
<li class="item">
{if $module_data.PRODUCTS_IMAGE!=''}
<a href="{$module_data.PRODUCTS_LINK}" title="" class="product-image"><span></span>
{html_image file="`$module_data.PRODUCTS_IMAGE`" alt="`$module_data.PRODUCTS_NAME`" class="dynMargin"}
</a>
{/if}
<h2 class="product-name"><a href="{$module_data.PRODUCTS_LINK}" title="">{$module_data.PRODUCTS_NAME}</a></h2>
<span class="price-box">{$module_data.PRODUCTS_PRICE|replace:"EUR":"€"} *</span>
<a href="{$module_data.PRODUCTS_LINK}" title="" class="products-link">Mehr</a>
</li>
{/foreach}
</ul>
 

Und mit dem HTML Code funktioniert das Bilder vertikal zentrieren über CSS nicht so richtig. Oder ich muss mich mal in aller Ruhe ransetzen, woran es hakt.

Gruß
Ronny

[web28]

Die Lösung mit 2 DIVs ist die Minimalste die bei mir funktioniert - in ALLEN Browsern!

Im Internet kursieren Lösungen mit 4 verschachtelten DIVs

[Modulfux]

Ich werde es heute abend mal in Ruhe ausprobieren und Feedback geben.

Gruß
Ronny

[Modulfux]

Kurze Rückmeldung.

Die Version von web28 funktioniert, tadellos. Da ich in meinem Konstrukt mit <ul><li> arbeite, kam sogar nur ein zusätzliches <div> hinzu. Somit konnte ich die Javascript-Lösung wieder verwerfen.

Gruß
Ronny