Archivio

Posts Tagged ‘Ajax Framework’

Lightbox

Gironzolando per il web ho visto un effetto molto carino sulle foto di un blog. Ho cercato in giro ed ho trovato la soluzione utilizzata su quel sito.
Si chiama Lightbox ed e' un progetto Ajax che utilizza le librerie Prototype e Script.aculo.us.
Qui potete vedere una demo .

Questo componente e' facilissimo da usare, vediamo come fare in pochi passi. Innanzitutto scaricate il pacchetto e decomprimetolo sul vostro sito web.
Adesso includete la libreria JavaScript nella vostra pagina:

<script type="text/javascript" xsrc="js/prototype.js"></script>
<script type="text/javascript" xsrc="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" xsrc="js/lightbox.js"></script>

ricordate sempre di sostituire xscr con scr.
Adesso includete lo stylesheet:

<link rel="stylesheet" xhref="css/lightbox.css" type="text/css" media="screen" />

Il gioco e' praticamente fatto, adesso ad ogni foto a cui volete applicare l'effetto inserite nel tag href l'attributo rel="lightbox:

<a xhref="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Se avete una serie di foto da aprire in una specie di slideshow, potete fare cosi':

<a xhref="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a xhref="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a xhref="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Se avete problemi questo e' il forum ufficiale .

Technorati Tags


script.aculo.us

Script.aculo.us e' basato sulla libreria Prototype JavaScript library a cui aggiunge alcune peculiarita'.Particolarmento orientato agli effetti grafici Script.aculo.us offre effetti visivi, drag&drop, campi di testo che sfruttano l'autocompletamento.

Utilizzo:
Scarite dal sito il file di script.aculo.us create una directory e metteteci dentro i file prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js e controls.js in quest'ultima.

Adesso dovete includere gli script aggiungendo i tag seguenti alla sezione HEAD delle vostre pagine HTML (sostituite xscr con scr):

<script xsrc="/javascripts/prototype.js" type="text/javascript"></script>
<script xsrc="/javascripts/scriptaculous.js" type="text/javascript"></script>

Per richiamare le funzioni potete usare:

<script type="text/javascript" language="javascript">
    // <![CDATA[      Effect.Appear('element_id');    // ]]> 
</script>

oppura, direttamented sull'oggetto:

<div onclick="new Effect.SwitchOff(this)">    Click here if you've seen enough.  </div>

Per ulteriori info fate riferimento al sito ufficiale di script.aculo.us    

Technorati Tags

I contenuti di questo sito non hanno carattere di periodicità e non rappresentano "prodotto editoriale" ex L.62/2001.
Testi, immagini, loghi e marchi in questo sito sono di proprietà dei rispettivi proprietari.


Web Statistics