E se volessimo delle Slide Show in HTML?

Si dece che mangiando viene l'appetito ed è vero.

Dopo aver provato ad istruire dei programmini in VBA per creare delle pagine HTML ho voluto provare a creare delle semplici Slide Show per ottenere la visualizzazione in sequenza di immagini.

Naturalmente oltre all'appetito si affinano anche le tecniche per creare, tramite il VBA, delle applicazioni sempre più valide e versatili.

Con l'articolo Importare immagini in una pagina HTML abbiamo visto come raccogliere in una pagina HTML delle immagini per una semplice visualizzazione di un certo catalogo.

Ora vorremmo andare oltre: oltre a vedere le miniature delle immagini che vogliamo mostrare, ne vorremmo vedere anche le dimensioni reali e le vogliamo vedere in sequenza.

In giro per il Web si trovano dei pacchetti molto professionali e potenti, ma a volte difficili da implementare nei nostri lavori o troppo pesanti o troppo elaborati per il compito che debbono assolvere, o costosi, o coperti da copyright per cui dobbiamo lasciare il marchio dell'autore.

Eseguire manualmente questo lavoro sarebbe lungo ed estenuante, perciò ho voluto provare a cimentarmi in questo lavoro e ci sono riuscito. Questo ne è piccolo esempio . Non è perfetto, ma sicuramente è perfezionabile da chi è capace di lavorare con gli applicativi per il Web: HTML, CSS, JS.

Aiutato da uno script JS ho ottenuto che le pagine dello Slide Show abbiano, più o meno, questo aspetto

La situazione si complica per la creazione di nuove pagine che, dopo il clik sulla miniatura si debbono aprire nella nuova finestra creata dallo script JS.

Non mi perdo qui sul lavoro teorico che ho dovuto eseguire per arrivare a queste conclusioni, ma, come il solito, passo a descrivere il lavoro preparatorio ed al codice usato successivamente.

Preparazione del lavoro:

Preparare due pagine Master:

• slide_origine.htm che possiamo formattare come più ci piace e dove possiamo inserire tutti i contenuti che vogliamo. Al posto della tabella che dovrà accogliere le miniature mettiamo, nel codice HTML questo segnalibro:
  <!---Inserisci tabella --->
  Se vogliamo possiamo aggiungere altri contenuti ed informazioni
• foto_origine.htm anche questa modificabile come più ci piace ma inserendo questi segnaposti:
  <!--- menu sinistro --->
  <!--- menu destro --->
  <!--- immagine --->
  Questi segnaposti vanno messi lì dove vogliamo questi elementi.
• nella cartella che contiene queste due pagine Master creiamo altre due sottocartelle:
  • clipart che conterrà le immagini a grandezza naturale
  • tumbs che conterrà le miniature
• le due categorie di immagini avranno lo stesso nome e la stessa estensione ponendo attenzione anche alle maiuscole ed alle minuscole
• Per risparmiare codice nel cercare e costruire le stringhe che servono per il lavoro preparo sul foglio alcune notizie che mi serviranno in seguito:

Attenzione: nelle ultime tre stringhe le parole evidenziate sono dei segnaposto per inserire dei giusti riferimenti agli elementi a cui si riferiscono.

Per Esempio: la stringa <a href="javascript:Centrata('pagina')"><img src="foto" alt="immagine" /></a> verrà trasformata in: <a href="javascript:Centrata('01.htm')"><img src="tumbs/01.jpg" alt="1 di 20"></a>

Fatto questo siamo pronti a passare nel VBA per scrivere le istruzioni che occorrono.

Il lavoro in VBA

Questa volta il lavoro eseguito nel VBA è leggermente complesso:

Intanto valorizziamo tutte le variabili che ci servono per il lavoro

Reperimento dei files delle immagini dal disco fisso

Visto che questa volta i nomi dei files delle immagini, sia grandi che miniature, vengono usati più volte ed in più contesti, caricandoli dal disco, li mettiamo in due matrici:

• nella matrice Immagini() le immagini grandi
• nella matrice Miniature() le miniature

Le due istruzioni evidenziate richiamano una funzione che restituisce il tipo di estensione abbinato al file

Creazione delle pagine che contengono le immagini e che si debbono aprire nello Slide Show

Ora che abbiamo l'elenco le immagini, per ognuna di queste creiamo una pagina come questa

Iniziamo subito con lo scorrere la matrice in cui abbiamo memorizzato i nomi delle immagini grandi (quelle contenute nella cartella clipart.

Per ogni nome definiamo subito un nome da dare alla pagina HTML che deve contenere l'immagine relativa. Se l'immagine si chiama "paesaggio.jpg" la pagina da creare sarà "paesaggio.htm".

Il solo nome dell'immagine lo troviamo tramite la funzione "NomeImmagine"

Definito questo nome vengono aperti i due soliti canali:

• uno per leggere la pagina master "foto_origine.htm"
• l'altro per creare o riscrivere la pagina relativa all'immagive "nomeImmagine.htm"

Nella pagina master abbiamo tre segnaposti:

• <!--- menu sinistro --->
• <!--- menu destro --->
• <!--- immagine --->

posti nelle locazioni dove vogliamo questi elementi al loro posto.

Per cui nel codice, mentre viene letto il contenuto della pagina master, si esegue la ricerca di questi segnaposti:

Line Input #Lu1, DataLine
...................

1. If DataLine = MenuSinistro Then
   ............................
2. ElseIf DataLine = MenuDestro Then
   ......................
3. ElseIf DataLine = Inserisci_Immagine Then
   .........................
4. ElseIf DataLine = "<h1>immagine</h1>" Then
   ..................................
5. Else
   ...............

Se si incontra uno di questi segnaposti ci si comporta di conseguenza.

Nel primo caso si verifica che il contatore C2 sia diverso da 0 (zero)

• se è uguale a 0, si scrive il messaggio "inizio"
• altrimenti si richiama l'immagine precedente a quella corrente:
  Temp1 = Replace(LinkSuImmagine, "pagina", NomeImmagine(Immagini(C2 - 1))
  Print #Lu2, Replace(Temp1, "foto", Cartella_Tumbs & Miniature(C2 - 1))
  apportando le opportune modifiche alla stringa memorizzata nella variabile LinkSuImmagine
  <a href="javascript:Centrata('pagina')"><img src="foto" alt="immagine" /></a>
  trasformandola in una cosa del genere:
  <a href="javascript:Centrata('01.htm')"><img src="tumbs/01.jpg" alt="immagine"></a>

Nel secondo caso ci si comporta in modo analogo ma verificando che il contatore C2 sia inferiore al numero totale delle immagini, e richiamando l'immagine successiva a quella corrente

Nel terzo caso viene semplicemente richiamata l'immagine puntata dal contatore per mezzo della stringa memorizzata nella variabile MettiImmagine
<img src="immagine" alt="apri" />
trasformandola opportunamente in
<img src="clipart/02.jpg" alt="apri">

Nel quarto caso viene modificato anche il titolo <h1>immagine</h1>

Se nessuno di questi casi si verifica, quel che viene letto dal documento master viene scritto nelle varie pagine che dovranno accogliere l'imagine da visualizzare.

Creazione della pagina principale da cui si parte con lo slidershow

Per la creazione della pagina principale che contiene tutte le miniature e da cui si parte con lo slidershow la metodica non cambia molto da quella vista nella pagina precedente, trannche che in questo caso vengono usate sulle immagini un link che porta alla pagina da richiamare:

<a href="javascript:Centrata('02.htm')"><img src="tumbs/02.jpg" alt="2 di 20"></a>

Il codice quindi lo risparmio e vi rimando all'analisi effettuata in questa pagina rispetto alla quale ho apportato poche variazioni cercando di migliorare il codice già presentato.

Anche questa volta vi do il file su cui ho lavorato .

Nello .zip che scaricate troverete:

• una cartella clipart
• una cartella tumbs
• il file slidershow_in_html.xls
• la pagina guida foto_origine.htm
• la pagina guida slide_origine.htm
• un file JS funzioni_js.js

Tutti questi files e cartelle verranno scompattati nella cartella slider_show. Lasciate tutto così come è disposto.

Se questo può tornarvi utile ne sarò lieto.