| Autore: |
Topic: creare una slidershow html in vba |
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
 Posted: 27 Jun, 2008 1:19:58 pm |
|
Non so a chi possa interessare, ma penso che, prima o poi, molti di chi scrive per il Web si trovi di fronte alla necessità di presentare una serie di immagini o di foto.
La cosa è alquanto noiosa o, quantomeno, ci costringe a cercare dei programmi a pagamento o dei pacchetti opensource, che ci permettono di realizzare la presentazione di immagini o foto.
Ebbene sono lieto di avvisarvi di essere in grado di presentare un mio lavoro che ho realizzato per effettuare, in modo semplice, questo lavoro.
Ovviamente, per semplificare il lavoro da fare in VBA occorre eseguire un lavoro di preparazione.
Per semplificare la presentazione di questo tutorial, lo presenterò diviso in più POST  |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
| Ultima modifica: admin on 24 Sep, 2008 12:51:58 pm |
|
 Posted: 27 Jun, 2008 2:37:37 pm |
|
PREPARAZIONE DEL LAVORO
Prima di iniziare è bene eseguire alcuni lavori preparatori.
Quel che dobbiamo fare è:
preparare un CSS per la formattazione delle pagine
preparare un JS per il popup
preparare la pagina master per raccogliere le miniature delle immagini
preparare la pagina master per la visualizzazione delle immagini reali
preparare le cartelle nel nostro disco fisso in modo da ospitare in modo organico il nostro lavoro
preparare un file di Excel in modo che possa lavorare secondo le nostre direttive.
Il Css
io ho preparato questo
Il JS
io ho preparato questo
la pagina master per la raccolta delle miniature
E' possibile creare la pagina come più preferite usando queste due accortezze:
la pagina avrà questo nome: slide_origine.htm
al posto della tabella per le miniature avrà questo segnaposto: <!---Inserisci tabella --->
Io ho preparato questa
la pagina master per la visualizzazione delle immagini
anche questa la potete creare come più vi piace.
la pagina avrà questo nome: foto_origine.htm
nella pagina ci saranno questi segnaposti nelle postazioni dove vogliamo i vari elementi:
<!--- titolo ---> qui verrà scritta una didascalia prelevata da una serie di file di testo
<!--- menu sinistro ---> qui verrà visualizzata la miniatura precedente a quella corrente (se quella corrente non è la prima)
<!--- menu destro ---> qui verrà visualizzata la miniatura susseguente a quella corrente (se quella corrente non è l'ultima)
<!--- immagine ---> qui verrà inserita l'immagine nelle sue dimensioni reali
<h1>immagine</h1> considero anche questo come segnaposto e fazzio visualizzare il messaggio: "Immagine x di y"
Io ho preparato questa
preparazione delle cartelle sul disco fisso
nella cartella principale mettere i files necessari al template:
stile.css
funzioni_js.js
slide_origine.htm
foto_origine.htm
sempre nella cartella principale creare 3 sottocartelle:
clipart
dida
tumbs
in queste tre sottocartelle inserire le immagini da usare (.jpg e/o .gif)
nella cartella clipart: lasciare inalterate le immagini
nella cartella tumbs: con un programma di fotoritocco ridurre le dimensioni delle immagini ad una dimensione adatta per delle miniature
nella cartella dida: importante : rinominare tutti i files come .txt
aprire, uno alla volta, tutti i .txt
cancellare tutto il contenuto
scrivere al posto di questo la didascalia che deve accompagnare le immagini
Fine della prima parte preparatoria
Nel prossimo post apriremo finalmente Excel
|
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
| Posted: 27 Jun, 2008 2:56:10 pm |
|
dimenticavo due cose:
se avete difficoltà nell'aprire i link che ho segnalato e quelli che segnalerò in seguito, vi comportate in questo modo:
Col tasto destro scegliete "Copia indirizzo"
questo indirizzo lo incollate poi nella barra degli indirizzi del vostro browser
per vedere il codice delle pagine .htm potete usare l'opzione che vi offre il vostro browser
Ora posso continuare col nuovo post |
|
|
admin
Nina
Posts: 60
Registrato il:
23-02-2008
| Ultima modifica: admin on 27 Jun, 2008 3:01:47 pm |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
| Ultima modifica: micdas on 27 Jun, 2008 9:34:33 pm |
|
| Posted: 27 Jun, 2008 9:22:54 pm |
|
Il lavoro su Excel
Per facilitarmi il lavoro nel codice del VBA e, per rendere il più malleabile possibile l'applicativo finale ho deciso di mettere alcune costanti direttamente nel foglio.
Non imposta se, occupiamo delle celle nel foglio di Excel, in quanto questo ci serve solo come supporto per il lavoro che dobbiamo fare.
Perciò andiamo a scrivere queste costanti:
A1 ---> C:\Programmi\EasyPHP\www\slidershow .... la cartella principale
A2 ---> C:\Programmi\EasyPHP\www\slidershow\clipart ... la cartella delle immagini
A3 ---> C:\Programmi\EasyPHP\www\slidershow\tumbs ... la cartella delle miniature
A4 ---> slide_origine.htm ... il nome della pagina master per le miniature
A5 ---> Slideshow.htm ... la pagina da generare (è possibile assegnarle un nome diverso)
A6 ---> 5 ... n° di colonne da mettere nella pagina finale (è possibile modificarle
A7 ---> <!---Inserisci tabella ---> ... segnalibro per indicare dove inserire la tabella che conterrà le miniature
A8 ---> clipart ... nome per la cartella da indicare nei link alle immagini
A9 ---> tumbs ... nome per la cartella da indicare nei link alle miniature
A10 ---> foto_origine.htm ... il nome della pagina master per l'immagine
A11 ---> <!--- immagine ---> ... segnalibro per indicare dove inserire l'immagine grande
A12 ---> <!--- menu sinistro ---> ... segnalibro per indicare dove è possibile inserire il "torna indietro"
A13 ---> <!--- menu destro ---> ... segnalibro per indicare dove è possibile inserire il "vai avanti"
A14 ---> <a href="javascript:Centrata('pagina')"><img src="foto" alt="immagine" /></a> ... queste tre per facilitarci il compito nel creare i link necessari
A15 ---> <a href="javascript:Centrata('pagina')">vai</a>
A16 ---> <img src="immagine" alt="apri" />
A17 ---> C:\Programmi\EasyPHP\www\slidershow\dida ... la cartella delle didascalie
A18 ---> <!--- titolo ---> ... segnalibro per indicare dove inserire la didascalia
Fatto questo abbiamo finito di lavorare sul foglio di Excel e siamo pronti a passare al VBA
Il lavoro da fare nel VBA lo vedremo nel prossimo post |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
| Posted: 27 Jun, 2008 9:29:24 pm |
|
Prima di passare al VBA forse è meglio esaminare sommariamente le costanti scritte nel foglio.
Unica cosa da modificare obbligatoriamente sono le 4 costanti evidenziate in rosso e che debbono indicare con precisione l'esatta ubicazione della cartella principale e delle relative 3 sotto cartelle
Le due voci evidenziate in blu possono essere modificate
Le restanti voci (comprese le due evidenziate in grassetto nero) non possono essere modificate, a meno di andare a modificare anche il relativo codice che a loro si riferiscono |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
| Posted: 28 Jun, 2008 9:01:13 am |
|
Il lavoro nel VBA
Nel codice abbiamo quattro blocchi principali di istruzioni:
Valorizzazione delle variabili di servizio
Lettura delle immagini dalla cartella clipart e memorizzazione in una matrice
Creazione delle pagine che debbono visualizzare le singole immagini
Creazione della pagina che deve contenere tutte le miniature
Anche in questo caso, per facilitare la comprensione delle varie routine VBA userò post separati per ognuno dei blocchi di istruzioni |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
| Posted: 28 Jun, 2008 9:08:42 am |
|
valorizzazione della variabili di servizio
Questo è il lavoro più semplice:
viene creata una variabile diversa per ogni voce inserita nel foglio di lavoro, quindi non facciamo altro che leggere i contenuti del foglio dalla cella A1 alla A18:
Cartella = Range("A1") & "\"
CartellaImmagini = Range("A2") & "\"
CartellaTumbs = Range("A3") & "\"
FileMaster = Range("A4")
FileDest = Range("A5")
FotoMaster = Range("A10")
NumCol = Range("A6")
InserisciTabella = Range("A7")
Cartella_Clipart = Range("A8") & "/"
Cartella_Tumbs = Range("A9") & "/"
Inserisci_Immagine = Range("A11")
MenuSinistro = Range("A12")
MenuDestro = Range("A13")
LinkSuImmagine = Range("A14")
LinkSuTesto = Range("A15")
MettiImmagine = Range("A16")
Didascalia = Range("A17")
Dida = Range("A18") |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
| Ultima modifica: micdas on 28 Jun, 2008 9:18:18 am |
|
| Posted: 28 Jun, 2008 9:15:34 am |
|
Lettura delle immagini dalla cartella "clipart"
Si inizia la prima parte del lavoro: dal disco fisso vengono letti tutti i files contenuti nella cartella "clipart" e vengono accettati solo i files con estensione .jpg e .gif.
Questi files vengono memorizzati in una matrice e ci accompagneranno in tutto il lavoro.
C1 = 0
File = Dir(CartellaImmagini)
Do While File <> ""
Estensione = CercaEstensione(File)
If LCase(Estensione) = LCase("jpg") Or LCase(Estensione) = LCase("gif") Then
C1 = C1 + 1
ReDim Preserve Immagini(1 To C1)
Immagini(C1) = File
End If
File = Dir
Loop
If C1 = 0 Then
MsgBox "Nessuna immagine trovata in " & vbCrLf & CartellaImmagini
Exit Sub
End If
Se nella cartella non viene trovato alcun file che soddisfi le nostre aspettative viene inviato un messaggio ed il lavoro viene interrotto. |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
| Ultima modifica: micdas on 28 Jun, 2008 4:58:11 pm |
|
| Posted: 28 Jun, 2008 1:08:19 pm |
|
Creazione delle pagine da visualizzare
Questa è la parte più impegnativa del codice.
In questo frammento di codice dobbiamo eseguire queste operazioni:
aprire un ciclo che legga i nomi dei files che abbiamo memorizzato nella matrice Immagini()
For C2 = 1 To C
aprire la pagina master in lettura:
Lu1 = FreeFile
Open FileOrigine For Input As Lu1
aprire o creare le pagine che dovranno ospitare le immagini
Lu2 = FreeFile
Open FileDestinazione For Output As Lu2
iniziare la lettura sequenziale di ciascuna riga del file master fino a quando non giungiamo la fine
Do While Not EOF(Lu1)
Line Input #Lu1, DataLine
Prima di scrivere la riga letta dalla pagina master nella pagina di destinazione occorre verificare che la riga letta non contenga uno dei segnaposti inseriti nella pagina master:
se il segnaposto è "<!--- menu sinistro --->" occorre valutare anche il contatore del ciclo:
se questo contatore ha un valore superiore ad 1 si può inserire l'immagine precedente a quella corrente e linkarla alla relativa pagina
altrimenti si scrive il messaggio che si è arrivati alla prima immagine
se il segnaposto è "<!--- menu destro --->" si valuta ancora il contatore del ciclo:
se questo contatore ha un valore inferiore al numero di immagini memorizzati nella matrice si può inserire l'immagine successiva a quella corrente e linkarla alla relativa pagina
altrimenti si scrive il messaggio che si è arrivati all'ultima immagine
se il segnaposto è "<!--- immagine --->" si provvede ad aggiustare la stringa "<img src="immagine" alt="apri" />" sostituendo la stringa "immagine" con il giusto indirizzo completo della immagine puntata dal contatore del ciclo
Se il segnaposto è "<h1>immagine</h1>" si provvede a sostituire la sottostringa "immagine" con la stringa "Immagine x d y"
Se il segnaposto è "<!--- titolo --->" le cose si complicano leggermente.
occorre aprire un nuovo canale (il terzo) per la lettura del file di testo relativo all'immagine che si sta leggendo
si legge il contenuto di questo file
si chiude il file appena aperto
si scrive il messaggio appena letto al posto del segnaposto
Se nessuna di queste condizioni si realizza si può procedere alla scrittura della riga letta dalla pagina master.
Dopo questa fase il restante codice è lievemente più semplice, ma, per comodità, lo vediamo nel prossimo post
|
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
| Ultima modifica: micdas on 28 Jun, 2008 11:01:13 pm |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
| Posted: 28 Jun, 2008 10:58:38 pm |
|
 Attachment: slidershows.zip (Downloaded 8 times)
Creazione della pagina delle miniature
Questa fase è più semplice della precedente.
C'è un solo segnaposto da controllare: quello per l'inserimento della tabella in cui collocare le miniature.
Quando incontriamo il segnaposto "<!---Inserisci tabella --->" si inizia la scrittura dei tag della tabella tenendo conto del numero di colonne impostate nel foglio e memorizzato nella variabile NumCol
In questo frammento di codice è interessante il modo usato per scrivere i tag:
<table class="tabellaimmagini">
<th colspan="5">
per inserire nella stringa anche i caratteri di doppio apice:
Print #Lu2, "<table class=""tabellaimmagini"">"
Print #Lu2, "<th colspan=""" & NumCol & """>";
Nella prima istruzione è necessario scrivere una coppia di doppi apici prima e dopo la stringa tabellaimmagini.
Nella seconda istruzione è necessario scriverne 3 di doppi apici prima e dopo la variabile NumCol per ottenere la stringa giusta.
Questo che segue è ovviamente solo un frammento di codice scritto per tutto l'applicativo ed è quello relativo alla creazione della tabella nella pagina che ospiterà le miniature.
Non esamino in questa sede tutto il codice che lascio allo studio dei più volenterosi rimanendo comunque a disposizione per dare delucidazioni a chi ne facesse richiesta.
Tuttavia penso sia meritevole di uno sguardo il codice usato per costruire la tabella.
If DataLine = InserisciTabella Then
Print #Lu2, "<table class=""tabellaimmagini"">"
Print #Lu2, "<tr>"
Print #Lu2, "<th colspan=""" & NumCol & """>";
Print #Lu2, "Elenco immagini"; "</th>"
Print #Lu2, "</tr>"
Print #Lu2, "<tr>"
For R1 = 1 To C
Print #Lu2, "<td>";
Temp1 = Replace(LinkSuImmagine, "pagina", NomeImmagine(Immagini(R1)) & ".htm")
Temp1 = Replace(Temp1, "foto", Cartella_Tumbs & Immagini(R1))
Print #Lu2, Replace(Temp1, "immagine", R1 & " di " & C)
Print #Lu2, "<br />" & Immagini(R1) & "</td>"
C1 = C1 + 1
If C1 > NumCol Then
Print #Lu2, "</tr><tr>"
C1 = 1
End If
Next
If C1 < NumCol Then
For C2 = C1 To NumCol
Print #Lu2, "<td> </td>"
Next
End If
Print #Lu2, "</tr></table>"
Else
Print #Lu2, DataLine
End If
In questo codice, per disegnare il numero esetto di celle per rfiga ci facciamo aiutare dalle variabili "C1 e NumCol .
Quando il C1 raggiunge il valore uguale a NumCol chiudiamo il tag </tr> e ne apriamo un altro e riportiamo C1 ad 1.
Nel file zip che allego sono contenuti i seguenti files e cartelle:
foto_origine.htm che è la pagina master per creare le pagine per ospitare la singola immagine
slide_origine.htm che è la pagina master per creare la pagina che ospiterà le miniature
funzioni_js.js con lo script per aprire le pagine in una popup
stile.css per la formattazione delle pagine
una cartella "clipart" vuota
una cartella "dida" vuota
una cartella "images" con un bannerino usato nel CSS
una cartella "tumbs" vuota
Ripeto ancora come riempire le tre cartelle vuote:
scegliete le immagini che volete usare per lo slidershow e mettetele nelle 3 cartelle vuote ("clipart", "dida", "tumbs")
con un programma di fotoritocco aprite le immagini contenute nella cartella "tumbs" per ridimensionarle opportunamente
ai files che avete messo nella cartella "dida" cambiate la estensione in ".txt" |
|
|
micdas
Moderatore Excel
Posts: 35
Registrato il:
24-02-2008
|
|
admin
Nina
Posts: 60
Registrato il:
23-02-2008
|
|
perfetto Mike, hai fatto un tutorial che servirà a molti, anzi devo mettere in linea delle immagini, così lo provo 
appena ho un attimo di tempo mi studio il tutto e lo provo 
