CSS Box

Ritratto di Vanni

Ecco un altro semplicissimo ed utilissimo modulo per creare gallerie d'immagini. La "forza" di questo modulo è che non utilizza librerie esterne come jQuery, ma usa solo puro CSS; può inoltre essere integrato con altri moduli tra cui views.

Cliccando sull'immagine (che magari è solo un thumb), viene creato un overlay con al centro l'immagine (o la galleria d'immagini) a dimensioni reali.

Qui trovi il modulo CSS Box.

Qui puoi trovare la descrizione di altri moduli per gestire immagini.

Descrizione del modulo CSS Box

  • installare e abilitare il modulo
  • andare nella sua pagina di configurazione
  • qui si può scegliere se mostrare le frecce avanti e indietro, e il testo che devono contenere (come vedrete nella pagina di esempio, le frecce non sono molto visibili a causa del loro colore, un ritocchino al loro stile CSS sarebbe opportuno) 
  • pagina di configurazione del modulo CSS Box
  • ora creare un nuovo content type o inserire un campo immagine in un "tipo di contenuto" esistente
  • durante la creazione del campo immagine scegliere se il campo deve avere una o più immagini, e mettere la spunta su "testo alternativo" e "titolo immagine" se vogliamo che vengano visualizzati nella galleria 
  • creazione di due nuovi campi immagini all'interno della pagina
  • passare al tab "gestione visualizzazione"
  • nella "select list" sotto a "formato" scegliere CssBox
  • cliccare nella rotellina a destra per configurare il campo immagine
  • scegliere la grandezza dell'immagine di partenza, quella della galleria, quale testo mostrare e l'output del popup
  • configurazione visualizzazione del campo immagine
  • il testo "Caption", cioè quello che verrà visualizzato come descrizione dell'immagine può essere scelto tra: titolo o alt text dell'immagine, titolo della pagina o da un token
  • l'output del popup è identico in entrambe le soluzioni, con o senza Javascript, ma come specificato nella pagina del modulo, usando il codice: document.write(), si ha un approccio maggiormente SEO friendly
  • creare ora un nuovo nodo ed inserire immagini nei campi CssBox
  • questa è la mia pagina di esempio del modulo CSS Box

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
9 + 3 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.