Pasul 1: O schiță a proiectului galeriei infinite
Pasul 2: marcarea HTML
Vom lucra cu un markup foarte standard: un antet și un container pentru imagini. Imaginile reduse sunt grupate într-un set de trei rânduri care vor conține link-uri către imagini de dimensiune completă. După fiecare grup, vom adăuga text care arată numărul total de imagini și un link către partea de sus a paginii.
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Pasul 3: CSS
CSS este, de asemenea, destul de standard. Mai întâi, definim culorile paginii și locația titlului și paragrafelor.
În continuare pentru container și imagini, am folosit un pic de CSS3 pentru a adăuga colțuri rotunjite și umbre. Nu uita, «-moz-box-umbra» și «-moz-border-radius» folosit în Firefox și «-webkit-box-umbra» și «-webkit-border-radius» - în Chrome și Safari.
Pasul 5: PHP Script
Aceasta este o acțiune foarte scurtă. Trebuie să sunăm scriptul PHP cu indexul imaginii următoare de care avem nevoie ca parametru. În primul rând, trebuie să extragem toate numele de imagini disponibile din director și să le salvăm într-o matrice. Am sistematizat imaginile mele in doua dosare: "thumb" si "img", care contin, respectiv, reduse si full-sized. Rețineți că miniaturile trebuie să aibă exact aceleași nume ca imaginile corespunzătoare.
Aici definim o variabilă pentru directorul de care avem nevoie pentru a obține imagini, verificați dacă există și dacă este citit și citiți toate numele de fișiere din acesta. Când citim întregul conținut al dosarului, vom primi cu siguranță două elemente suplimentare de care nu avem nevoie: "-" înseamnă directorul curent și ".." înseamnă legătura cu directorul părinte. Pentru a ține cont de acest lucru, trebuie să verificăm dacă elementul citit este diferit de cel specificat, pentru a putea adăuga în siguranță la matricea sa.
Rețineți că atunci când adăugați un element în matrice, dacă nu specificați poziția în care va fi plasat, acesta va fi plasat la sfârșitul matricei.
Aici obținem indicele următoarei imagini de care avem nevoie ca parametru în adresa URL și inițializăm șirul de răspuns.
După cum am spus înainte, imaginile vor fi grupate în seturi de trei rânduri, în care fiecare rând va conține trei imagini, deci avem nevoie de doar nouă imagini pentru a returna toate numele fișierelor din grup. Începem cu indexul obținut ca parametru, $ n și mutăm la $ n + 9. Pentru fiecare increment, adăugați numele textului, urmat de ";", la textul răspunsului. Există un mic șmecherie aici. Nu avem un număr infinit de imagini; astfel încât pentru a crea efectul unei galerii "infinite" care nu se termină niciodată, trebuie să resetăm indexul curent la început de fiecare dată când devine mai mare decât numărul total de imagini. Acest lucru se face folosind funcția "modulo" sau "%" între index și numărul total de imagini.
Ca rezultat al acestei operații, obținem restul de împărțire a acestor două elemente. De exemplu, dacă indexul "$ i" este "50" și numărul de imagini "count ($ files)" este "45", rezultatul va fi "5". În același mod, dacă "$ i" este "50" și "count ($ files)" este "65", rezultatul este "50". În cele din urmă, trebuie să trimitem textul răspunsului.
Aici este versiunea finală a scriptului pentru PHP. Doar puneți acest cod într-un fișier nou .php.
Ca de obicei, definim mai întâi variabilele de care avem nevoie mai târziu.
Pentru a determina dacă bara de derulare este aproape de partea de jos a paginii, avem nevoie de trei variabile:
"ContentHeight" - înălțimea galeriei sursă
«PageHeight» - înălțimea paginii vizibilă în browser
"ScrollPosition" - poziția barei de derulare măsurată din partea de sus
În cele din urmă, avem nevoie de o variabilă pentru indexul paginii următoare (pe care o vom trimite la scriptul PHP) și o variabilă pentru obiectul solicitării Ajax.
Aici trebuie să definim o funcție care va adăuga imagini în containerul HTML.
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Obiectul de solicitare trece de la diferite state după solicitare, iar fiecare stat are o denumire numerică proprie. Suntem interesați doar de o valoare - "4", ceea ce înseamnă etapa finală când cererea sa încheiat. În primul rând, verificăm dacă cererea este în această stare și apoi verificați dacă am primit un răspuns.
Dacă ambele condiții sunt îndeplinite, atunci trebuie să analizăm textul răspunsului în părți. Aceasta înseamnă că trebuie să separăm numele de fișiere într-un matrice. Amintiți-vă că scriptul PHP returnează un șir cu nume separate de punct și virgulă. Iată un exemplu: Achievements.jpg; Bw.jpg; Camera.jpg; Cat-Dog.jpg; CREATIV.jpg; Creativ2.jpg; Earth.jpg; Endless.jpg; EndlesSlights.jpg;
Există o mică problemă cu care trebuie să facem față în primul rând; Textul de răspuns poate începe cu un caracter de linie nouă, de care nu avem nevoie. Acest lucru poate fi corectat cu ușurință utilizând funcția de înlocuire, care are doi parametri: "\ r \ n" este un caracter de linie nouă și "" este un șir gol care trebuie să înlocuiască toate aparițiile primului parametru. Acum tot ce trebuie să faceți este să împărțiți linia de separator ";".
Apoi trebuie să adăugăm imagini în containerul nostru.
Pentru fiecare element al matricei, facem un control pentru a vedea dacă acesta este un șir gol și adăugați o miniatură și un link către el. De asemenea, trebuie să folosim contorul "j" pentru a distribui imaginile de-a lungul rândurilor. După fiecare a treia și a șasea imagine adăugată, vom crea o nouă linie și după nouă imagini adăugate vom introduce text care reflectă numărul total de imagini afișate și un link către partea de sus a paginii.
Iată funcția în forma completă.
Acum vom defini o funcție care verifică dacă poziția de defilare se apropie de partea de jos a paginii și face o cerere către server.
În primul rând, trebuie să determinăm locația barei de derulare. Pentru Internet Explorer, aceasta se face puțin diferit, așa că trebuie să verificăm ce browser utilizează clientul și apoi salvați această valoare la variabila pe care am furnizat-o anterior.
Acum verificăm cât de departe suntem de la sfârșitul galeriei, adică nu a ajuns la partea din pagină care este vizibilă în browser, la o distanță de 500px din partea de jos a paginii. Aceasta nu este o valoare exactă și puteți utiliza orice altă valoare pe care o considerați potrivită. Atâta timp cât această condiție este adevărată, puteți continua să adăugați imagini noi.
Pasul 15: Creați un obiect XMLHttpRequest
Suntem gata să creăm un obiect XMLHttpRequest și să trimitem datele cu el. Din nou, repet, pentru că definițiile Internet Explorer sunt ușor diferite, așa că trebuie să ținem cont și de acest lucru.
Înainte de a trimite cererea, trebuie să specificăm numele scriptului PHP pe server și să adăugăm parametrii care trebuie să i se dea.
Aceasta este o variabilă de text simplă reprezentând adresa URL a paginii.
Este timpul să trimiteți o cerere.
Adresa URL este determinată prin apelarea metodei "open". Al doilea parametru este singurul pentru noi, deoarece indică adresa URL a scriptului. După aceea, trebuie doar să trimiteți o cerere utilizând send (). Aceasta va lansa scriptul PHP, iar rezultatul muncii sale va fi în "xmlhttp.responseText".
Ultimul pas este de a posta un nou conținut pe pagină, de a apela funcția definită anterior "putImages" și de a pregăti variabilele pentru următoarea interogare.
Avem nouă imagini noi în galerie, așa că vom mări "n" cu 9. De asemenea, trebuie să modificăm înălțimea paginii; astfel încât să crească "contentHeight" la 800.
Pur și simplu definiți proprietatea "onload" a etichetei "body" și setați valoarea acesteia la funcția "setInterval". Aceasta va declanșa funcția "derulare" la fiecare trimestru de secundă. În plus, poți schimba această valoare de timp, dar am constatat că este optimă pentru ceea ce avem nevoie.
Traducere și editare: Rog Victor și Andrei Bernatsky. Comanda de tip web.
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Trimiteți-le prietenilor: