Immaginiamo che tu voglia costruire una pagina che visualizzerà istantanee del tuo ultimo lavoro. Un modo per farlo sarebbe quello di codificare le immagini nel tuo documento. L'ovvia ripercussione è che, ogni volta che si desidera aggiungere un nuovo elemento, è necessario aggiornare manualmente il documento html. Un altro metodo sarebbe quello di memorizzare e recuperare le informazioni da un database MySQL. Ciò funzionerà perfettamente, anche se per molti siti, questa soluzione potrebbe offrire molto più potere di quanto sia tecnicamente necessario - per non parlare dell'aumento dei costi di hosting.

In questi casi, la soluzione migliore è fare in modo che PHP esegua la scansione della cartella "portfolio" e crei dinamicamente il codice per te. Se vuoi aggiornare la tua pagina con una nuova istantanea, tutto ciò che devi fare è trascinare l'immagine, e la rispettiva miniatura, nelle cartelle appropriate - e PHP farà il resto. Costruiamolo ora!

La nostra missione

Descriviamo brevemente ciò che dobbiamo realizzare.

• Usa PHP per scansionare la nostra cartella del portfolio. Cyle quindi attraverso ogni file, che è un'immagine, e quindi lo visualizza sulla pagina.
• Modella il nostro contenuto un po 'usando i CSS.
• Quando gli utenti fanno clic su una miniatura, utilizzeremo jQuery per caricare la versione più grande dell'immagine nel pannello principale.
• Se l'utente ha Javascript disabilitato, verrà semplicemente indirizzato a una nuova pagina che contiene l'immagine a dimensione intera

Come usarlo

Aggiungere una nuova immagine al nostro portafoglio è semplice. Scatta un'istantanea del tuo sito web, brochure, cartolina, ecc. E ridimensiona a 500 x 350 px. Inserisci questa immagine nella cartella "images / featured".

Successivamente, crea una miniatura che sia 50 x 50 px. Inserisci questa immagine nella cartella "images / tn".

È necessario assicurarsi che sia le immagini a dimensione intera sia quelle in miniatura abbiano lo stesso identico nome file.

Il nostro HTML finale

          
 
Alcuni Portfolio
 
 '; ?> 
 
     '; ?> 
 
  

Il nostro CSS finale

Guardalo qui.

Compensazione per IE6

Fortunatamente, abbiamo solo una cosa da sistemare. Se guardi l'immagine sopra, vedrai che l'elenco non ordinato di #options non contiene gli elementi della lista flottata. Mentre i browser moderni cancellano correttamente gli elementi grazie al nostro "overflow: hidden"; stile, IE6 ha bisogno di un'altra regola. Aggiungi questo al tuo foglio di stile.

 ul # options ... misc styles ... height: 1%; 

Avrei potuto impostare l'altezza su qualsiasi cosa e funzionerebbe ancora. Pensa a questo come Drago che prende a pugni IE6 in faccia e gli dice "Sveglia!". Questo stile costringe l'IE6 ad espandersi tanto quanto è necessario per liberare i suoi figli.

Il Javascript completo (jQuery)

 $ (function () $ .preloadImage = function (path) $ ("# featured img"). attr ("src", percorso); $ ('ul # options li img'). click (function () $ ('ul li img'). removeClass ('selected'); $ (this) .addClass ('selected'); var imageName = $ (this) .attr ('alt'); $ .preloadImage ('images / featured / '+ imageName); var chopped = imageName.split ('. '); $ (' # featured h2 '). remove (); $ (' # featured ') .prepend ('
'+ tritato [0] +'
') .children (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # options li a'). click (function () return false;); );

Credito extra

Ci sono modi per creare miniature delle nostre immagini in modo dinamico. Prova a trovare un modo per fare scansionare PHP la nostra cartella "featured" e poi creare dinamicamente una versione di anteprima e salvarla nella cartella "tn".

• Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.