Come includere Self Web Gallery in una pagina web
In questa sezione impareremo a scrivere il codice HTML che permette di richiamare Self Web Gallery nei tre casi tipici di utilizzo, ovvero:
La pagina WEB che deve contenere SWG dovrà' includere (richiamare) un file javascript che ha il compito di attivare il player Flash che visualizza dentro il quale viene eseguito SWG.
L'istruzione per includere tale javascript, da riportare all'interno dei TAG <HEAD></HEAD> è la seguente:
All'interno del body della pagina, per includere SWG è sufficiente inserire un codice molto simile a quello riportato qui sotto.
ATTENZIONE: questo codice è solo esemplificativo, infatti per motivi di leggibilità certe parti sono state sostituite da puntini di sospensione (...). Si utilizzi quindi il codice inviato per email subito dopo l'acquisto e che può essere richiesto anche successivamente dalla propria pagina personale.
Quindi sul proprio server è possibile caricare tante configurazioni di layout e di gallery, quante se ne desidera per poi richiamare di volta in volta le configurazioni più opportune.
- SWG a piena pagina con layout fluido
- SWG a piena pagina con layout a dimensioni predefinite
- SWG in una porzione di una pagina
La pagina WEB che deve contenere SWG dovrà' includere (richiamare) un file javascript che ha il compito di attivare il player Flash che visualizza dentro il quale viene eseguito SWG.
L'istruzione per includere tale javascript, da riportare all'interno dei TAG <HEAD></HEAD> è la seguente:
<script type="text/javascript" src="flashplayer.js"></script>
Il file flashplayer.js viene fornito nel pacchetto inviato per email subito dopo l'acquisto di SWG.All'interno del body della pagina, per includere SWG è sufficiente inserire un codice molto simile a quello riportato qui sotto.
ATTENZIONE: questo codice è solo esemplificativo, infatti per motivi di leggibilità certe parti sono state sostituite da puntini di sospensione (...). Si utilizzi quindi il codice inviato per email subito dopo l'acquisto e che può essere richiesto anche successivamente dalla propria pagina personale.
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/...',
'width', '100%',
'height', '100%',
'src', 'slideshow7?ss_l=conf001.xml&ss_g=gal001.xml',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'top',
'play', 'true',
'loop', 'false',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'slideshow7',
'bgcolor', '#ffffff',
'name', 'slideshow7',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'slideshow7?ss_l=conf001.xml&ss_g=gal001.xml',
'salign', 't'
); //end AC code
</script>
<noscript>
<object classid="..." codebase="..." width="100%" height="100%"
id="slideshow7" align="top"/>
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie"
value="slideshow7.swf?ss_l=conf001.xml&ss_g=gal001.xml" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="t" />
<param name="bgcolor" value="#000000" />
<embed src="slideshow7.swf?ss_l=conf001.xml&ss_g=gal001.xml" loop="false"
quality="high" scale="noscale" salign="t" bgcolor="#000000"
width="100%" height="100%"
name="slideshow7" align="top" allowScriptAccess="sameDomain"
allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com..."/>
</object>
</noscript>
Le parti evidenziate in rosso sono di particolare importanza perche' consentono di specificare il nome del file di configurazione che definisce il layout (parametro ss_l), quando questo è diverso da quello di default, ovvero layout.xml, e del file di configurazione per la gallery (parametro ss_g) quando questo è differente dal default, ovvero gallery.xml.
Questo uso è molto frequente in quei casi in cui si vuole usare SWG in piu' punti del proprio sito ed in modo che nei diversi punti in cui viene utilizzato assuma layout differenti e richieami lagalleri fotografiche distinte.AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/...',
'width', '100%',
'height', '100%',
'src', 'slideshow7?ss_l=conf001.xml&ss_g=gal001.xml',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'top',
'play', 'true',
'loop', 'false',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'slideshow7',
'bgcolor', '#ffffff',
'name', 'slideshow7',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'slideshow7?ss_l=conf001.xml&ss_g=gal001.xml',
'salign', 't'
); //end AC code
</script>
<noscript>
<object classid="..." codebase="..." width="100%" height="100%"
id="slideshow7" align="top"/>
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie"
value="slideshow7.swf?ss_l=conf001.xml&ss_g=gal001.xml" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="t" />
<param name="bgcolor" value="#000000" />
<embed src="slideshow7.swf?ss_l=conf001.xml&ss_g=gal001.xml" loop="false"
quality="high" scale="noscale" salign="t" bgcolor="#000000"
width="100%" height="100%"
name="slideshow7" align="top" allowScriptAccess="sameDomain"
allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com..."/>
</object>
</noscript>
Quindi sul proprio server è possibile caricare tante configurazioni di layout e di gallery, quante se ne desidera per poi richiamare di volta in volta le configurazioni più opportune.
SWG a piena pagina con layout fluido
Questo esempio si presta bene a tutti i casi in cui SWG viene usato per realizzare un sito internet completo, quindi a pagina piena, ed inoltre si vuole che SWG occupi tutto lo spazio della finestra, ridimensionandosi in base al ridimensionamento della finestra stessa.
Questo tipo di layout si chiama fluido in quanto tende ad occupare tutti gli spazi disponibii di una finestra.
Un esempio di questi tipo di layout e' fornito dalla gallery Nature Style visibile a questo link.
Il layout fluido si ottiene molto semplicemente inserendo il codice esemplificato al paragrafo precedente direttamente nel body della pagina senza ulteriori TAG che ne limitano le dimensioni.
Nel pacchetto inviato via email quando si acquista SWG per ottenere il alyout fluido è' sufficiente utilizzare la pagine di esempio fluid-layout.html.
Anche se si è scelto il layout fluido, potrebbe accadere le le immagini dello slideshow non vengano ingrandite a sufficienza rispetto allo spazio disponibile nella finestra . Questo dipende dal valore che si è attribuito nel file layout.xml per i parametri image_original_width e image_original_height che indicano (se diversi da 0) la dimensione massima a cui è possibile ingrandire una immagine, oppure il parametro max_enlargement che indica il fattore massimo di ingrandimento. Si veda il dettaglio di come funzionano tali parametri a questo link.
Questo tipo di layout si chiama fluido in quanto tende ad occupare tutti gli spazi disponibii di una finestra.
Un esempio di questi tipo di layout e' fornito dalla gallery Nature Style visibile a questo link.
Il layout fluido si ottiene molto semplicemente inserendo il codice esemplificato al paragrafo precedente direttamente nel body della pagina senza ulteriori TAG che ne limitano le dimensioni.
Nel pacchetto inviato via email quando si acquista SWG per ottenere il alyout fluido è' sufficiente utilizzare la pagine di esempio fluid-layout.html.
Anche se si è scelto il layout fluido, potrebbe accadere le le immagini dello slideshow non vengano ingrandite a sufficienza rispetto allo spazio disponibile nella finestra . Questo dipende dal valore che si è attribuito nel file layout.xml per i parametri image_original_width e image_original_height che indicano (se diversi da 0) la dimensione massima a cui è possibile ingrandire una immagine, oppure il parametro max_enlargement che indica il fattore massimo di ingrandimento. Si veda il dettaglio di come funzionano tali parametri a questo link.
SWG con layout a dimensioni predefinite
Talvolta il layout fluido ha un effetto indesiderato: l'ingrandimento delle immagini su schermi particolarmente grandi potrebbe portare ad un degrado della qualità visualizzata delle immagini stesse, che potrebbero avere sul server una dimensione molto inferiore rispetto a quelle a cui vengono ingrandite, per effetto del resizing della finestra, con un layout liquido.
In questi casi sono possibili due soluzioni alternative:
Nel secondo caso si vincola l'intero spazio occupato da SWG all'interno della finestra ad una misura predefinita.
Per ottenere questo effetto è sufficiente includere il codice che richiama il FLASH (si veda il primo paragrafo) all'interno di una coppia di tag HTML che limitano le dimensioni, come riportato di seguito:
In questi casi sono possibili due soluzioni alternative:
- utilizzare i parametri image_original_width, image_original_height, max_enlargement per limitare l'ingradnimento delle foto
- utilizzare un layout a dimensioni predefinite
Nel secondo caso si vincola l'intero spazio occupato da SWG all'interno della finestra ad una misura predefinita.
Per ottenere questo effetto è sufficiente includere il codice che richiama il FLASH (si veda il primo paragrafo) all'interno di una coppia di tag HTML che limitano le dimensioni, come riportato di seguito:
<div style="width:800px; height:600px; margin: auto; text-align:center;">
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
... codice per componente flash di SWG ...
</object>
</noscript>
</div>
La parte di codice HTML evidenziata in rosso "ingabbia" SWG all'interno di uno spazio di 800 x 600 pixel (centrati orizzontalmente nella finestra). Si possono utilizzare le dimensioni preferite.
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
... codice per componente flash di SWG ...
</object>
</noscript>
</div>
SWG in una porzione di una pagina
L'esempio riportato nel paragrafo precedente può essere semplicemente esteso per includere SWG in una porzione della pagina: segregando cioè SWG all'interno di un TAG <div> a dimensioni prefissate ed inserendolo in un contesto qualunque.
Libera la tua fantasia per soluzioni creative ! Alcuni esempi li puoi trovare anche su questo sito.
Libera la tua fantasia per soluzioni creative ! Alcuni esempi li puoi trovare anche su questo sito.
