JQuery: Bildbreite ermitteln um Bildunterschriften korrekt darzustellen

Montag, 22. Juni 2009 Dennis S.

Hallo! neu hier? Dann abboniere doch den RSS feed, um immer auf dem aktuellsten Stand bleibst.

Powered by WP Greet Box WordPress Plugin

Solange Bildunterschriften nicht breiter als ein Bild sind, fällt diese Problem kaum auf. Doch sollte eine Bildunterschrift länger bzw. breiter als die zugehörige Grafik sein, kann es schnell zur fehlerhaften Darstellung des Layouts kommen.

<div class="grafikbox">
  <img src="pfad/zum/bild.jpg" alt="Alt-Text" />
  <p>Bildunterschrift</p>
</div>

Wird jetzt die Bildunterschrift länger, richtet sich die umschließende Div-Box an dem P-Element aus und die Box wird entsprechend breiter. Gewünscht ist allerdings, dass das Div die Grafik umschließt, die Bildunterschrift jedoch umbricht sobald sie breiter als die Grafik wird.

Untertitel ohne feste Breite

Das Problem lässt sich umgehen, in dem man der umschließenden Box die Breite der Grafik zuweist. Doch eine Grafik hat nicht immer die gleiche Breite.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $(".grafikbox").each(function(){
      var bildbreite = $(".grafikbox").children("img").width();
      var bildbreite = bildbreite + 6;
      $(this).css("width",bildbreite);
    });    
  });
</script>

Mit diesem kleinen JQuery-Script wird die Bildbreite ermittelt und der Div-Box per Style-Attribut zugewiesen.

Für das Einrichten der Funktion sind folgende Schritte notwendig:

1. JQuery in den -Bereich einbinden

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
</script>

2. Script einfügen :

<script type="text/javascript">
  $(document).ready(function() {
    $(".grafikbox").each(function(){
      var bildbreite = $(".grafikbox").children("img").width();
      var bildbreite = bildbreite + 6;
      $(this).css("width",bildbreite);
    });    
  });
</script>

Erwähnenswert ist bei dieser Variante, die Zeile 5, da dort zu der Bildbreite noch 6 Pixel addiert werden. Dies hat den Hintergrund, dass die Grafik per CSS ein Padding von 2px und eine Border von 1px hat. Also für jede Seite 3px zusätzlich, also 6px insgesamt. Dieser Wert ist natürlich dem individuellen Design anzupassen.

3. Sicherstellen, dass um die gewünschten Grafiken ein DIV mit der Klasse „grafikbox“ ist.