canvas css jquery modifica per l'effetto hover
- Questo topic ha 25 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 8 anni, 8 mesi fa da Paolo.
- AutorePost
- 20 Gennaio 2014 alle 15:04 #5713PaoloPartecipante
Grazie mille jqueryItalia. Sto confrontando le ultime due versioni, per capire le modifiche. Ti ringrazio infinitamente!
22 Gennaio 2014 alle 19:42 #5749PaoloPartecipanteCiao JqueryItalia, non sai quanto mi pesa continuare questa discussione, mi sento negato. Ho inserito il tuo script nel mio tema, molto semplice che sto creando. Ho dei problemi, che non sono ancora riuscito a risolvere. Ti lascio il link, sarà molto più semplice capire quale è il problema: mia pagina
Mi daresti qualche suggerimento? vorrei modificare io lo script, così per capire meglio la questione. Ti ringrazio infinitamente.
22 Gennaio 2014 alle 20:02 #5750PaoloPartecipanteCaro JQueryItalia, mi scuso infinitamente con te, ho risolto. Il div con classe img_wrapper deve avere la proprietà display: inline-flex. Ti ringrazio per l’infinita pazienza e mi scuso per tutto il disturbo e la valanga di messaggi. Grazie mille.
22 Gennaio 2014 alle 21:00 #5751jqueryitaliaAmministratoreCiao Paolo.
Siamo qui per questo: non ti preoccupare 😉
Se proprio vouio “sdebitarti” fai una piccola donazione che ci servirà per mantenere il server 😛Hai comunque ancora dei problemi: ci sono due errori javascript che non permettono la corretta visualizzazione (almeno nella homepage).
Gli errori sono i seguenti:
ReferenceError: jQuery is not defined })(jQuery); // fadeIn.js (riga 9) SyntaxError: illegal character $(#footer).before('<div id="sticky-footer-push"></div>'); stichyFooter.js //(linea 16, col 14)
Ti do alcune dritte per risolverli:
- il primo errore (relativo allo script fadeIn.js) lo risolvi semplicemente posizionando la chiamata dello script DOPO e non prima la funzione wordpress wp_head() nel file header.php, opppure posizionando la chiamata nel footer.php;
- il secondo errore è dovuto al fatto che mancano gli apici: sostiusci $(#footer).before(… con $(‘#footer’).before(…
Fatto questo dovrebbe funzionare tutto correttamente 😉
Buon lavoro!
22 Gennaio 2014 alle 22:11 #5754PaoloPartecipanteGrazie mille Jquery, Correggo subito gli errori che mi hai indicato.
Ritornando al tuo script, c’è una cosa che vorrei dirti e che sono riuscito a capire, però magari c’è un modo automatico. Riporto parte del tuo codice:
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, 320, 240); //se le immagini sono più grandi bisogna correggere questi valori. Io ad esempio ho una immagine 300x400. C'è un modo alternativo? 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; }
C’è un modo alternativo per far sì che non sia necessario impostare altezza e larghezza? Per me non è un problema impostare di volta in volta questi parametri, chiedevo tanto per…
Grazie. Farò una donazione sicuramente.
22 Gennaio 2014 alle 22:58 #5755jqueryitaliaAmministratoreLarghezza ed altezza sono necessari in quanto viene utilizzato un canvas per ricolorare l’immagine: ciò implica che se non passassi tali parametri la “colorazione” avverrebbe in maniera errata.
22 Gennaio 2014 alle 23:11 #5757PaoloPartecipanteSi, chiaro, mi chiedo solo se non ci sia un metodo per passarli dinamicamente, senza specificare esattamente la larghezza o l’altezza in pixel. Se ad esempio dovessi richiamare la stessa funzione per un’altra immagine con dimensioni diverse presente in un’altra pagina? Scusami tanto se continuo.
23 Gennaio 2014 alle 00:58 #5759jqueryitaliaAmministratoreMa tu non devi specificare nulla: è la funzione che estrae le dimensioni dell’immagine
Come puoi notare dagli esempi, infatti, io non ho MAI specificato le dimensioni delle immagini 😉23 Gennaio 2014 alle 01:02 #5760jqueryitaliaAmministratoreDimenticavo: con la tua richiesta abbiamo creato un tutorial 😉
23 Gennaio 2014 alle 01:54 #5761PaoloPartecipanteHo letto il tutorial, bello, molto bello! In questi giorni farò una ricarica alla mia postepay, ci sta tutta la donazione! Anche perchè non saprei proprio come ringraziarti.
Per quanto riguarda la dimensione delle immagini… c’è questa riga di codice nella funzione
var map = ctx.getImageData(0, 0, 320, 240);
(sono le dimensioni delle immagini piccole di esempio). Se ho immagini più grandi, tipo la mia 300×400, il canvas colorato è più piccolo. Però io ho pensato di metterevar map = ctx.getImageData(0, 0, 1000, 1000);
così posso adattarla anche ad altre immagini. - AutorePost
- Devi essere connesso per rispondere a questo topic.