immagine responsive problema con script jquery

pmodugno

Nuovo Utente
18 Ago 2015
1
0
0
Ciao ragazzi, ho bisogno del vostro aiuto, purtroppo non sono molto afferrato in programmazione. Questa è la mia homepage di un mio progetto personale: http://www.likealittledisaster.com/home

vorrei rendere la mia immagine principale responsive, ma non ci riesco. Credo che tutto dipenda da uno script che ho trovato in rete e che serve a virare le immagini in una tonalità di colore. Lo script per me è troppo complesso da capire.

Codice:
jQuery(function () {
    jQuery(window).load(function () {
        // Fade in images so there isn't a color "pop" document load and then on window load
        jQuery(".item").animate({
            opacity: 1            
        }, 500);

        // clone image
        jQuery('.item').each(function () {
            var el = jQuery(this);
            el.css({
                "position": "absolute"
            }).wrap("<div class='img_wrapper' style='display: inline-flex; margin-bottom: 1em;'>").clone().addClass('item_base').css({
                "position": "absolute",
                'z-index': 100,
                "opacity": "1"
            }).insertAfter(el).queue(function () {
                var el = jQuery(this);
                el.parent().css({
                    "width": this.width,
                    "height": this.height
                });
                el.dequeue();
            });
        });

        var toColor = '#538128'; // qui inserisci il colore cui vuoi far virare le immagini (ho messo rosso per dimostrazione);        
        jQuery('.item_base').each(function () {
            tintImage(this, toColor);
        });

        jQuery('.img_wrapper').mouseover(function () {
            jQuery(this).children('.item_base').stop().animate({
                opacity: 0,
            }, 500);
        });
        jQuery('.img_wrapper').mouseout(function () {
            jQuery(this).children('.item_base').animate({
                opacity: 1,
            }, 500);
        });
    });
});

function tintImage(imgElement, tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement, 0, 0);

    var map = ctx.getImageData(0, 0, imgElement.offsetWidth, imgElement.offsetHeight);
    var imdata = map.data;

    // convert image to grayscale
    var r, g, b, avg;
    for (var p = 0, len = imdata.length; p < len; p += 4) {
        r = imdata[p];
        g = imdata[p + 1];
        b = imdata[p + 2];

        avg = Math.floor((r + g + b) / 3);

        imdata[p] = imdata[p + 1] = imdata[p + 2] = avg;
    }

    ctx.putImageData(map, 0, 0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

Vi chiedo una mano a risolvere il mio problema e a rendere la mia immagine responsive. Vi ringrazio tantissimo.
 
Discussioni simili
Autore Titolo Forum Risposte Data
ecosito [WordPress] Immagine slider responsive su mobile WordPress 0
ecosito [WordPress] Immagine di testata responsive su mobile WordPress 0
L Immagine responsive HTML e CSS 1
L Immagine responsive PHP 3
C immagine non responsive HTML e CSS 7
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 6
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A Php variabile immagine inesistente PHP 4
R [PHP] Testo su immagine al passaggio del mouse PHP 2
L [PHP] controllo dimensione immagine per il resize PHP 2
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
Shyson [HTML] Sovrapporre un'immagine su un'altra HTML e CSS 2
A [PHP] Segnalazione in up-load immagine PHP 2
C [PHP] Scrivere testo su immagine PHP 3
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A [WordPress] Link multiplo su immagine WordPress 9
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0
A Salvare immagine ridimensionata in MySql con GD PHP 12
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
Merlina3377 [PHP] modificare file su form immagine thump PHP 1
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
U COLORAZIONE IMMAGINE IN BIANCO E NERO. Presentati al Forum 0
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
O [PHP] problema estrazione immagine da db PHP 12
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
K [HTML] Thumbnail (mouseover) + Popup immagine HTML e CSS 1

Discussioni simili