Share
Săptămâna trecută, Philo ți-a arătat cum să implementezi sIFR3. De data aceasta, am să vă arăt cum să implementați înlocuirea imaginii Facelift (sau FLIR), o alternativă la sIFR care nu necesită Flash.
Rețineți că demo-ul utilizează fonturi diferite decât cele utilizate în tutorial pentru motive corecte.
Primul pas este să descărcați FLIR. Dezarhivați descărcarea și plasați folderul în interiorul (facelift-1.1.1) undeva pe serverul dvs. web. Am redenumit folderul doar pentru "facelift" pentru a face lucrurile mai ușoare.
În interiorul folderului facelift este un fișier Javascript numit "flir.js". Puteți alege să o lăsați acolo, sau o puteți muta în altă parte, cum ar fi un folder centralizat pentru fișierele Javascript. Pentru acest tutorial vom face exact acest lucru și îl vom muta într-un director numit "js" în directorul rădăcină al site-ului nostru.
Acum deschideți flir.js în editorul dvs. de text preferat și mergeți la linia 30. Ar trebui să arate ceva de genul:
,cale:"
Trebuie să punem o cale absolută sau relativă în directorul nostru de facelift între cele două ghilimele simple. Cu toate acestea, căile relative sunt relative la pagină și nu la fișierul flir.js, ceea ce poate provoca unele probleme cu site-urile care utilizează mod_rewrite pentru a crea linkuri URL foarte bune. Cea mai sigură cale de a face totul să funcționeze este să ofere o cale absolută.
,calea: '/ cale / spre / facelift /'
Deschideți pagina pe care doriți să o adăugați și adăugați următoarele între tag-urile pentru a atașa flir.js:
Apoi adăugați următoarele în fața etichetei de închidere:
Acest pas este destul de ușor. Descărcați fonturile pe care doriți să le utilizați. Voi folosi Delicious, Tallys și Tusj. Plasați fonturile în dosarul "fonturi" din dosarul "facelift". Deschideți config-flir.php și veți găsi un bloc de cod care arată astfel:
// Fiecare font pe care doriți să îl utilizați ar trebui să aibă o intrare în matricea fonturilor. $ fonts = array (); $ fonts ['tribalbenji'] = 'Tribal_Font.ttf'; Fonturile $ ['antagea'] = 'Antagea.ttf'; $ fonts ['iluminat'] = 'ArtOfIlluminating.ttf'; Fonturile $ ['bentham'] = 'Bentham.otf'; Fonturile $ ['geo'] = 'Geo_Oblique.otf'; $ fonts ['puritan'] = 'Puritan_Regular.otf'; Fonturile $ ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ fonts ['promocyja'] = 'Promocija.ttf'; Fonturile $ ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonts ['animaldings'] = 'Animal_Silhouette.ttf'; // Fontul va fi implicit următorul (introduceți aici cel mai frecvent font). $ fonts ['default'] = $ fonturi ['puritan'];
După cum puteți spune probabil din comentariile, fiecare intrare din matricea fonturilor $ este un font în folderul fonturilor. Cheia de matrice dintre paranteze este cea pe care o folosim în declarațiile noastre CSS când vrem să folosim fontul. Să adăugăm fonturile pe care le-am descărcat mai devreme.
Fonturi de $ ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Orice valoare este alocată fonturilor $ ['default'] va fi utilizată dacă nu este specificat un font. Să facem Delicious Heavy implicit.
$ fonts ['default'] = $ fonturi ['deliciousheavy'];
Există o serie de alte setări în fișierul config-flir.php, dar ele pot fi lăsate singure. Ceea ce face fiecare setare este destul de explicativă și există comentarii dacă doriți să le modificați.
În mod implicit, FLIR va face înlocuirea imaginilor doar pentru titluri. Puteți specifica ce trebuie înlocuit prin trecerea unui șir de selectori CSS la funcția FLIR.auto () pe care am adăugat-o la pasul 1.
FLIR.auto (['h1', 'h2', 'h3.alert', 'puternic # important']);
Acest lucru îi va spune FLIR-ului să aplice înlocuirea imaginilor la tagurile h1, tag-uri h2, tag-uri h3 cu o clasă de "alertă" și etichete puternice cu un id de "important".
Acum, tot ce trebuie să facem este să aplicăm stilurile CSS ca cele normale. Utilizați cheile din matricea $ fonts ca font din declarația dvs. CSS pentru a utiliza acel font. Permite aplicarea Tusj la toate tastele h1 tas, Delicious Heavy pentru toate etichetele h2 și Tallys la toate etichetele h3 cu o clasă de alertă.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
Asta e! Etichetele puternice cu un id de "important" vor cădea înapoi pe fontul prestabilit specificat în config-flir.php, care în acest caz este Delicious Heavy. Textul generat de imagine va scala la orice dimensiune a fontului specificată în CSS. CSS culori va efectua, de asemenea, dar transformările de text nu va.
Deși FLIR este o soluție destul de curată pentru înlocuirea imaginii text, există câteva probleme minore. Biblioteca PHP GD nu face foarte bine detaliile fine, care este destul de vizibilă în fontul Tusj. Textul de sus a fost redat în Photoshop, iar textul de jos a fost redat de biblioteca PHP GD utilizată de FLIR.
Un alt con de FLIR este că necesită un server web cu PHP și biblioteca GD. Cu toate acestea, majoritatea gazdelor au amândouă, deci acest lucru este neglijabil.
Un avantaj al FLIR asupra sIFR, principalul său concurent, este că este mai ușor de implementat și nu necesită Flash pentru a crea sau vizualiza.
Ambele FLIR și sIFR sunt soluții excelente și vă vor servi bine. Majoritatea vizitatorilor vor putea vizualiza ambele fără prea multe probleme, dar pentru cei câțiva pe marginea curbei clopotelor care nu au Flash, FLIR ar putea fi o soluție mai bună.
Accentsconagua