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

Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...
Tutorial zur Passwortstärke mit jQuery Der Fall YouPorn hat eindrucksvoll bewiesen, wie simpel Passwörter sind. An der Uni habe ich in einem Kurs echt wilde Dinge gelernt um Systeme zu bela...
Isotope – Next Generation Website Layout dank jQue... Das letzte Plugin für jQuery was mich nachhaltig beeindruckt hatte, war Masonry. Das kleine Tool macht gerade auf Community-Seiten oder in Drupal rech...

Schreibe einen Kommentar

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