Pubblicato il 05/04/11e aggiornato il

Space Gallery per una originale galleria di foto basata su JQuery.

Le gallerie di foto più accattivanti sono quelle che hanno effetti dinamici. Solitamente si tratta di Slideshow che presentano le foto con particolari effetti di transizione. La maggior parte di quest'ultimi è basata su Libreria Javascript JQuery. Space Gallery è sostanzialmente diversa da tutte le altre gallerie perché le immagini sono posizionate una dietro all'altra con un interessante effetto 3D.

space gallery effetto 3d

Per passare da una immagine all'altra occorre cliccarci sopra con il mouse. Ho postato la galleria sul web

Si tratta di un effetto davvero interessante che credo piacerà a molti. L'unico difetto è che non si possono inserire link a post o a siti. Serve quindi per fare una raccolta eminentemente fotografica. Per l'installazione si va su Design > Modifica HTML e si cerca la solita riga </head>, subito sopra si incolla il codice seguente che ho postato su Google Documenti

Occorre adesso cercare l'altra riga ]]></b:skin> e incollare subito sopra quest'altro codice

Si salva il modello. In questo secondo codice si devono scegliere le dimensioni delle immagini e lo stile del bordo. Se si lasciano invariati, le foto saranno larghe 400 pixel e il bordo sarà solido, dello spessore di un pixel e avrà questo colore #637A8F. I più inesperti possono consultare il post sui codici dei colori. Per la creazione vera e propria della galleria si utilizza questo codice di base

<div class="spacegallery" id="myGallery">
<img src="https://lh4.googleusercontent.com/_nT13UtBmmiU/TZrbwYZka_I/AAAAAAAASvQ/Bi_gRlVQ6Sg/luce.jpg" alt="Luce"/>
<img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TZrZnQUmeZI/AAAAAAAASu4/vEhXwq6fZ8Q/donna-colibri.jpg" alt="Donna 1"/>
<img src="https://lh3.googleusercontent.com/_nT13UtBmmiU/TZrZrg9u7zI/AAAAAAAASu8/Jn-ITDfcVd8/donna-elegante.jpg" alt="Donna 2"/>
<img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TZrZv9BoJ4I/AAAAAAAASvA/jVLfYoWQgZc/donna-farfalla.jpg" alt="Donna 3"/>
<img src="https://lh5.googleusercontent.com/_nT13UtBmmiU/TZrZ0CeOBBI/AAAAAAAASvE/mGVq6LT48G0/donna-fiorita.jpg" alt="Donna 4"/>
</div>

Ho lasciato volutamente gli URL delle immagini che ho caricato su Picasa per aiutarvi nel testare il corretto funzionamento della galleria. Si devono inserire gli indirizzi delle foto, in rosso e riempire tag Alt relativo a ciascuna di essa, in blu. Naturalmente si possono mettere anche un numero di immagini sensibilmente superiore a cinque. Il codice così creato si incolla su Design > Aggiungi un gadget > HTML/Javascript e si posiziona con il mouse. Non escludo che possa funzionare anche se incollato in una pagina statica in Modalità HTML con l'opzione post "Ignora nuove righe". La prima immagine visualizzata nella galleria sarà l'ultima dell'elenco.

Fonte | Eyecon Space Gallery - Si possono modificare alcuni parametri come la prospettiva, la durata e la scala consultando Implement -





8 commenti :

  1. bellissima.
    non si può agire sull'onmouseover anziché sull'onclick?
    non è così immediato che cliccando si passa ad altre immagini...
    (parere strettamente personale, eh...)

    RispondiElimina
  2. @Giorgiogal
    Ci avevo anche pensato ma nei tre javascript dell'effetto non ho trovato un solo onclick. Ce ne sono tre nel primo JS che è quello fondamentale del JQuery. Non lo so che cosa possa succedere a cambiare tutte e tre le occorrenze con onmouseover :)

    RispondiElimina
  3. @Ernesto T. molto bello come effetto..però secondo me annoia un po il discorso di cliccarci sopra?? non cì nessuna alternativa?? nemmeno per inserire il link riguardo al post??

    RispondiElimina
  4. peccato non sia dinamico... ma tanto prima o poi qlcno lo farà tale ne sono convinta. Dobbiamo solo aspettare :)

    RispondiElimina
  5. @BrilliDiLuce
    Il codice di questo effetto è piuttosto corposo ed è stato realizzato dal sito che ho linkato. Non è che si possa intervenire più di tanto. I link sono impossibili al momento per il resto si potrebbe provare qualcosa.

    RispondiElimina
  6. @Corvo Michele
    In javascript onclick significa cliccare sul sinistro del mouse e onmouseover è il passare con il mouse sopra a un oggetto.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.