10 nette jQuery Snippets

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

jQuery Boilerplate – jQuery Plugins für Dumm... Im Bereich der Webentwicklung bewegen wir uns derzeit in einem Bereich, in dem Code nicht nur funktionieren, sondern auch wiederverwendbar sein muss. ...
Mit Numeral.js Zahlen formatieren Normalerweise ist der Konstrukt ja wie folgt: MySQL->PHP->Form->PHP->MySQL - das ist ganz nett, bietet aber einige Fallstricke. Normalerwe...
Tutorials Spieleentwicklung in jQuery Wer den Blog fleissig verfolgt weiss ja, das ich mich auch ein wenig mit dem Thema Spieleentwicklung beschäftige. Man kann da bereits mit einfachen Mi...
Der Bild-Upload, das Design und der Kunde Im Leben eines Webworkers kann man von zwei Prämissen ausgehen : a) Kunden beherrschen keine Bildbearbeitung und b) Grafiker schaffen es nicht ein nic...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.