Pubblicato il 26/01/10 - aggiornato il  | 18 commenti :

Come creare una galleria fotografica in una pagina statica con l'effetto Lytebox.

Le pagine statiche hanno aperto diverse prospettive di sviluppo del blog. La personalizzazione di una pagina statica attraverso l'eliminazione della sidebar dà modo di avere a disposizione un intero layout per inserirci cose che prima non potevamo fare.
Se abbiamo creato delle pagine statiche sufficientemente larghe possiamo anche inserire una galleria fotografica che possa fare da supporto al blog. Penso a blog aziendali che vogliono presentare le foto dei loro prodotti in uno stesso luogo oppure a siti immobiliari con le foto delle abitazioni in catalogo. Praticamente tutti i blog in cui le immagini hanno un'importanza fondamentale potrebbero essere interessati a creare una tale galleria.
Questa può tranquillamente essere inserita senza nessun effetto speciale. In questo caso potrebbe essere opportuno inserire le foto all'interno di una tabella. Nell'editor di Blogger non esiste la possibilità di generare una tabella ma si può usare Windows Live Writer.
Se si vuole inserire degli effetti si può scegliere tra Expando, Lightbox o Lytebox tra quelli che ho presentato in questo blog. Nel mio blog di prova ho creato una pagina statica denominata Gallery con diverse foto incorporate con l'effetto Lytebox.
Traccio le linee che ho seguito per la realizzazione
  1. Ho creato una pagina statica -
  2. Ho eliminato la sidebar e allargato l'area di layout -
  3. Ho modificato il modello incollando il codice di Lytebox -
Si tratta in sostanza di andare in Layout > Modifica HTML, cercare la riga </head> e, immediatamente sopra, incollare il seguente codice

<!--EFFETTO LYTEBOX INIZIO-->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-1.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js' type='text/javascript'/>
<!--EFFETTO LYTEBOX FINE-http://www.ideepercomputeredinternet.com-->

Per rendere effettivo questo effetto bisogna inserire l'attributo rel="lytebox" nel link dell'immagine, come illustrato nell'articolo. Se si vuole creare una galleria occorre inserire rel="lytebox[nome-galleria]". Nel caso di uno slideshow la stringa diventa rel="lyteshow[nome-slideshow]".
Per far questo vi consiglio di utilizzare Windows Live Writer perché è più semplice e immediato. Le immagini possono anche essere inserite in una tabella. Non si può pubblicare nel blog la galleria così editata, occorre quindi andare su Origine, selezionare tutto il codice della galleria di foto, copiarlo e incollarlo nell'editor della pagina di Blogger in modalità HTML.
galleria
Nella pagina statica di dimostrazione non ho inserito la tabella, quindi il lavoro non è accuratissimo. Ho però inserito due gallerie fotografiche e uno slideshow.
Le due gallerie sono state realizzate mediante l'inserimento nei link delle stringhe lytebox[tramonto] e lytebox[mare] mentre lo slideshow è stato creato inserendo lyteshow[belledonne]. Nel caso delle gallerie, quando si clicca su una foto, questa si evidenzia e mostra i due collegamenti per andare alla foto successiva o a quella precedente
galleria-2
il tutto in uno sfondo oscurato per far risaltare meglio l'immagine. Nel caso dello slideshow, quando si clicca su una foto si passa automaticamente alla successiva dopo tre secondi come in un filmato. Per iniziare bisogna cliccare sul simbolo di Play. E' presente anche il bottone di pausa per soffermarsi su una immagine in particolare
galleria-4
Se si clicca sulla prima foto non occorrerà andare su Play ma la riproduzione inizierà in automatico. Alla fine dello slideshow l'effetto terminerà senza bisogno di cliccare su Close.




18 commenti :

  1. Ciao Parsifal, complimenti per il blog sempre ricco di spunti. E' possibile creare la pagina statica solo con una carellata di video?

    RispondiElimina
  2. @Nobilita85
    Certo che è possibile. Anzi utilizzando Apture puoi inserirne anche fino a 70.
    per come installare Apture leggi qua
    http://parsifal32.blogspot.com/2010/01/apture-arricchisce-di-contenuti.html
    In alternativa potresti diminuirne le dimensioni ma la pagina diventerebbe pesantissima
    Ciao

    RispondiElimina
  3. grz della risposta domani provo ora è troppo tardi poi ti faccio sapere grz 1000 ... nobita non nobilita ^_^

    RispondiElimina
  4. Ciao... volevo chiederti una cosa che nn riesco a fare... ho un blog su blogger... e il mio intento sarebbe quello di creare una gallery di foto... ma ogni foto dovrebbe poi rimandare ad un post... cioè cliccando su ogni miniatura vorrei si aprisse il post corrispondente alla foto... come si fa??????? Grazie in anticipo .)

    RispondiElimina
  5. @Soffio di Dea
    E' semplicissimo. Se usi Windows Live Writer selezioni la foto e inserisci il collegamento al post che desideri. Puoi farlo anche con l'editor di Blogger ma il risultato estetico lascia più a desiderare.
    Ti ricordo però che le foto devono essere caricate su un hosting gratuito tipo Skydrive e che se usi WLW devi andare in modalità HTML, selezionare e copiare tutto il codice quindi incollarlo nell'editor della pagina statica.
    Non so se sono stato chiaro; se non lo sono stato fammi una domanda più specifica.
    Ciao

    RispondiElimina
  6. oddio nn ho capito molto ma nn è assolutamente colpa tua :) sono alle prime armi... dovrò allora prima di tutto scaricare wlw e poi vedere come fare in base alla tua spiegazione.
    A questo punto ti chiedo altre 2 cose (ne approfitto) ...
    1)le foto che carico su bloggher vanno in picasa e a quanto ho letto google ci regala 1 gb di foto da caricare... una volta esaurito quello che faccio?
    E se voglio servirmi di un altro spazio quale posso utilizzare?
    2)widget commenti recenti... offerto da google... ha colori e sfondo che stonano con il mio blog... come posso modificarli?
    grazie ancora per la tua gentilezza...

    RispondiElimina
  7. @soffio di dea
    Quando hai esaurito lo spazio, che comunque è moltissimo, puoi acquistarne molto altro al modico presso di 5 dollari l'anno (sempre su Picasa).
    Se i widget di Google non ti piacciono puoi toglierli e sostituirli con altri oppure anche con nessuno. Non sei obbligata a tenerli.
    Ciao

    RispondiElimina
  8. Grazie di avermi risposto!
    Attenderò!!!
    Ciao
    CS

    RispondiElimina
  9. Ciao,ho seguito il percorso da te indicato per pubblicare delle foto su di una pagina statica usando WLW. Ho inserito una tabella inserendovi le immagini ai loro posti e in "origine" ho copiato il codice html e lo ho incollato nell'editor della pagina in modalità html.Ma quando ho pubblicato il tutto,sorpresa...la tabella la vedo ma le foto no.All'interno di ogni casella appare l'icona dell'immagine "scollegata". Come mai?
    Attendo con pazienza ma interesse una tua cordiale risposta.
    Grazie

    RispondiElimina
  10. @6nervoso
    Devo dire che ho consigliato di usare una tabella ma che non ho testato effettivamente il suo funzionamento. Può darsi che la cosa non sia fattibile per qualche ragione che mi è ignota e che quindi dovresti ripiegare su un allineamento "manuale" delle foto che, come puoi vedere nella demo, funziona.
    Una cosa utile in questo senso sarebbe quella di prendere immagini e miniature tutte delle stesse dimensioni.
    Ciao

    RispondiElimina
  11. Uauu! Meraviglioso! Esattamente quello che cercavo!
    Ho provato e tutto sembra funzionare bene, l'unica cosa è che non utilizzo Windows Live Writer perchè non sono su Windows, quindi ho caricato le immagini direttamente da blogger e modificato il codice html direttamente da lì.
    Sia l'effetto per le immagini singole che per la galleria funziona.
    Il problema è che non riesco a tenerle allineate ordinatamente.
    Come posso fare per avere lo stesso spazio di distanza tra un immagine e l'altra e fare in modo che quando aggiungo una nuova immagine questa vada a seguire l'ultima presente?
    (In poche parole vorrei risultassero un pò come nella Gallery del tuo sito di prova).

    Intanto, grazie infinite per questa guida... preziosissima!

    RispondiElimina
  12. @inchiostronero
    Prova a inserire le immagini all'interno di una tabella. Apri l'editor di BVlogger, vai su Modifica HTML e non su Scrivi, incolli il codice di una tabella che puoi trovare e personalizzare qui
    http://xhtml.html.it/guide/lezione/1682/tabella-struttura-di-base/
    quindi inserisci le immagini ritornando su Scrivi. Non so se funzionerà perché non ho testato il metodo. Le immagini nella mia pagina di prova le ho inserite con WLW.
    Ciao

    RispondiElimina
  13. @parisifal32
    Non ho parole!
    Grazie per la celere risposta... ho finalmente risolto!
    Ho utilizzato una tabella come da te suggerito e tutto funziona a meraviglia.
    Approfitto per chiederti una cosa sempre riguardo la visualizzazione tramite lytebox (non me ne volere):
    credi sia possibile stabilire/impostare una grandezza standard per le immagini presenti nella pagina che invece, una volta cliccate, potrebbero avere dimensioni differenti nella finestra lytebox?
    (al momento attraverso l'editor di Blogger, su Scrivi, imposto la dimensione su 'Piccola').

    Beh, hai reso questa mia giornata meno tormentata da grattacapi... non so davvero come ringraziarti.

    RispondiElimina
  14. @inchiostronero
    Con WLW si possono predeterminare le dimensioni. Con l'editor di Blogger dovresti andare in Modifica HTML e guardare i valori width e heght di ciascuna immagine, modificarli mantenendo le proporzioni. Il primo è la larghezza, il secondo l'altezza

    RispondiElimina
  15. @parsifal32
    Fatto! Ho sistemato anche le dimensioni e, ti dirò di più, ho anche cambiato la favicon inserendone una personalizzata grazie ad un'altra guida postata da te... e funziona anche con Chromium (Chrome per linux)!
    Grazie davvero per tutto.
    A presto.

    RispondiElimina
  16. ciao ho fatto tutto come descritto e funziona bene tranne per il fatto che non mi compare il nome della galleria come da te (ad esempio: foto di mare)
    inserisco in lytebox[nomegalleria] il nome della galleria, ma non compare!

    RispondiElimina
  17. @Paolo Scanu
    Il nome della galleria ce lo devi mettere tu. Lo digiti prima di inserire la tabella e gli dai le dimensioni e il colore che preferisci.

    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.