Mărire uniformă a imaginii la trecerea cu mouse-ul folosind CSS3 pur. Cum să schimbați dimensiunea și poziția miniaturilor WordPress. Cod pentru afișarea miniaturilor de diferite dimensiuni
O practică destul de comună pe site-urile web moderne este de a mări fără probleme un bloc cu o imagine. Cum să faci asta cu folosind CSS?
Mărire uniformă a imaginii pe CSS cu mouse-ul
Împărțim soluția problemei în două etape: marcaj HTML și stiluri css. Mai întâi, să marchem blocurile cu imagini în interior:
Toate blocurile au primit clasa de cutie. Una dintre proprietățile sale importante va fi overflow: ascuns, adică ascunde tot ceea ce trece dincolo de bloc. Să mărim imaginea? Da. Dar doar partea limitată de bloc va fi vizibilă.
Am rezolvat asta. Să trecem la descrierea stilurilor.
Cutie (
preaplin:ascuns;
latime: 250px;
înălțime: 250px;
}
Totul este așa cum s-a afirmat - blocuri pătrate, similare ca dimensiune cu cea standard, nu imaginea mărită, apoi și 250 pe 250.
Proprietatea overflow:hidden, așa cum am menționat mai devreme, nu îi permite să depășească limitele blocului atunci când este mărit.
Proprietăți legate de imagini:
Box img (
-moz-tranziție: toate 1-urile ease-out;
-o-tranziție: toate 1-urile ease-out;
-webkit-tranziție: toate 1-urile ease-out;
tranziție: toate 1s ease-out;
}
Caseta img:hover(
-webkit-transform: scale(1.2);
-moz-transform: scara(1,2);
-o-transforma: scara(1,2);
transforma: scară(1,2);
}
Nu există nicio cale de a ocoli acest lucru fără CSS3. Toate browsere moderne animația va fi afișată. Aveți nevoie de parametrii de tranziție și transformare. Am setat timpul de animație la 1 secundă (1s). Creșterea va fi de 1,2 ori. Îl poți schimba după gustul tău.
Acum, de exemplu, la muncă!
O practică destul de comună pe site-urile web moderne este de a mări fără probleme un bloc cu o imagine. Cum poți face asta folosind CSS?
Mărire uniformă a imaginii pe CSS cu mouse-ul
Împărțim soluția problemei în două etape: markup html și stiluri css. Mai întâi, să marchem blocurile cu imagini în interior:
Toate blocurile au primit clasa de cutie. Una dintre proprietățile sale importante va fi overflow: ascuns, adică ascunde tot ceea ce trece dincolo de bloc. Să mărim imaginea? Da. Dar doar partea limitată de bloc va fi vizibilă.
Am rezolvat asta. Să trecem la descrierea stilurilor.
Cutie (
preaplin:ascuns;
latime: 250px;
înălțime: 250px;
}
Totul este așa cum s-a afirmat - blocuri pătrate, similare ca dimensiune cu cea standard, nu imaginea mărită, apoi și 250 pe 250.
Proprietatea overflow:hidden, așa cum am menționat mai devreme, nu îi permite să depășească limitele blocului atunci când este mărit.
Proprietăți legate de imagini:
Box img (
-moz-tranziție: toate 1-urile ease-out;
-o-tranziție: toate 1-urile ease-out;
-webkit-tranziție: toate 1-urile ease-out;
tranziție: toate 1s ease-out;
}
Caseta img:hover(
-webkit-transform: scale(1.2);
-moz-transform: scara(1,2);
-o-transforma: scara(1,2);
transforma: scară(1,2);
}
Nu există nicio cale de a ocoli acest lucru fără CSS3. Toate browserele moderne vor afișa animația. Aveți nevoie de parametrii de tranziție și transformare. Am setat timpul de animație la 1 secundă (1s). Creșterea va fi de 1,2 ori. Îl poți schimba după gustul tău.
Acum, de exemplu, la muncă!
Astăzi vreau să văd cum să măresc o imagine în CSS. Acest lucru se poate face, de exemplu, arătând spre el, iar creșterea în sine poate avea loc fără probleme sau brusc. Și toate acestea se pot face în moduri diferite.
Creștere bruscă simplă
A schimba aspect imagine când trecem cu mouse-ul peste ea, vom folosi pseudoclasa hover. Metoda este de a schimba pur și simplu lățimea imaginii. Când modificați lățimea, și înălțimea se schimbă automat. De exemplu, lățimea imaginii noastre virtuale este de 320 de pixeli. Să mărim puțin:
Imagine:hover( lățime: 380px; )
Cu această abordare crește și înălțimea, dar toate acestea se întâmplă brusc. Puteți seta și al doilea parametru - înălțimea, dar apoi puteți deranja proporțiile imaginii.
Creștere lină datorită transformărilor
Acum ne vom uita la o metodă complet diferită. În primul rând, redimensionarea va avea loc fără probleme. În al doilea rând, în loc să schimbăm lățimea, vom folosi transformări - aceasta este o inovație css3.
A activa tranzitie lina, trebuie să adăugați o proprietate de tranziție la imaginea în sine (nu la imaginea de trecere cu mouse-ul). Trebuie să indice timpul în care trebuie făcută tranziția. Puteți adăuga și alți parametri, dar nu voi intra în detaliu astăzi.
Img( tranziție: 0,4s; )
Spunem browserului că modificările de stil pentru elementele cu eticheta img nu ar trebui să apară brusc, ci ar trebui să fie distribuite pe o perioadă de 4 zecimi de secundă. Grozav, tot ce rămâne este să faci transformarea în sine atunci când treci cu mouse-ul peste imagine:
Img:hover( transform: scale(1.15, 1.15); )
Mărirea elementelor se face folosind proprietatea transform și valoarea ei de scară (creștere orizontal, vertical). Deci, dacă doriți să măriți imaginea proporțional, ambele valori ar trebui să fie aceleași. Setați valori pe baza faptului că 1 este mărime normală Poze.
În consecință, în intrarea de mai sus, când trecem cu mouse-ul, mărim imaginea cu 15% pe fiecare parte și acest lucru se întâmplă fără probleme.
Deci, pentru a redimensiona, puteți folosi fie redimensionare, fie transformare. Aceste două metode au diferențe. Dacă redimensionați folosind width , imaginea se mărește și mută tot conținutul din apropierea ei. Acest lucru nu se întâmplă în cazul transformărilor.
Redimensionare doar pe o parte
Dacă trebuie să măriți o imagine în CSS atunci când treceți cu mouse-ul pe o singură parte, atunci acest lucru este și cel mai ușor de făcut folosind transformări. Doar scrieți așa:
Img:hover( transform: scaleX(1.2); )
Adică după cuvânt cheie scară indicăm în mod explicit coordonatele - X sau Y .
Sensul măririi unui fragment dintr-o imagine
Cu siguranță ați văzut deja instalate scripturi similare pe site-urile marilor magazine online, când la vizualizarea unui produs puteți muta mouse-ul peste imagine și în același timp fragmentul exact al acestuia peste care se află cursorul mouse-ului se va mări acest moment. Acest lucru este foarte convenabil atunci când trebuie să studiați un produs în detaliu, de exemplu aparate electrocasnice, Celulare, ceasuri, bijuterii, orice. În același timp, nu se va deschide o fereastră pop-up inutilă, ceea ce este destul de convenabil și acum veți înțelege de ce.
Semnificația metodei de mărire a unui fragment de imagine atunci când treceți cursorul mouse-ului este că dimensiunea imaginii detaliate poate depăși rezoluția ecranului utilizatorului, de exemplu, rezoluția ecranului laptopului de pe care este vizualizat site-ul este 1280x800, iar dimensiunea imaginii detaliate este 1920x900. Este clar că nu se va potrivi în întregime pe ecran, așa că pentru a-l mări, metoda clasică care folosește o fereastră drop-down nu este potrivită aici. Trebuie fie să reduceți imaginea la dimensiunea ecranului utilizatorului, fie să o scalați (este mai bine să nu faceți acest lucru), fie să utilizați un truc și să măriți doar o parte a imaginii. În acest caz, site-ul va arăta grozav atât pe monitoare mari, cât și pe cele mici, dar dimensiunea poza detaliata va fi suficient de mare pentru ca utilizatorii să-l studieze în detaliu.
Avantaje și dezavantaje
După cum am menționat mai devreme, principalul avantaj al scriptului pentru mărirea nu a întregii imagini, ci doar a unei părți a acesteia, dezvoltat de personalul studioului nostru, este independența sa față de rezoluția ecranului utilizatorului, dar există și alte avantaje care pot fi evidențiate:
- ușurință de instalare;
- flexibilitate de personalizare;
- dimensiune minimă JavaScript;
- markup HTML simplu;
- compatibil cu jQuery de orice versiune;
- compatibilitate între browsere;
- potrivit pentru diferite rezoluții de ecran;
- mai bun decât analogii sofisticați;
- gratuit;
- o descriere detaliată a principiului de funcționare și cod sursă ușor de citit.
După cum puteți vedea, există destul de multe avantaje și sunt evidente. Da, desigur, puteți descărca scripturi similare sau le puteți fura de la unele mare magazin online. Aceasta metoda, de altfel, se numește Cloud Zoom, care, de fapt, este plătit și prea sofisticat. Acum, astfel de scripturi sunt larg răspândite și utilizate pe multe site-uri, dar va trebui să petreceți destul de mult timp pentru a vă da seama și pentru a integra un script similar în site-ul dvs. În acest articol, vom descrie în detaliu funcționarea scriptului nostru și, dacă considerați că codul său este format din doar câteva rânduri, atunci veți putea înțelege esența problemei în doar câteva minute.
Dacă vorbim despre neajunsuri, atunci ne vine în minte un singur punct, iar numirea lui un neajuns poate fi o întindere. Faptul este că imaginea mărită este încărcată într-un strat ascuns în avans, chiar înainte ca utilizatorul să facă clic oriunde. Pur și simplu avem nevoie de asta pentru că atunci când cursorul mouse-ului este peste imagine, avem nevoie ca fragmentul mărit să apară instantaneu, iar pentru aceasta trebuie să folosim preîncărcarea. Dar nu este nimic în neregulă cu acest lucru, deoarece de obicei va fi o singură astfel de imagine pe pagină, iar dimensiunea acesteia nu este atât de mare (200-300 KB cu o rezoluție de 1800x1100 ca în exemplul nostru) încât să merite să vă faceți griji pentru traficul de internet al utilizatorului.
Dezvoltare în detaliu, de la A la Z
Ei bine, acum că am subliniat pe scurt esența metodei și am enumerat, de asemenea, avantajele și dezavantajele acesteia, este timpul să trecem la treabă și să începem să o implementăm. Aș dori să notez imediat că nu este nimic complicat în acest script și sperăm că algoritmul vă va fi complet clar de prima dată.
Marcaj HTML
Ca întotdeauna, începem cu Marcaj HTML pagini. Este revoltător de simplu și conține doar câteva linii de cod:
Totul aici este elementar. Primul container cu clasa preîncărcare, după cum sugerează și numele, este responsabil pentru preîncărcarea unei imagini mari. Am discutat deja de ce este necesar acest lucru puțin mai devreme. În interiorul acestui container plasați imaginea care va fi folosită atunci când este mărită. Unele puncte sunt importante și nu trebuie ratate:
- încercați să plasați acest container cât mai sus posibil în DOM (în codul paginii) - cu cât mai sus, cu atât mai repede scriptul va fi gata de lucru;
- ascunde recipientul preîncărcare din ochii utilizatorilor, trecând dincolo de zona vizibilă a ecranului ( display: niciunul acest lucru nu va funcționa).
Urmează containerul care conține previzualizarea. I-am repartizat o clasă zoomabil, ceea ce, după cum ați putea ghici, înseamnă că imaginea poate fi scalată. Imaginea pe care o conține este afișată implicit. Sunt mai multe și aici puncte cheie asta nu trebuie trecut cu vederea:
- dimensiunea containerului trebuie specificată în mod explicit (lățimea și înălțimea egale cu dimensiunile de previzualizare);
- containerul nu trebuie să conțină bare de defilare și nu trebuie afișat nimic care nu se încadrează în el (proprietatea CSS overflow);
- atunci când treceți cu mouse-ul, puteți schimba opțional cursorul mouse-ului cu unul non-standard sau, ca în exemplu, cu unul dintre cele standard potrivite (sub formă de vedere).
Punctul important aici este să adăugați atribute personalizate la imagine mică:
- data-preview-url(calea către imaginea mică);
- data-img-url(calea către imaginea detaliată).
Aceste atribute pot fi numite oricum doriți, nu acesta este scopul. Principalul lucru este că conțin absolut sau legături relative la imaginile corespunzătoare. De ce să duplicați calea către o imagine mică, vă întrebați, când este deja indicată în etichetă img. Nu-ți face griji, vei înțelege asta puțin mai târziu.
Stiluri CSS
CSS pare destul de simplu și îndeplinește toate cerințele enumerate mai devreme:
Preîncărcare (poziție: absolut; z-index: -1; sus: -5000px; stânga: -5000px; ) .zoomable (cursor: încrucișată; lățime: 600px; înălțime: 368px; depășire: ascuns; margine: 0 automat; )
Preîncărcați imaginea detaliată
După cum am menționat mai devreme, preîncărcare Avem nevoie de o imagine mare, astfel încât atunci când utilizatorul plasează cursorul mouse-ului peste imaginea de previzualizare, scriptul nostru să fie complet gata de lucru și să nu existe întârzieri. Iată două motive principale pentru care preîncărcarea unei imagini detaliate în în acest caz, complet justificat:
- imaginea detaliată trebuie să fie memorată în cache în prealabil de către browser, astfel încât, dacă este necesar, să poată fi afișată instantaneu pe ecran;
- Pentru ca scriptul să funcționeze, trebuie să calculați coeficientul - raportul dintre dimensiunea imaginii detaliate și dimensiunea previzualizării (mai multe despre aceasta mai târziu).
Funcția JavaScript
Acum totul este gata și trecem la partea cea mai interesantă - JavaScript, datorită căruia toate acestea vor funcționa.
Deci, să începem și să aducem imediat întreg scenariul de lucru, astfel încât să fie convenabil să îl copiați, apoi îl vom analiza în detaliu în părți:
$(window).load(function() ( $(".zoomable").hover(function() ( $(".zoomable img").stop().animate((opacitate: 0), 0, function( ) ( $(".Img cu zoom").attr((src: $(".Img cu zoom").attr("data-img-url"))); )).animate((opacitate: 1), 300 ); ), function() ( $(".zoomable img").stop().animate((opacitate: 0), 0, function() ( $(".zoomable img").attr((src: $ ("".zoomable img").attr("data-preview-url")).css((marja: "0 0")); )).animate((opacitate: 1), 300); )); var c = $(".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) ( var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top; var iX = pX * c - pX; var iY = pY * c - pY; $( ".zoomable img").css((marja: "-" + iY + "px -" + iX + "px")); )); ));
În primul rând, merită să vă atrageți atenția asupra faptului că această funcție numit nu după ce DOM-ul este gata, ci după sarcina completa pagini:
$(function() ( console.log("DOM este gata"); )); $(window).load(function() ( console.log("Pagina este gata"); ));
Ideea este că standardul $(funcție()()); nu va funcționa pentru noi aici, deoarece dacă structura documentului este gata, asta nu înseamnă că totul din el a fost încărcat fisiere multimedia. Și întrucât este foarte important pentru noi să obținem dimensiunile imaginii detaliate chiar înainte ca scriptul să înceapă să ruleze, această decizie este complet justificată.
Deci, în primul rând, gestionăm evenimentul mouseover pe imaginea noastră folosind functie standard jQuery - hover() .
$(".zoomable").hover(function() ( ), function() ( ));
Dacă cursorul mouse-ului se află peste container zoomabil, ascundem temporar imaginea și înlocuim în liniște atributul acesteia src(sursă), apoi afișați-l fără probleme pe ecran. În acest caz, nu vor exista sărituri neplăcute și totul va decurge fără probleme.
În cazul în care mouse-ul nu este peste container zoomabil, facem aceeași operațiune, doar că acum întoarcem totul la locul său așa cum era implicit. Această etapă este cea mai simplă parte a scenariului nostru și nimeni nu ar trebui să aibă probleme în a-l înțelege, așa că haideți.
Var c = $(".preload img").width() / $(".zoomable img").width();
Această linie de cod calculează coeficientul necesar pentru scriptul nostru - raportul dintre dimensiunile imaginilor mici și mari. Acest lucru este necesar pentru a realiza o scalare precisă, în funcție de locul în care se află în prezent cursorul mouse-ului utilizatorului.
Ceea ce urmează este ultimul și cel mai mult o parte importantă scenariul nostru, care este responsabil de mutare imagine mareîn stratul scalabil. Acest lucru creează un efect ca și cum am mișca o lupă imaginară invizibilă și exact fragmentul de care este necesar este afișat în fereastră.
În primul rând, trebuie să surprindem evenimentul în care cursorul mouse-ului se mișcă și, pentru a face scriptul să funcționeze mai ușor, nu vom face acest lucru pentru întregul document, ci doar pentru container zoomabil. La urma urmei, nu ne interesează coordonatele mouse-ului în afara stratului țintă.
$(".zoomable").mousemove(funcție(e) ( ));
Acum trebuie să calculăm coordonatele cursorului mouse-ului relativ la stânga colțul de sus ecran. Dar ne interesează locația cursorului în raport cu elementul, și nu originea coordonatelor, așa că trebuie să scădem imediat distanța colțului din stânga sus al containerului din aceste coordonate. zoomabil de la origine:
Var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top;
Tot ce ne rămâne este să calculăm și să înlocuim valorile de indentare ( margine-topȘi margine-stânga) pentru o imagine detaliată, pentru a ști cât de mult să o miști pentru a obține efectul de mărire a unui fragment din imagine. Deoarece strat zoomabil avem dimensiuni fixe și tot ceea ce depășește limitele sale nu este afișat, atunci efectul necesar va fi obținut folosind liniuțe negative:
Var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css((marja: "-" + iY + "px -" + iX + "px"));
Exemplu de scenariu
Ca exemplu, am ales o imagine a cărei mărire poate fi de interes pentru mulți. La urma urmei, trebuie să fiți de acord că toată lumea este interesată să citească ce scrie pe eticheta unei sticle de șampanie :)
P.S. Comentariile la articol și distribuția acestui script sunt binevenite.
Când schimbați tema în WordPress, în loc de miniaturi pentru înregistrările existente vedem uneori imaginile originale. Acest lucru se datorează faptului că miniaturile de dimensiunea necesară nu au fost create atunci când imaginea a fost încărcată, iar folosind pluginul Regenerate Thumbnails această problemă poate fi rezolvată.
Dimensiunile imaginii
WordPress are conceptul de „dimensiuni de imagine” dintre care sunt doar trei implicit - mare, mediu și miniatură. Când încărcați imagini în biblioteca dvs. media, WordPress creează fișier nou pentru fiecare dimensiune, adică Dacă te uiți în directorul de descărcări, vei vedea adesea următoarele:
- foto.jpg
- foto-150×150.jpg
- foto-300×126.jpg
- foto-672×360.jpg
Aici este clar că imaginea originală photo.jpg trei au fost create fișier suplimentar pentru dimensiunile noastre. Dimensiunile implicite din WordPress pot fi modificate în Opțiuni → Media și sunt utilizate atunci când inserați imagini în postări, creați galerii și alte locuri.
Pe lângă dimensiunile implicite, vă puteți înregistra în WordPress dimensiuni suplimentare folosind teme sau pluginuri. De exemplu, dacă un plugin afișează un widget cu postări populare într-o bară laterală, le poate însoți cu imagini de 50x50 pixeli. Sau o temă care afișează postări într-o grilă poate folosi imagini de 200x200 pixeli.
Este de remarcat din nou faptul că crearea fișierelor diferite dimensiuni are loc tocmai în momentul încărcării imaginilor în biblioteca media.
Astfel, atunci când este activat Teme WordPress care utilizează dimensiuni diferite, fișierele pentru acele dimensiuni nu există pentru imaginile încărcate anterior. În așa Caz WordPress va folosi cea mai apropiată aproximare posibilă a dimensiunilor disponibile sau a imaginilor originale.
Acest lucru face adesea ca desenele noastre să plutească sau miniaturile să plutească. pagina principala site-urile cântăresc câțiva megaocteți.
