Stel dat u een pagina wilt maken waarop momentopnamen van uw laatste werk worden weergegeven. Een manier om dit te doen, is door de afbeeldingen hard te coderen in uw document. De voor de hand liggende consequentie is dat, elke keer dat u een nieuw item wilt toevoegen, u uw html-document handmatig moet bijwerken. Een andere methode zou zijn om de informatie uit een MYSQL-database op te slaan en op te halen. Dit zal perfect functioneren, maar voor veel sites biedt deze oplossing mogelijk veel meer kracht dan technisch nodig is - om nog maar te zwijgen van de toename van de hostingkosten.

In dergelijke gevallen is de beste oplossing om PHP uw map "portfolio" te laten scannen en de code dynamisch voor u te maken. Als u uw pagina wilt bijwerken met een nieuwe snapshot, hoeft u alleen maar de afbeelding en de bijbehorende miniatuur naar de juiste mappen te slepen - en PHP doet de rest. Laten we het nu bouwen!

Onze missie

Laten we kort schetsen wat we moeten bereiken.

• Gebruik PHP om onze portfoliomap te scannen. Vervolgens wordt elk bestand, dat een afbeelding is, doorlopen en vervolgens weergegeven op de pagina.
• Stijl onze inhoud een beetje met CSS.
• Wanneer de gebruikers op een miniatuur klikken, gebruiken we jQuery om de grote versie van de afbeelding in het hoofdvenster te laden.
• Als de gebruiker Javascript heeft uitgeschakeld, wordt hij eenvoudig doorverwezen naar een nieuwe pagina met de afbeelding op ware grootte

Hoe te gebruiken

Het toevoegen van een nieuwe afbeelding aan onze portfolio is eenvoudig. Maak een momentopname van uw website, brochure, briefkaart, enz. En verklein deze tot 500px x 350px. Plaats deze afbeelding in de map "images / featured".

Maak vervolgens een miniatuur van 50px x 50px. Plaats deze afbeelding in de map "images / tn".

U moet ervoor zorgen dat zowel de volledige als de miniatuurafbeeldingen exact dezelfde bestandsnaam hebben.

Onze laatste HTML

          
 
Sommige portfolio
 
 '; ?> 
 
     '; ?> 
 
  

Onze laatste CSS

Bekijk het hier.

Compensatie voor IE6

Gelukkig hebben we maar één ding om op te lossen. Als u naar de bovenstaande afbeelding kijkt, ziet u dat de #options ongeordende lijst geen zwevende lijstitems bevat. Terwijl moderne browsers de items correct leegmaken dankzij onze "overflow: hidden;" stijl, IE6 heeft nog een regel nodig. Voeg dit toe aan je stylesheet.

 ul # opties ... misc stijlen ... hoogte: 1%; 

Ik had de hoogte naar alles kunnen instellen en het zou nog steeds werken. Zie het als Drago die IE6 in het gezicht slaat en zegt: "Word wakker!". Deze stijl dwingt IE6 om evenveel uit te breiden als nodig is om zijn kinderen op te ruimen.

De volledige Javascript (jQuery)

 $ (function () $ .preloadImage = function (pad) $ ("# featured img"). attr ("src", pad); $ ('ul # options li img'). klik (functie () $ ('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 ('
'+ gehakt [0] +'
') .kinderen (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # opties li a'). klik (function () return false;); );

Extra krediet

Er zijn manieren om op dynamische wijze miniaturen van onze afbeeldingen te maken. Probeer een manier te vinden om PHP onze "featured" map te laten maken en vervolgens een thumbnail-versie dynamisch te maken en op te slaan in de map "tn".

• Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.