Accentsconagua

Skanna mappar med PHP

Koda
Share

Låt oss föreställa oss att du vill bygga en sida som visar snapshots av ditt senaste arbete. Ett sätt att göra detta är att hårdkoda bilderna i ditt dokument. Den uppenbara följden är att varje gång du vill lägga till ett nytt objekt måste du manuellt uppdatera ditt HTML-dokument. En annan metod skulle vara att lagra och hämta informationen från en MYSQL-databas. Detta kommer att fungera perfekt, men för många platser kan den här lösningen möjligen erbjuda mycket mer kraft än vad som behövs tekniskt - förutom att öka värdkostnaden.

I sådana fall är den bästa lösningen att göra PHP-skanning av din "portfölj" -mapp och dynamiskt skapa koden för dig. Om du vill uppdatera din sida med en ny ögonblicksbild är allt som du behöver göra att dra bilden och dess respektive miniatyrbild, i lämpliga mappar - och PHP kommer att göra resten. Låt oss bygga det nu!




Vårt uppdrag

Låt oss kortfattat beskriva vad vi behöver göra.

  • Använd PHP för att skanna vår portföljmapp. Det kommer då att cyle genom varje fil, det är en bild, och sedan visa den på sidan.
  • Stil vårt innehåll lite med hjälp av CSS.
  • När användarna klickar på en miniatyrbild använder vi jQuery för att ladda den stora versionen av bilden i huvudpanelen.
  • Om användaren har Javascript inaktiverad kommer han helt enkelt att riktas till en ny sida som innehåller bilden i full storlek

Hur man använder det

Att lägga till en ny bild i vår portfölj är enkel. Ta en ögonblicksbild av din hemsida, broschyr, vykort, etc. och storlek till 500px x 350px. Placera den här bilden i mappen "images / featured".

Skapa sedan en miniatyrbild som är 50px x 50px. Placera den här bilden i mappen "images / tn".

Du måste se till att både fullstorlek och miniatyrbilder har exakt samma filnamn.

Vår sista HTML

    Skanna kataloger med PHP      
 
Några portföljer
 
 '; ?> 
 
       '. $ scan [$ i]. '  '; ?>

Vår sista CSS

Se den här.

Kompensera för IE6

Lyckligtvis har vi bara en sak att fixa. Om du tittar på bilden ovan ser du att #optionslistan inte innehåller dess flytande listobjekt. Medan moderna webbläsare korrekt rensar objekten tack vare "överflyttning: dold;" stil, behöver IE6 en enda regel. Lägg till detta i ditt stilark.

 ul # alternativ ... olika stilar ... höjd: 1%;

Jag kunde ha satt höjden till någonting och det skulle fortfarande fungera. Tänk på det som Drago stansar IE6 i ansiktet och säger det, "Vakna upp!". Denna stil tvingar IE6 att expandera så mycket som det är nödvändigt att rensa sina barn.

Den fullständiga Javascript (jQuery)

 $ (funktion () $ .preloadImage = funktion (sökväg) $ ("# featured img"). Attr ("src", sökvägen); $ ('ul # options li img'). ($) / featured / '+ bildnamn); var chopped = imageName.split ('. '); $ (' # featured h2 '). ta bort (); $ (' # featured ') .prepend
'+ hackad [0] +'
') .barn (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # alternativ li a'). klicka (funktion () return false;); );

Extra kredit

Det finns sätt att skapa miniatyrer av våra bilder dynamiskt. Försök hitta ett sätt att göra PHP-skanna vår "featured" -mapp och sedan skapa en miniatyrversion dynamiskt och spara den i mappen "tn".

  • Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.


Koda
×