jquery lightbox;

Casetă lightbox - Acest JQuery Plugin, care este folosit pentru a afișa o imagine sau orice alt tip de conținut într-o cutie decorată special care apare, de obicei, pe un fond translucid umbrită din partea de sus a conținutului paginii principale.

Înainte de a instala plug-in pe o pagină și să se ocupe cu setarea, să ne uităm la exemple:

Noțiuni de bază cu Lightbox

Descărcați cea mai recentă versiune a pluginului (de asemenea, disponibile prin intermediul Bower: Pergole instalați lightbox2 parametrul --save). După aceea, dezarhivează fișierul zip și au o privire la un exemplu de lucru al unei jos stripat, care se află în folderul exemple.

Următorul cod, plug-in-uri, introduceți înainte de corpul de închidere:

Asigurați-vă că JQuery, doriți în căsuța de stocare, de asemenea, încărcate. Dacă utilizați deja JQuery (necesita JQuery 1.7 sau mai sus) pe pagină, asigurați-vă că acesta este încărcat înainte de lightbox.js. Dacă nu ați conectat jQuery, vospolzuytel dist / js / lightbox;-plus-jquery.js. care au deja biblioteca, sau descărcați cea mai recentă versiune a. site-ul. Asigurați-vă că cele patru imagini prescrise în locația lightbox.css în locația specificată. Puteți face o fotografie dintr-un dosar / dist / imagini.

Acum, pentru codul HTML. Adăugați atributul de date-lightbox pentru a lega care conține imaginea, și la care dorim să se aplice plugin. Deoarece valoarea atributului, folosiți un nume unic pentru fiecare imagine. De exemplu:

Adăugați atributul de date-titlu. dacă doriți să arate titlul. Dacă aveți un grup de imagini similare pe care le-ar dori să combine într-un set, folosiți aceeași valoare în atributul de date-lightbox pentru imaginea necesară. De exemplu:

setări Lightbox

Dacă doriți să modificați oricare dintre setările implicite, apelați metoda de opțiune.

alwaysShowNavOnTouchDevices Implicit: false

Implicit fadeDuration: 500

Timpul necesar pentru dispariția containerului, în milisecunde.

fitImagesInViewport Implicit: true

Dacă este setat, înălțimea imaginii este limitată la această valoare (în pixeli). Raportul de aspect nu este respectat.

Dacă este setat, lățimea imaginii va fi limitată la această valoare (în pixeli). Raportul de aspect nu este respectat.

positionFromTop Implicit: 50

Implicit resizeDuration: 700

Timpul în care containerul ar Lightbox schimbare lățimea și înălțimea atunci când se deplasează imagini de diferite dimensiuni (în milisecunde).

showImageNumberLabel Implicit: true

Dacă fals. textul va indica numărul imaginii curente și numărul total de imagini din set, de exemplu: „Imagine 2 din 4“.

Implicit wraparound: fals

Dacă este adevărat. apoi ultimul buton de afișare a imaginii pentru a afișa imaginea următoare apare. Făcând clic pe ea va provoca afișarea primei imagini.