10 nette jQuery Snippets

Screenshot von jQuery4u

jQuery ist schön, jQuery ist nett und dankenswerterweise geht eine Menge mit Copy&Paste. Was manche an dieser Stelle allerdings als Segen betrachten, ist wohl eher ein Fluch: es gibt nichts schlimmeres als stumpf Code-Schnipsel zu kopieren, ohne diese zu verstehen – da ist Chaos vorprogrammiert. Wenn ihr also Code von Webseiten kopiert denkt immer dran, das der Code nicht unbedingt gut sein muss, und das man schon wissen sollte was er macht!

Screenshot von jQuery4u

jQuery4u hat eine ganze Menge nützlicher Snippets zusammen getragen, die teilweise mit Canvas spielen, so zum Beispiel eine jQuery-Funktion, die Bilder in s/W konvertiert:

// Grayscale image using HTML5 canvas method
function grayscale(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height; 
    ctx.drawImage(imgObj, 0, 0); 
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}

//Make all images on page Greyscale!
$('img').each(function(){
    var el = $(this);
    el.css({"position":"absolute"}).wrap("
").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function() { var el = $(this); el.parent().css({"width":this.width,"height":this.height}); el.dequeue(); }); this.src = grayscale(this.src); });

Viel Spass mit den Skripts und bitte: immer drauf achten ob die Lösung optimal ist, und was genau sie macht! ;)

Ähnliche Beiträge

Lint für jQuery Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni daz...
Javascript spricht MP3 Nein, kein Scherz! ;) JSmad kann mittels der WEB Audio API von HTML5 MP3 in Javascript decodieren. Das funktioniert nativ derzeit nur im Firefox 4, in...
Redactor – Wysiwyg mit jQuery Ich habe ja erst vor einigen Wochen über einen neuen Wysiwyg-Editor berichtet, der bei einigen größeren Portalen zum Einsatz kommt. In den daraus resu...
GistBox – Snippets richtig sammeln Das sammeln der eigenen oder gefundenen Code Snippets ist hier nach wie vor so eine Sache. In Zeiten wo man alle Lösungen, die man sucht, auf Stack Ov...

Schreibe einen Kommentar