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 esempio 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 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 esempio

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:

 

  Le strringhe usate le variabili Descrizione
  A B C
1 C:\immagini\slidershow Cartella La cartella principale
2 C:\immagini\slidershow\clipart CartellaImmagini La cartella che contiene le immagini principali
3 C:\immagini\slidershow\tumbs CartellaTumbs La cartella che contiene le miniature
4 slide_origine.htm FileMaster la pagina modello per la pagina principale
5 Slideshow.htm FileDest La pagina da creare
6 4 NumCol N° di colonne da inserire nella pagina
7 <!---Inserisci tabella ---> InserisciTabella Segnaposto per l'inserimento della tabella
8 clipart Cartella_Clipart la cartella che contiene le immagini
9 tumbs Cartella_Tumbs la cartella che contiene le miniature
10 foto_origine.htm FotoMaster la pagina modello per la pagina della immagine singola
11 <!--- immagine ---> Inserisci_Immagine segnaposto per l'immagine nello slider
12 <!--- menu sinistro ---> MenuSinistro segnaposto per il menù "Indietro" nello slider
13 <!--- menu destro ---> MenuDestro segnaposto per il menù "Avanti" nello slider
14 <a href="javascript:Centrata('pagina')"><img src="foto" alt="immagine" /></a> LinkSuImmagine l'istruzione da mettere sull'immagine per far aprire la pagina indicata
15 <a href="javascript:Centrata('pagina')">vai</a> LinkSuTesto l'istruzione da mettere sul testo "Avanti e "Indietro" per aprire la pagina successiva o precedente
16 <img src="immagine" alt="apri" /> MettiImmagine Istruzione da usare per inserire l'immagine

 

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

Cartella = Range("A1") & "\" 'C:\Programmi\EasyPHP\www\mikevba_sito\slidershow
CartellaImmagini = Range("A2") & "\" 'C:\Programmi\EasyPHP\www\mikevba_sito\slidershow\clipart
CartellaTumbs = Range("A3") & "\" 'C:\Programmi\EasyPHP\www\mikevba_sito\slidershow\tumbs
FileMaster = Range("A4") 'slide_origine.htm
FileDest = Range("A5") 'Slideshow.htm
FotoMaster = Range("A10") 'foto_origine.htm
NumCol = Range("A6") '4
InserisciTabella = Range("A7") '<!---Inserisci tabella --->
Cartella_Clipart = Range("A8") & "/" 'clipart
Cartella_Tumbs = Range("A9") & "/" 'tumbs
Inserisci_Immagine = Range("A11") '<!--- immagine --->
MenuSinistro = Range("A12") '<!--- menu sinistro --->
MenuDestro = Range("A13") '<!--- menu destro --->
LinkSuImmagine = Range("A14") '<a href="javascript:Centrata('pagina')"><img src="foto" alt="immagine" /></a>
LinkSuTesto = Range("A15") '<a href="javascript:Centrata('pagina')">vai</a>
MettiImmagine = Range("A16") '<img src="immagine" alt="apri" />

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:

'legge le immagini dalla cartella che contiene le immagini
C = 0
File = Dir(CartellaImmagini)
Do While File <> ""
Estensione = CercaEstensione(File)
If LCase(Estensione) = LCase("jpg") Or LCase(Estensione) = LCase("gif") Then
C = C + 1
ReDim Preserve Immagini(1 To C)
Immagini(C) = File
End If
File = Dir
Loop
If C = 0 Then
MsgBox "Nessuna immagine trovata"
Exit Sub
End If


'legge le immagini dalla cartella che contiene le miniature
C = 0
File = Dir(CartellaTumbs)
Do While File <> ""
Estensione = CercaEstensione(File)
If LCase(Estensione) = LCase("jpg") Or LCase(Estensione) = LCase("gif") Then
C = C + 1
ReDim Preserve Miniature(1 To C)
Miniature(C) = File
End If
File = Dir
Loop
If C = 0 Then
MsgBox "Nessuna immagine trovata"
Exit Sub
End If

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 esempio

' vengono create tante pagine HTML quante sono le immagini
FileOrigine = Cartella & FotoMaster
For C2 = 1 To C
FileDestinazione = Cartella & NomeImmagine(Immagini(C2)) & ".htm"
Close
Lu1 = FreeFile
Open FileOrigine For Input As Lu1
Lu2 = FreeFile
Open FileDestinazione For Output As Lu2
Do While Not EOF(Lu1)
Line Input #Lu1, DataLine
If DataLine = MenuSinistro Then
If C2 <> 1 Then
Temp1 = Replace(LinkSuImmagine, "pagina", NomeImmagine(Immagini(C2 - 1)) & ".htm")
Print #Lu2, Replace(Temp1, "foto", Cartella_Tumbs & Miniature(C2 - 1))
Else
Print #Lu2, "inizio"
End If
ElseIf DataLine = MenuDestro Then
If C2 <> UBound(Immagini) Then
Temp1 = Replace(LinkSuImmagine, "pagina", NomeImmagine(Immagini(C2 + 1)) & ".htm")
Print #Lu2, Replace(Temp1, "foto", Cartella_Tumbs & Miniature(C2 + 1))
Else
Print #Lu2, "fine"
End If
ElseIf DataLine = Inserisci_Immagine Then
Print #Lu2, Replace(MettiImmagine, "immagine", Cartella_Clipart & Immagini(C2))
ElseIf DataLine = "<h1>immagine</h1>" Then
Print #Lu2, Replace("<h1>immagine</h1>", "immagine", "Immagine " & C2 & " di " & UBound(Immagini))
Else
Print #2, DataLine
End If
Loop
Close (Lu1)
Close (Lu2)
FreeFile (Lu1)
FreeFile (Lu2)
Next

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:

Nella pagina master abbiamo tre segnaposti:

posti nelle locazioni dove vogliamo questi elementi al loro posto.

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

 

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)

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 esempio 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 file da scaricare.

Nello .zip che scaricate troverete:

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

Operazioni da compiere:

Nella cartella clipart copiate alcune immagini in vostro possesso

Nella cartella tumbs copiate le stesse immagini

Le immagini della cartella tumbs le aprite con un programma di fotoritocco e le ridimensionate opportunamente e le risalvate nella stessa cartella tumbs sovrascrivendo quelle originali.

Fatto questo aggiornate coi nomi che hanno assunto i nuovi tre percorsi del disco le prime tre righe nel foglio di Excel (solo le prime tre righe) scrivendo le tre cartelle che ivi descritte.

Ora potete premere il pulsante già disegnato nel foglio.

 

Se questo può tornarvi utile ne sarò lieto.