il Blog di cescobaz

Vi propongo oggi un aggiornamento allo script che presentai tempo fa su come ridimensionare le immagini usando un semplice script javascript.

I limiti della soluzione proposta precedentemente riguardavano il fatto che se un'immagine era più piccola della misura massima da noi stabilita questa diventava comunque di quella misura, la cosa è stata risolta con una semplice condizione "if ... else".
Altra debolezza/forza era il fatto che l'immagine doveva avere un id perché poi sia applicata l'azione di ridimensionare. Ciò è stato risolto usando, nel tag img, il "this" che restituisce l'oggetto stesso, in questo caso l'immagine.

Arriviamo alla parte conclusiva per quanto riguarda la nostra struttura css.

Infatti adesso andremo a creare 4 nuovi div che, come si può notare dall'immagine sopra, andranno a sovrapporre in punti specifici il tutto.

ecco il css per questi div:

Iniziamo a creare la struttura di html e css per il nostro slideshow!
In cima all'articolo ho cercato di schematizzare la struttura html/css.

Il tutto è costituito da soli div, abbiamo il div contenitore che è #slide_cont e poi gli altri all'interno che saranno i vari componenti.
Riporto di seguito la struttura css:

Navigando per il web in cerca di un bel script per una galleria di anteprime in javascript ho dovuto rendermi conto che questa non esiste come me la ero immaginata.
Quindi mi sono messo all'opera e ho creato il mio slideshow in javascript!

Il mio obiettivo era quello di creare un slideshow semplice, d'effetto e soprattutto "crossbrowser"; la cosa è stata un po difficile (quelli un pochino più esperti sapranno la grande varietà di interpretazioni che hanno i diversi browser, primo fra tutti IE 6).
Quindi ora nel mio blog, diviso in varie parti, andrò ad illustrarvi il mio lavoro commentandolo in ogni parte così che possiate capirlo a fondo e modificarlo in caso, a vostro piacimento.

In questo articolo illustrerò un semplice script in javascript per il ridimensionamento delle immagini, che esse siano orizzontali o verticali e manterranno le proporzioni originali.

Lo script è molto semplice. La funzione sarà: