Home Demo lightbox
 
Demo plugin lightbox
Valutazione attuale: / 90
ScarsoOttimo 
Scritto da tonicopi   
Sabato 16 Maggio 2009 23:44
Questo articolo è stato letto: 41589 volte

In questa pagina troverete la demo relativa al pacchetto_lightbox che potete scaricare da qui mentre qui potete leggere una guida all'installazione e settaggio dei due plugin. Dentro il pacchetto troverete anche il codice da incollare con il vostro editor di testo per far apparire le icone delle immagini dentro i vostri articoli esattamente nel posto dove volete che appaiano.

ATTENZIONE:  il plugin viene adesso distribuito in tre diverse versioni. Quella originale che ha il difetto di deformare le miniature se le immagini originali hanno proporzioni diverse. Oppure in versione 2 che consente di stabilire soltanto la larghezza della miniatura nei parametri del plugin e che adegua le miniature alle proporzioni larghezza/altezza delle immagini originali. E in versione 3 dove, oltre a questo, viene anche consentito di scegliere diverse cartelle dove collocare le immagini, purchè all'interno della cartella images/stories

 

Proseguendo con la demo vedete qui un  esempio di come apparirà l'immagine se  incollate solo il codice di base:

e il testo proseguirà in questo modo, con un risultato non esaltante, vero?

Proviamo allora a stabilire come vogliamo che appaia la nostra immagine. Adesso la mettiamo al centro della pagina:

 

Possiamo allinearla a sinistra con il testo che occupa la parte libera della pagina a fianco dell'immagine, in questo modo. Adesso aggiungo altro testo fino ad arrivare oltre l'immagine. Che vi dico? Ecco una poesia sul mare di betta.

Il mare

Ieri ho visto il mare,
scuro, minaccioso, illuminato da uno spicchio di luna.
Ieri ho visto il mare
e fra i rumori della notte
ho udito il suo rumore richiamarmi,
rapire i miei pensieri come una sirena.
Io appoggiata alla ringhiera, ho gridato [...]

 

Oppure possiamo allineare l'immagine dalla parte opposta, con il testo che occupa la parte libera a sinistra in questo modo.
Notate anche che è stato assegnato all'immagine, sia nell'allineamento a sinistra che in quello a destra, un margine di 5 pixel per staccare il testo dalle foto. Adesso provate anche a cliccarle godendovi quel bell'effetto lightbox. Provate a ridimensionare la finestra del vostro browser. Vedrete che le immagini, ingrandendosi, si adatteranno alla nuova dimensione dello schermo. Potete anche aprire più di una immagine e spostarle sul monitor con il mouse. Potete anche navigare la galleria spostandovi con i tasti delle freccette della vostra tastiera andando avanti o indietro a vedere tutte le immagini presenti nella pagina.Ricordo che il codice per dare questi allineamenti diversi lo trovate nel file di istruzioni dentro il pacchetto lightbox da scaricare.

Ecco qui sotto un esempio di galleria fotografica ottenuta inserendo il codice in una tabella a tre colonne.

Descrizione dell'immagine In piena luce .... .... e al tramonto
Descrizione dell'immagine Descrizione dell'immagine Descrizione dell'immagine
Ultimo aggiornamento Martedì 30 Marzo 2010 21:35
 
Mini tutorial sul Suffisso classe CSS modulo CLICCA QUI
Banner


Questo testo è stato formattato col codice html direttamente nel modulo banner

Questo testo invece no e allora prende la formattazione dalla classe del foglio di stile, come per quello sopra il banner...
Buona ispezione con firebug!