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("<div class='img_wrapper' style='display: inline-block'>").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

Starke Passwörter mit jQuery Ich hatte ja erst unlängst auf ein Tutorial zum Thema Passwortstärke hingewiesen, das Thema wird immer wichtiger da der Benutzer es von sich aus nicht...
jQuery Fundamentals – kostenloses jQuery eBook Ein angekündigtes kostenloses jQuery eBook könnte durchaus sinnvoll sein – auch wenn es auf Englisch ist (um dem einen oder anderen Kommentar hier dir...
Vintage Effekte für Photos mittels jQuery Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...
Einfaches Sortieren von Tables mit jQuery Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem H...

Schreibe einen Kommentar