Plugin-uri jQuery Top

Deci, să ne uităm la exemple de lucru cu fancyBox plugin - unul dintre cele mai bune de acest gen și, probabil, meu preferat plug-in lightbox, pentru că-l folosesc aproape în fiecare proiect.

Descarcă fancyBox versiunea curentă (versiunea 2.1.5 ca din acest scris) și conectați fișiere.

Este nevoie de fișiere, fișierele rămase sunt plugin opționale. Acum să adăugați un efect de lightbox pentru mai o singură imagine. Partiționarea poate fi ca aceasta:

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Pentru a se referă la imaginea originală (mare) am stabilit clasa fancybox pe care și va forma de colectare a jQuery și apel metoda utilizată plugin-ul fancybox. Acum, să numim metoda potrivită:

Acum, când faceți clic pe o miniatură într-o fereastră modal va afișa imaginea originală. În acest caz, aspectul imaginii va fi însoțită de o animație frumos.

FancyBox, de asemenea, vă permite imagini de grup, creând o galerie, este suficient pentru a adăuga imagini grupate atributul rel cu aceeași valoare. Să mai adaug câteva imagini și să le combine într-un grup.

Acum, atunci când deschideți orice imagine vom vedea săgețile stânga și dreapta care vă permit să comutați între imagini.

Apropo, un avantaj semnificativ fancyBox este adaptabilitatea sa. Puteți încerca redimensionează fereastra browser-ului - pluginul va ajusta automat la dimensiunea ferestrei.

Pentru fiecare imagine, puteți adăuga o semnătură, care va fi afișată sub imaginea. Acest lucru se face prin intermediul atributului title pentru link-uri:

Și, desigur, plugin-ul ne oferă mai multe opțiuni. folosind care putem fancyBox ton sub el: pentru a schimba efectul de animație, design, evenimente, și multe altele.

Pe aceasta astăzi. Surse de la un articol, îl puteți descărca de aici. Mai multe despre jQuery și jQuery UI bibliotecă puteți învăța de la lecții sau cursul nostru. Mult noroc!

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram