unForastero

<Webworking>


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"



diese Seite teilen:




Kommentare

es gibt insgesamt 0 Kommentar(e)












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz