productColorizer – Visualizzare velocemente un prodotto in diversi colori

 

productColorizer è un plugin jQuery che consente di visualizzare velocemente un prodotto in diversi colori. Il plugin utilizza solo due immagini del prodotto per creare l’effetto e si implementa con una facile configurazione. Il plugin funziona con tutti i browser principali, tra cui IE7+.
 

Utilizzo base

Scaricare, decomprimere, e caricare i file sul proprio server. Inserire i collegamente a tutti i file necessari all’interno del tag <HEAD> assicurandosi di inserire anche la libreria jQuery.

Fatto ciò, avremo bisogno di due immagini, la foto del prodotto ed una maschera. Accertarsi che le parti del prodotto che si desidera colorare siano molto chiare e siano quasi prive di alcun colore. Salvata l’immagine, creeremo ora la maschera.

Esempio immagine prodotto + maschera
    

Per creare la maschera, potete utilizzare lo strumento penna nel vostro editor di immagini preferito e tracciare le parti dell’immagine che si desidera colorate. Dopo aver tracciato l’intera immagine, selezionare la forma ed eliminate l’area selezionata della foto. Salvate questa immagine come PNG trasparente e copiate entrambe le immagini sul server.

Inizializzazione del plugin

Esempio di codice HTML
Il prodotto sarà contenuto in un div con classe denominata product. All’interno del div product si avrà un div prodotto-img contenente sia l’immagine di default del prodotto che l’immagine della maschera.
Dopo ciò si avrà un div con classe denominata swatch contenente i collegamenti a tutte le opzioni di colore che si desidera fornire.

Per ulteriori informazioni e documentazione consultate il sito dell’autore productColorizer. Buon lavoro!
 
Demo Download Info | Sito Web | Autore

pixolo ads
Cambia Copertina
1208 | Articolo pubblicato 4 anni fa nella categoria jQuery - Javascript.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
2
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×