Desigur, pe multe site-uri ați văzut o astfel de funcționalitate, cum ar fi mărirea imaginii, mai ales ca și cum ați face în magazinele online. Acest lucru permite utilizatorului să vizualizeze produsul interesat în modul cel mai detaliat. În acest articol, vom examina unul dintre pluginurile jQuery care rezolvă această problemă.
Cel mai recent a trebuit să folosesc această soluție în munca mea. Există multe scenarii dedicate acestui subiect, dar mi-a plăcut plugin-ul numit loupe. Această soluție este foarte convenabilă, deoarece conectarea și configurația durează doar câteva minute.
În primul rând, trebuie să conectăm biblioteca și plug-in-ul în sine.
Apoi, aplicăm marcajul pentru a lucra cu. Aici avem două opțiuni. Putem să lucrăm direct cu imaginea sau să o închidem într-o legătură și să lucrăm deja cu ea.
În prima opțiune, pentru ca zoom-ul să funcționeze corect, trebuie să specificăm atributele de lățime și înălțime cu dimensiuni de imagine mai mici.
În cel de-al doilea exemplu, în calea imaginii, specificăm imaginea la care se va aplica efectul de lupă, iar în calea de legătură, o imagine care va fi afișată atunci când se trece în mișcare.
După ce am pus marcajul pe pagină, rămâne să sunăm plug-in-ul propriu-zis.
Asta e tot, după toate aceste acțiuni, un efect de zoom frumos va fi obținut.
Ultimul lucru pe care trebuie să-l notezi în legătură cu acest script este acela că are mai multe setări. Cu ajutorul acestora puteți schimba dimensiunea luptei și puteți specifica clasa pentru diva, care este folosită ca lupă.
Sper că ți-a plăcut pluginul jQuery și ți-ai apreciat confortul.
Articole similare
-
Efectul de luminozitate pentru imagini folosind jquery, rudebox
-
Efectul lămpii pentru imagini, xozblog - lecții și articole despre crearea unui site, blog
Trimiteți-le prietenilor: