automatische Bildunterschriften
Donnerstag, 07 Oktober 2010
Erläuterungen unterhalb eines Bildes sind eine schöne Sache. Mit jQuery und ein paar Zeilen Code kann dies schnell automatisiert werden, ohne lange im Quellcode rumfummeln zu müssen.
Um die Bildunterschriften automatisiert auszutauschen, bestimmen wir einen Bereich,
der "überwacht" werden soll. Das ist im Besipiel ein DIV mit der ID content. Von allen
Bildelementen () im DIV mit der ID content werden in einer Schleife (mit
each() die Alt-Attribute in eine Variable zwischengespeichert. Mit der Funktion
wrap() setzen wir um ein gefundenes Bild einen DIV-Container herum. Dieser
Container wird mit parent() direkt angesprochen, als Breite wird die Breite des Bildes zugeteilt. Mit append() wird im letzten Schritt der Inhalt des Alt-Attribut als Bildunterschrift gesetzt.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#content img').each(function(){
var v= $(this).attr('alt');
$(this).wrap('<div></div>')
.parent()
.width($(this).width())
.append('<span><i>'+ v +'</i></span><br><br>');
});
});
</script>
Hinweisen will ich an dieser Stelle noch auf das Script Captify. Sehr viel luxuriöser als die hier vorgestellte Variante. Die Unterschriften werden geslidet eingeblendet, die Bilder teilweise abgedunkelt. Sehr Fein. Aber für manche Zwecke schon "too much"
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.