La oss forestille deg at du vil bygge en side som vil vise øyeblikksbilder av ditt nyeste arbeid. En måte å gjøre dette på, er å kode hardt inn i dokumentet. Den åpenbare konsekvensen er at hver gang du vil legge til et nytt element, må du manuelt oppdatere HTML-dokumentet. En annen metode ville være å lagre og hente informasjonen fra en MYSQL database. Dette vil fungere perfekt, men for mange nettsteder kan denne løsningen muligens tilby langt mer kraft enn det er teknisk nødvendig - for ikke å nevne økningen i hostingkostnadene.

I slike tilfeller er den beste løsningen å få PHP til å skanne mappen "portefølje" og dynamisk opprette koden for deg. Hvis du vil oppdatere siden din med et nytt øyeblikksbilde, må du bare dra bildet og dets respektive miniatyrbilde i de aktuelle mappene - og PHP vil gjøre resten. La oss bygge den nå!

Vårt oppdrag

La oss kort skissere hva vi trenger for å oppnå.

• Bruk PHP til å skanne porteføljemappen. Det vil da cyle gjennom hver fil, det er et bilde, og deretter vise det på siden.
• Stil innholdet vårt litt ved hjelp av CSS.
• Når brukerne klikker på et miniatyrbilde, bruker vi jQuery til å laste den store versjonen av bildet i hovedpanelet.
• Hvis brukeren har Javascript deaktivert, blir han rett og slett sendt til en ny side som inneholder bildet i full størrelse

Hvordan bruke det

Å legge til et nytt bilde i vår portefølje er enkelt. Ta et øyeblikksbilde av nettstedet ditt, brosjyre, postkort, etc og størrelse det til 500px x 350px. Plasser dette bildet i mappen "images / featured".

Deretter lager du et miniatyrbilde som er 50px x 50px. Plasser dette bildet i mappen "images / tn".

Du må sørge for at både full størrelse og miniatyrbilder har nøyaktig samme filnavn.

Vår siste HTML

          
 
Noen porteføljer
 
 '; ?> 
 
     '; ?> 
 
  

Vår siste CSS

Se det her.

Kompensere for IE6

Heldigvis har vi bare en ting å fikse. Hvis du ser på bildet ovenfor, vil du se at #options ikke-ordnet liste ikke inneholder sine flytede listeposter. Mens moderne nettlesere vil rette opp elementene på riktig måte takket være "overløp: skjult;" stil, trenger IE6 en ekstra regel. Legg dette til stilarket ditt.

 ul # alternativer ... forskjellige stiler ... høyde: 1%; 

Jeg kunne ha satt høyden til noe og det ville fortsatt fungere. Tenk på det som Drago punching IE6 i ansiktet og fortell det, "Wake up!". Denne stilen tvinger IE6 til å utvide så mye som det er nødvendig å rydde sine barn.

Den komplette Javascript (jQuery)

 $ (funksjon () $ .preloadImage = funksjon (bane) $ ("# featured img"). Attr ("src", bane); $ ('ul # alternativer li img'). $ ('ul li img'). removeClass ('valgt'); $ (dette) .addClass ('valgt'); var imageName = $ (dette) .attr ('alt'); $ .preloadImage / featured / '+ imageName); var hakket = imageName.split ('. '); $ (' # featured h2 '). fjern (); $ (' # featured ') .prepend
'+ hakket [0] +'
'). barn (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # alternativer li a'). klikk (funksjon () return false;); );

Ekstra kreditt

Det finnes måter å lage miniatyrbilder av bildene våre dynamisk. Prøv å finne en måte å lage PHP-skanneren vår "utvalgt" mappe, og opprett deretter en miniatyrversjon dynamisk og lagre den i mappen "tn".

• Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.