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.
|
1 2 3 4 5 6 7 8 |
<!-- Load jQuery Library First --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- Load raphael library --> <script type="text/javascript" src="js/raphael-min.js"></script> <!-- Load productColorizer Plugin Next --> <script type="text/javascript" src="js/jquery.productColorizer.pack.js"></script> |
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
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $('.product').productColorizer(); }); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="product"> <div class="product-img"> <img src="images/default.jpg" /> <img id="mask" class="mask" src="images/mask.png" /> </div> <h3>Product Title</h3> <p>Product Description</p> <h4>Choose a Color:</h4> <div class="swatch"> <a rel="32,223,95" href="#mask" title="Green">Green</a> <a rel="255,211,8" href="#mask" title="Yellow">Yellow</a> <a rel="255,101,8" href="#mask" title="Orange">Orange</a> <a rel="16,200,255" href="#mask" title="Blue">Blue</a> <a rel="142,8,255" href="#mask" title="Purple">Purple</a> <a rel="245,25,45" href="#mask" title="Red">Red</a> </div> </div> |
Per ulteriori informazioni e documentazione consultate il sito dell’autore productColorizer. Buon lavoro!
Demo Download Info | Sito Web | Autore
| Articolo pubblicato 5 anni fa nella categoria 
