Să ne imaginăm că doriți să creați o pagină care să afișeze instantanee ale celei mai recente lucrări. O modalitate de a face acest lucru ar fi codarea greu a imaginilor în documentul dvs. Repercusiunea evidentă este că, de fiecare dată când doriți să adăugați un element nou, trebuie să vă actualizați manual documentul html. O altă metodă ar fi stocarea și extragerea informațiilor dintr-o bază de date MYSQL. Acest lucru va funcționa perfect, deși pentru multe site-uri, această soluție ar putea oferi mult mai multă putere decât este necesar din punct de vedere tehnic - fără a menționa creșterea costurilor de găzduire.

În astfel de situații, cea mai bună soluție este ca PHP să-ți scaneze folderul "portofoliu" și să creeze dinamic codul pentru tine. Dacă doriți să vă actualizați pagina cu un instantaneu nou, tot ce trebuie să faceți este să trageți imaginea și miniaturile sale respective în dosarele corespunzătoare - iar PHP va face restul. Să construim acum!

Misiunea noastră

Să prezentăm pe scurt ceea ce trebuie să realizăm.

• Utilizați PHP pentru a scana folderul nostru de portofoliu. Apoi, va trece prin fiecare fișier, adică o imagine, și apoi va afișa pe pagină.
• Folosiți conținutul nostru folosind CSS.
• Când utilizatorii dau clic pe o miniatură, vom folosi jQuery pentru a încărca versiunea mare a imaginii în panoul principal.
• Dacă utilizatorul a dezactivat Javascript, el va fi pur și simplu direcționat către o nouă pagină care conține imaginea de dimensiune completă

Cum să-l folosească

Adăugarea unei noi imagini în portofoliul nostru este simplă. Luați un instantaneu al site-ului dvs., al broșurii, al cărții poștale etc. și dimensiunea acestuia la 500px x 350px. Plasați această imagine în dosarul "imagini / articole".

Apoi, creați o miniatură de 50px x 50px. Plasați această imagine în dosarul "images / tn".

Trebuie să vă asigurați că imaginile de dimensiune completă și miniatură au exact același nume de fișier.

HTML-ul nostru final

          
 
Unele Portofoliu
 
 „; ?> 
 
     „; ?> 
 
  

CSS-ul nostru final

Vezi-l aici.

Compensarea pentru IE6

Din fericire, avem doar un singur lucru de rezolvat. Dacă vă uitați la imaginea de mai sus, veți vedea că lista #opțiuni neordonate nu conține elementele din lista plută. În timp ce browserele moderne vor șterge corect elementele grație "depășirii: ascunse"; stil, IE6 are nevoie de încă o regulă. Adăugați acest lucru în foaia dvs. de stil.

 ul # opțiuni ... stiluri diferite ... înălțime: 1%; 

Aș fi putut pune înălțimea la orice și ar mai funcționa. Gândește-te la asta, pe măsură ce Drago șterge IE6 în față și spune-i: "Trezește-te!". Acest stil îi obligă pe IE6 să se extindă la fel de mult ca și cum ar trebui să-i elibereze copiii.

Javascript-ul complet (jQuery)

 $ (funcția () $ .preloadImage = funcția (calea) $ ("# featured img" ($) ($) ($) ($) ($) ($) ($) / featured / '+ imageName); var chopped = imageName.split ('. '); $ (' # featured h2 '
'+ tocat [0] +'
'). copii (' h2 ') fadeIn (500) .fadeTo (200, .6); ); $ ('ul # opțiuni li a'). faceți clic pe (funcția () return false;); );

Credit suplimentar

Există moduri de a crea din miniatură imagini ale imaginilor noastre. Încearcă să găsești o modalitate de a face PHP să scaneze folderul "featured" și apoi să creeze dinamic o versiune miniatură și să o salvezi în dosarul "tn".

• Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.