Jan 23

Guida su come aggiornare WordPress

WordPress No Comments »

Ecco un interessantissima guida su come aggiornare wordpress

Vedi

Jan 20

Effetto LightBox sulle immagini (Prototype e Scritpaculous)

Frameworks, HowTo, Javascript, OpenSource, Programmazione, Risorse, WebDesign, WordPress No Comments »

Premetto che mi trovo a scrivere questo post grazie ad una segnalazione ricevuta via mail da un lettore.

Penso che sia utile fare un’altra premessa il seguente sito utilizza una piattaforma opensource e molto conosciuta chiamata WordPress e l’effetto applicato sulle immagini è dato da un plug-in chiamato thumbnail-viewer.

la seguente premessa è stata fatta in quanto nella segnalazione che ho ricevuto mi veniva richiesto come facevo ad applicare questo effetto sulle immagini.

Detto questo vorrei presentare un piccolo HowTo su come applicare un effetto molto simile sul proprio sito e senza l’ausilio di questo plug-in .

Una delle librerie più conosciute che permette di avere questo effetto sulle immagini è LightBox

Questo HowTo utilizza infatti questa libreria.

Step 1

Scaricate la libreria da qui scompattatela ed inseriti tutti i file nelle relative directory del vostro sito
Step 2

Lightbox 2 usa come librerie Prototype e scritpaculous, quindi dovrete includere anche esse nella pagina. a questo punto potete inserire all’interno del vostro header e più in particolare tra i tag <head> </head> le seguenti righe

(seguendo l’ordine)

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

Step3

Inserire sempre tra i tag <head> </head> il foglio di stile

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

Step 4

Assicurarsi che i file prev.gif , next.gif, loading.gif, close.gif si trovino nella stessa directory citata nel file lightbox.css

Step 5

A questo punto andiamo ad applicare questo effetto aggiungendo un tag rel ad ogni immagine es.

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

Opzioni

Questa libreria ci mette a disposizione anche un utile opzione e cioè quella di poter ragruppare le immagini in gruppi es.

<a href="images/image-1.jpg" rel="lightbox[montagna]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[montagna]”>image #2</a>
<a href="images/image-3.jpg" rel="lightbox[montagna]”>image #3</a>




Tengo a precisare che questa non è l’unica libreria che permette questo effetto, infatti prossimamente scriverò altri HowTo utilizzando appunto altre librerie ed altri frameworks Javascript