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

Dynamische Favicons mit Funktion Die Idee ist ebenso genial wie einfach: Wenn sich ein Benutzer erst einmal an einem System angemeldet hat, besteht eine Session. Besteht eine Session ...
html2canvas – Screenshots mit JavaScript Wenn man mal überlegt, womit sich man sich als Blogger so seine Zeit vertreibt, wird man auf eins sehr schnell kommen: Screenshots. Die kleinen Bieste...
jCookies – Cookies mit jQuery Cookies sind eine sinnvolle Sache, meistens mit dem Holzhammer verwendet. In der Regel werden sie entweder benutzt um eine Session in PHP zu kennzeich...
Wasserzeichen mit JavaScript und dem Canvas-Elemen... Angenommen man besitzt einen Shop, angenommen man verkauft tausende Artikel die vom gleichen Großhändler kommen. Der Großhändler besitzt natürlich kei...

Schreibe einen Kommentar