A fost luat în considerare pluginul de mărire a imaginii Zoomy, care simulează o lupă reală. În unele cazuri, utilizarea sa este incomodă, deoarece lupa acoperă imaginea principală și îngreunează focalizarea asupra zonei dorite. Pentru poziționarea precisă a punctului de mărire, puteți utiliza o altă versiune a lupei - jLoupe. Acest plugin pentru biblioteca de scripturi jQuery gratuită a fost dezvoltat de designerul web Chris Iufer. Are mult mai multe setări și vă permite să creați efecte frumoase care simulează o lupă, afișând un fragment de imagine mărit lângă cursorul indicatorului.

Trei opțiuni pentru pluginul jLoupe sunt prezentate în figură. În stânga este o lupă în formă de picătură și este o legătură către ieșirea unei imagini la scară completă, în centru este o lupă dreptunghiulară fără legătură, în dreapta este o lupă sub formă de cerc. Din păcate, rotunjirea, la fel ca și în pluginul de lupă discutat anterior Zoomy, nu funcționează în browserele IE6 - IE8. De aceea, lupa din ele este întotdeauna dreptunghiulară, iar versiunea potrivită este, în general, o totală rușine.

Mai întâi, descărcați arhiva. Apoi, ca întotdeauna, pentru a evita confuzia, să creăm un nou folder pe site, numindu-l jloupe și să despachetăm arhiva descărcată în el. Vom primi trei fișiere:
jquery-1.8.3.min.js, jquery.jloupe.js și o imagine suport pentru lupa rotundă lupe-trans.png.

Pentru ca pluginul să funcționeze, trebuie doar să setați class="jloupe" pentru imagine, iar rezultatul lupei în sine poate fi organizat în mai multe moduri:
1. Creați două imagini - cea principală (image.jpg) și cea mărită (image_big.jpg). În eticheta de imagine plasată pe pagină, indicați calea către versiunea mărită folosind atributul data-original:
.
2. Folosiți o singură imagine mărită, iar pentru a o reduce în browser, setați dimensiunile necesare pe pagină folosind atributele lățime și înălțime. Amintiți-vă că scalarea efectuată de browser degradează de obicei calitatea imaginii:
.
3. Dacă trebuie să furnizați un link pentru a deschide o imagine mare sau alt obiect, atunci utilizați următorul formular:
.

Aceasta completează instalarea pluginului jLoupe și puteți vedea cum funcționează deschizând pagina cu imaginea în browser.

Notă importantă: Dacă site-ul dvs. folosește mai multe plugin-uri jQuery, atunci este mai convenabil să mutați fișierul jquery.js (de preferință cea mai recentă versiune) în folderul rădăcină pentru a nu-l descărca de mai multe ori. În acest caz, linia de accesare a acestuia va arăta la fel pentru toate pluginurile. În special, pentru exemplul nostru, se dovedește astfel:
.
Nu este recomandat să folosiți mai multe versiuni diferite de jQuery pe aceeași pagină, astfel încât acestea să nu intre în conflict între ele. În același timp, asigurați-vă că verificați dacă pluginurile funcționează cu versiunea instalată de jQuery, deoarece nu toate versiunile sunt interschimbabile.

Setările de bază pentru lupa jLoupe sunt setate în fișierul jquery.jloupe.js. Pentru a le schimba, deschideți-l în orice editor HTML sau Notepad. La începutul fișierului există linii cu setări disponibile care pot fi modificate:

De exemplu, pentru lupa în formă de lacrimă afișată în partea de sus a articolului (în stânga), sunt utilizate setările implicite, iar pentru imaginea din dreapta sunt utilizate următoarele:
razăLT: 100,
marja: 12,
borderColor: false,
backgroundColor:"#ffffee",
imagine: „jloupe/loupe-trans.png”

Pentru opțiunea lupă dreptunghiulară (în centru), nu este necesară nicio imagine externă (imagine: fals):
razăLT: 0,
razaRT: 10,
razaRB: 0,
razăLB: 10,
latime: 300,
inaltime: 150,
borderColor: „#f2730b”,
backgroundColor: „#000”,
estompare: fals,
imagine: fals

Pentru alte programe pentru mărirea imaginilor, precum și crearea de galerii foto, carusele de imagini și prezentări de diapozitive pe site, vezi și în secțiunea „

În acest tutorial ne vom uita la crearea unui efect de lupă pentru o imagine statică folosind doar jQuery și CSS.

Markup pentru a obține efectul este destul de simplu. folosim doar câteva divși imagine.

div#iphone afișează cadrul iPhone. In interior se afla div#webpage cu o captură de ecran a paginii. Captura de ecran este afișată la jumătate din dimensiunea reală, așa că folosim aceeași imagine pentru versiunea mică (afișată în cadrul iPhone) și versiunea mare, care este afișată în fereastra rotundă.

Există de asemenea div#retina, care este setată la o formă rotundă folosind CSS3. Afișează o versiune mai mare a capturii de ecran a paginii ca fundal și se mișcă pe măsură ce deplasați cursorul mouse-ului.

Să setăm stiluri pentru div#iphone, #pagina web și #retina, care vor face posibilă realizarea efectului scontat.

poziție:relativă; div lățime: 750px; )

div Prin specificarea poziționării absolute div pe pagină, putem folosi tehnica de centrare verticală și orizontală, care plasează efectiv captura de ecran în centrul cadrului iPhone-ului. div#retina primește și o poziționare absolută, așa că este posibil să o mutați în părțile jQuery pur și simplu setând un offset de sus și stânga. Dat

are și o captură de ecran a paginii ca fundal (în dimensiunea sa originală). Deplasarea fundalului la deplasare div creează iluzia de a mări o mică bucată din captură de ecran din spatele acesteia.. Asemenea#retina are o rază a marginii cu o valoare egală cu exact jumătate din lățimea sa, făcându-l exact rotund (cel puțin în browserele care acceptă proprietatea

Și, în sfârșit, ascundem indicatorul mouse-ului setând un cursor gol (Google Chrome aruncă o eroare atunci când redă un cursor complet gol, așa că trebuie să setăm un cursor alb de 1px pentru acesta). Opera ignoră complet cursoarele utilizatorului și nu se poate face nimic în privința acestui fapt. Prin urmare, utilizatorii acestui browser vor avea o experiență negativă la vizualizarea efectului.

Stilurile sunt setate, este timpul să începem programarea.

)).mouseenter(funcție())( retina.stop(true,true).fadeIn(„rapid”); )); )); In functie mousemove coordonatele curente ale cursorului mouse-ului sunt transmise ca e.paginaX Şi e.paginaY div, dar sunt absolute în raport cu întregul document. Scăderea offset-ului div#webpage, obținem coordonatele relative ale cursorului mouse-ului, care sunt ulterior folosite pentru poziționare

#retină.

Concluzie

Dezbaterea dintre susținătorii Flash și HTML5 s-a aprins recent, deoarece oamenii au început să caute modalități de a obține același nivel de funcționalitate fără a utiliza aplicații externe. Această abordare duce la aplicații mai simple. Cu toate acestea, trebuie să ne amintim să menținem compatibilitatea între browsere a soluțiilor, ceea ce nu este întotdeauna posibil (rețineți IE).

Articolul descrie procedura de instalare a pluginului cloud-zoom bazat pe jQuery și, de asemenea, descrie setările auxiliare ale pluginului pentru optimizarea afișajului ferestrei de mărire.

Destul de des, pe resurse cu o aprovizionare mare de material grafic, ei recurg la utilizarea lupei. De exemplu, există o imagine de dimensiuni mari și rezoluție. Pentru ca acesta să se potrivească în zona vizibilă a ecranului, va trebui redus, ceea ce va afecta lizibilitatea imaginii și va fi dificil să vedeți detaliile. În acest caz, va ajuta un plugin special, care va mări local anumite zone ale imaginii atunci când treceți cu mouse-ul. De asemenea, aceasta tehnica este foarte des folosita in magazinele online pentru ca un potential client sa studieze in detaliu produsul care i se ofera.

Este demn de remarcat faptul că există destul de multe pachete software similare pe Internet care vă permit să implementați o lupă de imagine. Prin urmare, este logic să alegeți cea mai optimă opțiune din întreaga varietate de pluginuri. În timpul analizei mele, am ales 3 criterii principale după care am făcut selecția:

• suport pentru diferite browsere;
• domeniul de aplicare al funcționalității;
• volumul pluginului și viteza cu care funcționează.

Prima opțiune care s-a potrivit perfect cu criteriile mele a fost cloud-zoom. Acest articol se va concentra numai pe instalarea și funcționarea acestui script, iar soluțiile ulterioare care îndeplinesc criteriile vor fi discutate în articolele viitoare.

Deci, cloud-zoom. Autorul acestei dezvoltări este un anume profesor Tucha, merită să-i respectăm munca și să-i mulțumim pentru acest produs. În primul rând, aș dori să notez principalul avantaj al scriptului în comparație cu altele - capacitatea codului de a interacționa cu diferite formate de galerie.

Primul pas în instalarea pluginului va fi descărcarea celui mai recent jQuery, de asemenea direct, fișierul pluginului în sine și foaia de stil pentru acesta. Toate acestea pot fi găsite pe resursa oficială a produsului.

După ce documentele necesare au fost descărcate și plasate în directorul corespunzător al resursei dvs., puteți trece la partea de cod a instalării. În eticheta head includem foaia de stil pentru lupa, iar în corpul site-ului în sine inserăm o etichetă de script care va conecta software-ul pluginului nostru. Un exemplu de cod care realizează sarcinile de mai sus este dat mai jos.

HTML

/*in cap*/< link rel= "stylesheet" type= "text/css" href= "cloud-zoom/cloud-zoom.css" />/*in corp*/< script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" > < script type= "text/javascript" src= "cloud-zoom/cloud-zoom.1.0.2.js" >

Dacă ați conectat totul cu succes, puteți trece la următoarea etapă de instalare. Aceasta va fi inserarea unui cadru pentru funcționarea corectă a pluginului, ar trebui să arate așa

HTML

< a class = "cloud-zoom" href= "big-img.jpg" > < img src= "small-img.jpg" />

După cum puteți vedea, nu există nimic supranatural în designul standard al corpului HTML al pluginului: un link către o imagine mărită și imaginea însăși din interiorul acesteia. De asemenea, vreau să remarc că este esențial important să specificați clasa de plugin, altfel scriptul nu va funcționa. Dacă totul a fost făcut corect, atunci în browser veți vedea ceva de genul următor:

După cum puteți vedea, lupa este ferm lipită de versiunea mai mică a imaginii. Acest neajuns este eliminat prin setări speciale care reglează designul și poziția lupei. În acest exemplu, vom analiza cum puteți corecta locația ferestrei lupei

HTML

< a class = "cloud-zoom" href= "big-img.jpg" rel= "adjustX: 20, adjustY: 0" > < img src= "small-img.jpg" />

Această intrare înseamnă că am redefinit ușor coordonatele de ieșire ale ferestrei în raport cu axa X. De asemenea, rețineți că toate setările pentru plugin sunt scrise în atributul rel, separate prin virgule. Verificăm dacă comanda noastră a funcționat

Mai jos este o listă cu toate setările posibile ale pluginurilor și o scurtă descriere a acestora.

• zoomWidth – determină dimensiunea lățimii ferestrei pentru afișarea unei mariri locale a imaginii. Dacă nu este specificat nimic pentru acest parametru, fereastra va repeta valoarea lățimii imaginii.
• zoomHeight – determină dimensiunea înălțimii ferestrei pentru afișarea unei mariri locale a imaginii. Dacă nu este specificat nimic pentru acest parametru, fereastra va repeta înălțimea imaginii.
• poziție – înlocuiește poziția ferestrei pentru afișare. Similar cu proprietatea CSS cu același nume, ia valorile „stânga”, „dreapta”, „sus” și „jos”. Poziția este stabilită în raport cu poza în cauză. De asemenea, puteți determina afișarea ferestrei în containerul necesar prin legarea la identificator. Valoarea „blockId” este responsabilă pentru aceasta.
• adjustX – setează poziția lupei în raport cu coordonatele axei x.
• adjustY – setează poziția lupei în raport cu axa ordonatelor.
• nuanță – este responsabilă de culoarea cadrului care încadrează lupa. Nu funcționează când se utilizează parametrul softFocus.
• tintOpacity – determină transparența marginilor cursorului lupei.
• lensOpacity – determină transparența limitelor ferestrei lupei.
• softFocus – oferă un efect de estompare părții din imagine care nu este capturată de cursorul lupei. Nu funcționează când se utilizează parametrul de nuanță.
• smoothMove – vă permite să configurați o mișcare mai lină a cursorului lupei în zona imaginii studiate.
• showTitle – Corespunde funcțiilor atributului titlu obișnuit.
• titleOpacity – vă permite să controlați transparența blocului cu descrierea imaginii.

În același timp, setările includ formatarea foii de stil. Mai jos este o listă a tuturor selectoarelor de masă, precum și care dintre ele corespunde fiecărui element al lupei:

• .cloud-zoom-lens este un cursor care definește zona de zoom locală.
• .cloud-zoom-title – este responsabil pentru stilul titlului lupei.
• .cloud-zoom-big – ferestre pentru afișarea imaginilor mărite.
– proiectarea mesajului de încărcare a informațiilor.

În cazul în care lucrăm cu galeria, structura codului se modifică ușor și, în același timp, apar câteva opțiuni noi de setări. Să ne uităm la un exemplu viu

HTML

< a class = "cloud-zoom" href= "big-img.jpg" id= "loupe1" rel= "position: "right", adjustX: 10, adjustY: 0" > < img src= "small-img.jpg" width= "200" /> < ul> < li> < a class = "cloud-zoom-gallery" href= "big-img.jpg" title= "" rel= > < img src= "small-img.jpg" width= "100" /> < li> < a class = "cloud-zoom-gallery" href= "masdefault.jpg" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "masdefault.jpg" width= "100" height= "114px" /> < li> < a class = "cloud-zoom-gallery" href= "kostyum" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "kostyum.jpg" width= "100" height= "114px" />

În aparență, seamănă cu o galerie obișnuită creată folosind o listă cu marcatori. Elementele pluginului cloud-zoom sunt, de asemenea, deja recunoscute, indicând unele dintre setările acestuia. În acest caz, trebuie să acordați atenție comenzii useZoom, care leagă fiecare element al galeriei de blocul principal de vizualizare. Conexiunea este formată din identificatori care se potrivesc. În plus, a fost adăugat un alt parametru - smallImage, care, la rândul său, determină ce imagine să fie afișată într-un format redus. Este de remarcat faptul că pentru modul galerie trebuie să aveți trei imagini: 2 care vor interacționa cu pluginul și alta într-o versiune mai mică pentru a crea o listă de pictograme.

În practică, acest exemplu ar arăta astfel

Dacă ajax este folosit pentru a lansa galeria, este posibil ca pluginul să nu funcționeze. Pentru a remedia această eroare, trebuie să reinițializați pluginul. În formă standard, arată așa

JavaScript

jQuery(".cloud-zoom, .cloud-zoom-galerie") . CloudZoom() ;

În concluzie, aș dori să remarc ușurința în utilizare a pluginului și flexibilitatea atunci când faceți ajustări la designul acestui element funcțional. În plus, suntem mulțumiți de rata mare de compatibilitate între browsere și dimensiunea redusă a scriptului - doar 6 kiloocteți. Suportul pentru modul galerie merită o atenție specială. Singurul lucru care este puțin confuz este că toate setările sunt făcute direct în documentul HTML, acest lucru ne blochează puțin codul. Ar fi mai practic să le puneți într-un fișier js extern. Ei bine, în general, pluginul este demn de atenție și recunoaștere.

Mărirea suprafeței pătrate.

Acest plugin nu este în niciun fel inferior în calitate scripturilor comerciale de scalare a imaginilor, cum ar fi Magic Zoom. Multe caracteristici diferite și compatibilitate cu cele mai populare browsere. Vă recomand să urmăriți acest script în acțiune pe pagina demo. Cred că nu te va lăsa indiferent.

Script relativ flexibil. Zonele de afișare sunt ușor de personalizat folosind CSS. Pluginul mărește o zonă mică sub axilă. Comutați între dimensiunile mari și mici ale întregului conținut făcând dublu clic

Realizat sub forma unui ecran de iPhone.

Pentru a vizualiza o imagine în detaliu, treceți pur și simplu mouse-ul peste ea.

O implementare interesantă a unui portofoliu, creată prin interconectarea a două plugin-uri jQuery: Cloud Zoom și Fancybox. Când treceți mouse-ul peste o miniatură, apare o copie mărită a zonei de sub cursor. Făcând clic pe o miniatură, se deschide o galerie Fancybox care vă permite să vizualizați mai multe imagini la dimensiunea completă pentru acel proiect din portofoliul dvs.

Mărește zona de sub cursor.

Efect de lupă pentru a mări o parte a unei imagini.

Efect de lupă când treceți mouse-ul peste o imagine. Implementat folosind jQuery.

Efectul creșterii zonei imaginii la hover.

Poate fi folosit pentru a implementa vizualizarea detaliată a produselor în magazinele online.

Pluginul jQuery face posibilă implementarea vizualizării unei imagini mari într-un bloc limitat. În acest caz, navigarea va fi efectuată prin deplasarea dreptunghiului pe miniatură.

AJAX-zoom este un plugin de galerie foarte funcțional, cu o gamă largă de funcții. Pluginul rulează pe JQuery și PHP și are peste 250 de opțiuni de afișare. Pe lângă funcționalitatea sa, este un plugin foarte flexibil care poate fi integrat în orice site web.