jCarousel Lite - Mittel Bilder horizontal und vertikal

Question

Ich habe jCarousel Lite mit Bildern von verschiedenen Größen / Seitenverhältnissen in Drupal gehen. Ich bin nicht viel Glück hat versucht, die Bilder vertikal zu zentrieren und horizontal (das heißt gleichmäßig beabstandeten). Das Plugin erfordert, dass die Bilder in einem <ul><li><img ... /></li></ul> sein. Ich habe versucht, display:inline-block, marginTop:50% unter anderem, von denen die meisten nur das Karussell vermasseln.

Das Karussell ist im Internet abrufbar: http://carillontech.org/drupal/

Dank !!

Answer 1

Danke für die Hinweise. Es ist irgendwie ein Cop, aber die einfachste Lösung war nur die Bild Leinwände so zu erweitern, dass sie alle die gleiche Größe sind. Wenn die Hintergrundfarbe jemals ändert, werde ich gehen muß zurück und es in den Bildern ändern (da jpg keine Transparenz tun), aber zumindest funktioniert es konsequent auf jedem Browser (im Gegensatz zu CSS).

Answer 2

Eine Möglichkeit, dies tun könnte, da Sie mit jQuery bereits auf der Seite wird die Bildhöhe für jedes Bild bekommen, Subtrahieren, dass von der Höhe des Karussells und appling einen oberen Rand der Hälfte dieser Wert auf die Bild oder auf den übergeordnet li.

So etwas wie folgt aus:

$('#carousel img').each(function() {
   marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
   if(marginTop > 0) {
      $(this).css({'margin-top':marginTop});
   }
});

Sie müssen #carousel mit der tatsächlichen ID einstellen Sie verwenden, aber es sollte auf diese Weise arbeiten.