Image Zoomer

Ritratto di Vanni

In molti siti di e-commerce e non solo, si può passare col mouse sopra le varie fotografie illustrative dei prodotti e subito si ha un effetto zoom dell’immagine. Cioè, si apre una piccola finestra che ingrandisce, i vari dettagli dell’immagine, proprio mentre ci stiamo passando sopra col puntatore del mouse.

Possiamo avere lo stesso effetto, stile lente d’ingrandimento, anche per le fotografie che carichiamo nel nostro sito con Drupal 7, basta installare il modulo Image Zoomer e il modulo jQuery Update e almeno una delle librerie proposte, scegliendo l’effetto lente che si vuole dare alle proprie immagini, visitando la relativa pagina d’esempio: effetto lente 1 o effetto lente 2.

Scelto l’effetto lente che si desidera, scaricare una libreria: per l’effetto 1 cliccare qui e sulla pagina che si apre, fare: click destro col mouse, slava con nome, salva. Per l’effetto 2 cliccare qui per il file js, qui per il file css e qui per il gif animato, fare: click destro col mouse, slava con nome, salva.

Descrizione del modulo Image Zoomer

  • Salvare il/i file della libreria in un apposito folder che dobbiamo creare e nominare “imagezoomer”, inserire tale folder nella cartella “libraries” presente in sites/all (se la cartella non c’è, bisogna crearla)
  • Installare e abilitare i moduli Image Zoomer e jQuery Update
  • Possiamo configurare il modulo a nostro piacimento, modificando anche la potenza d’ingrandimento della “lente”, entrambe le librerie, possono essere configurate dal modulo Image Zoomer
  • pagina di configurazione del modulo Image Zoomer e delle sue librerie
  • Creare o modificare il content type che dovrà contenere le nostre immagini e nella sezione “manage display” sotto la voce "format", scegliere il nome della libreria che avevamo installato, configurare le dimensioni dell’immagine tramite la rotellina sulla sinistra, salvare
  • nuovo content type con le immagini da zoomare
  • Creare un nuovo nodo con le relative immagini
  • Effetto Power Zoomerimmagine con libreria ed effetto Power zoomer
  • Effetto Featured Zoomerimmagine con libreria ed effetto Featured Zoomer

ATTENZIONE: potrebbero esserci dei problemi tra la jQuery utilizzata e il tema che avete nel sito, ad esempio con il tema di questo sito ho avuto qualche difficoltà, mentre con Bartik e Mayo non ho riscontrato problemi. Consiglio: provare a cambiare la versione di jQuery usata.

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
6 + 1 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.