Bootstrap - Creați o galerie de imagini. Aspect adaptiv, lecția a treia

BlocksEste un plugin care vă permite să creați o grilă de marcare dinamică. Gestionează transformarea elementelor HTML în „blocuri” și le aranjează în grila paginii. Pentru a face acest lucru, trebuie doar să specificați numărul de coloane, iar pluginul va face restul. În plus, puteți chiar să combinați „blocuri” și să faceți unul mare.

BlocksIt.js va repoziționa elementele selectate folosind poziționarea absolută. Acesta calculează poziția de sus și din stânga pentru un element pe baza anumitor criterii:

Începeți un nou bloc de la stânga la dreapta și
Plasați un nou bloc sub cel mai scurt bloc.

Pentru a utiliza, trebuie să conectați biblioteca jQuery și scriptul plugin:

Apoi, apelăm funcția .BlocksIt() pe obiectul jQuery. Sunt posibile mai multe setări. $(document).ready(function() ( $("#objectID").BlocksIt(); )); Asta e tot.
Dacă blocurile conţin elemente, asigurați-vă că sunt dimensionate înainte de a apela .BlocksIt() și asigurați-vă că imaginile sunt deja încărcate. Pentru a face acest lucru, puteți folosi $(window).load() pentru a vă asigura că totul este încărcat în DOM sau puteți utiliza un plugin similar cu waitForImages pentru a verifica starea imaginilor.

Opțiuni

Când apelați pluginul, puteți specifica mai mulți parametri suplimentari:

numOfCol:
Tip: int Implicit: 5
Numărul de coloane care vor fi create.

offsetX:
Tip: int Implicit: 5
Umplutură stânga și dreapta pentru fiecare bloc.

offsetY:
Tip: int Implicit: 5
Marginea de sus și de jos pentru fiecare bloc.

blockElement:
Tip: String Implicit: 'div'
Elementul copil care va fi convertit în blocuri.

HTML

Exemplu de marcare:

... ... ... ... ... Atributul data-size indică dimensiunea blocului (pentru o combinație de blocuri).
Și scriptul de apelare poate arăta astfel: $(document).ready(function() ( $("#container").BlocksIt(( numOfCol: 5, offsetX: 8, offsetY: 8, blockElement: ".grid" ) ); ));

În acest tutorial, ne vom uita la crearea unui aspect de pagină de portofoliu utilizând o grilă cu teracotă. Bibliotecile și Dave DeSandro sunt folosite pentru a crea rețeaua. Imaginile prezentate în demo sunt preluate de pe Unsplash.com.

Zidăria este o grilă bazată pe stâlpi. Spre deosebire de o grilă creată folosind float wrapping, o grilă Masonry nu are o înălțime fixă a rândului, ceea ce asigură utilizarea optimă a spațiului în cadrul unei pagini web, reducând orice spațiu alb inutil. Această grilă ar fi potrivită pentru paginile de portofoliu, paginile cu galerii de imagini și paginile cu postări pe blog.

1. Meta tag-uri și secțiune

Galeria Zidăriei

2. Antetul paginii

Antetul paginii - secțiunea conține următoarele elemente container:
- siglă;
- Meniu principal

Helen Parker fotograf personal

Partea principală a paginii este formată din blocuri cu fotografii, pentru care este setat un filtru în tonuri de gri, dându-le efectul de fotografii alb-negru. Când este plasat, acest efect dispare.

Subsolul conține informații despre drepturile de autor și link-uri către rețelele sociale.

Pentru o funcționare completă, trebuie să conectați următoarele scripturi:

Problema cu suprapunerea imaginilor grilă este rezolvată folosind plugin-ul imagesloaded. Detectează când o imagine este încărcată și apoi construiește o grilă de zidărie.

O astfel de componentă se poate potrivi perfect ca fundal sau element decorativ în designul unui site web, deoarece avem capacitatea de a afișa imagini și de a le aplica tranziții aleatoriu.

Vom folosi următoarele pluginuri jQuery suplimentare:

*pentru majoritatea tranzițiilor CSS
* pentru a verifica compatibilitatea browserului pentru parametrii CSS corespunzători

Imaginile frumoase din acest tutorial au fost contribuite de Sherman Geronimo-Tan () și sunt distribuite sub licența generică Creative Commons Attribution 2.0 (CC BY 2.0).

Structura HTML va include o listă simplă neordonată cu elemente de ancorare și imagini:

$("#ri-grid").gridrotator();

});
Nu uitați să includeți și alte scripturi necesare.

Opțiuni

// număr de rânduri
rânduri: 4,

// numar de coloane
coloane: 10,

// rânduri/coloane pentru diferite lățimi de ecran
//adică w768 este pentru ecrane mai mici de 768 de pixeli
w1024: (
rânduri: 3,
coloane: 8
},

w768: (
rânduri: 3,
coloane: 7
},

w480: (
rânduri: 3,
coloane: 5
},

w320: (
rânduri: 2,
coloane: 4
},

w240: (
rânduri: 2,
coloane: 3
},

// pas: numărul de articole care sunt înlocuite în același timp
// aleatoriu ||
// notă: pentru probleme de performanță, numărul nu ar trebui să fie > options.maxStep
pas: „aleatoriu”,
maxStep: 3,

// împiedică utilizatorul să facă clic pe elemente
preventClick: adevărat,

// tipul de animație
// aratăAscunde || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotiți la stânga || roteșteDreapta || rotateTop ||
// rotireBottom || scară || rotește3d ||
// roteșteLeftScale || rotateRightScale ||
// roteșteTopScale || rotateBottomScale || Aleatoriu
animType: „aleatoriu”,

// viteza de animație
animSpeed: 500,

//facilități de animație
animeEasingOut: „liniar”,
animeEasingIn: „liniar”,

// articolul(ele) vor fi înlocuite la fiecare 3 secunde
// notă: pentru probleme de performanță, timpul „nu poate” fi< 300 ms
interval: 3000
Atunci când determinați dimensiunea grilei, ar trebui să luați în considerare faptul că veți avea mai puține imagini în grilă decât ați pus în listă. Să presupunem că veți avea 50 de imagini în listă și veți defini 5 coloane și 4 rânduri. Astfel vom obține o grilă cu 20 de imagini și posibilitatea de a trece la restul de 30.

Consultați aceste demonstrații cu trei configurații diferite:

* : Animații aleatorii / 55% lățime container / 3 secunde între comutătoare

O soluție similară poate fi folosită pentru a afișa cele mai recente articole de blog sau pentru a prezenta produse.

O modalitate unică de a-ți afișa fotografiile într-o galerie jQuery de lux.

Pluginul jQuery este perfect pentru implementarea unei pagini de produs cu mai multe imagini. Tranziția între imagini se poate face folosind miniaturi sau folosind săgețile de navigare.

Imaginea se mărește atunci când treceți mouse-ul peste ea.

Galeria jQuery profesională din 2011.

Un alt plugin jQuery de înaltă calitate de la dezvoltatorii Nivo slider. Măriți imaginea făcând clic pe miniatură.

Noua galerie jQuery pentru 2011. Fluxul de imagini se întinde pe toată lățimea ecranului. Puteți naviga între fotografii în trei moduri: folosind rotița mouse-ului, derulând în partea de sus a galeriei și folosind blocul de miniaturi din partea de jos. Galeria arată foarte impresionantă.

Imaginile din galerie sunt mărite aleatoriu și reduse din nou, creând un efect de bule.

Folosind cursorul din partea de sus, puteți modifica distanța dintre imaginile din stivă. Când faceți clic pe o imagine, aceasta se rotește.

Plugin din 2011. O nouă galerie cu descrieri de imagini, care se întinde pe întreaga zonă a ferestrei browserului, indiferent de dimensiunea acesteia. Miniaturile imaginilor sunt implementate în mod interesant. Tranziția între fotografii se realizează folosind săgețile de lângă miniatură și folosind rotița mouse-ului.

Pluginul scanează automat folderul și creează copii mici ale imaginilor.

Un efect interesant când treceți mouse-ul peste o miniatură.

Destul de recent am menționat deja această soluție jQuery pentru crearea de galerii pe ecran complet. Astăzi aș dori să vă prezint cea mai recentă versiune a acestui plugin profesional. Scenariul a fost complet rescris, acum galeria funcționează și mai repede, și au fost adăugate câteva setări interesante, de exemplu, navigarea folosind tastatura, viteza variabilă de modificare a imaginilor, dimensiunea ecranului și altele.

Noua galerie jQuery pentru proiectele tale.

Galeria apare pe pagină când apăsați un buton. În jurul imaginii mărite apar miniaturi. Puteți controla schimbarea automată a imaginilor. Tehnologii folosite: jQuery, CSS, PHP.

Galeria jQuery. S-a implementat schimbarea automată a diapozitivelor și derularea miniaturilor dacă sunt prea multe.

Plugin pentru galerie de imagini folosind jQuery.

O galerie de imagini optimizată pentru vizualizare pe dispozitive mobile (telefoane sau tablete).

Slider nou jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

O galerie originală sub formă de miniaturi de diferite dimensiuni împrăștiate pe ecran, stilizate ca tablouri. Când faceți clic pe miniatură, apare o zonă cu o descriere a imaginii și când faceți din nou clic, apare imaginea mare originală.

Interesant efect de hover.

jQyery galerie cu miniaturi. A fost implementată capacitatea de a vizualiza într-o fereastră compactă și într-o fereastră pe ecran complet, precum și capacitatea de a dezactiva/activa schimbarea automată a diapozitivelor.

Grila de imagini este întinsă în funcție de lățimea ferestrei browserului. Un efect de hover interesant: rândul și coloana active sunt evidențiate.

Galerie jQuery ușoară în câteva linii de cod.

Pagina demo prezintă mai multe opțiuni pentru mega meniuri drop-down, în diferite stiluri. În acest meniu puteți configura: efectul de renunțare, viteza de renunțare și, de asemenea, puteți alege între o renunțare făcând clic sau trecând mouse-ul peste un articol.

Galeria jQuery cu legende de imagini. Mai multe efecte de tranziție de diapozitive. Navigarea între imagini se realizează fie folosind săgeți, fie făcând clic pe miniatură.

Imaginea și miniaturile sale sunt realizate sub formă de cercuri.

O soluție javascript originală pentru proiectarea portofoliului unui fotograf. Navigarea între imagini se realizează folosind săgețile Sus/Stânga/Dreapta și folosind mini-pătrate (imitarea mișcării în spațiul 2D). Puteți grupa fotografii din diferite sesiuni foto în diferite rânduri verticale și puteți naviga prin ele folosind elemente de navigare. Urmăriți demonstrația.

Plugin pentru vizualizarea imaginilor care se întind pe întreaga dimensiune a ferestrei browserului. Poate fi folosit pentru a afișa lucrări dintr-un portofoliu.

Galeria integrată cu harta Google. Îl puteți extinde pe ecran complet făcând clic pe pictograma din colțul din dreapta jos. Perfect pentru site-urile de călătorie.

Galeria jQuery cu miniaturi.

Prezentare de diapozitive cu miniaturi.

Prezentare ondulată a imaginilor și a conținutului pe o pagină. Când faceți clic pe o miniatură, toate imaginile sunt mărite și apar numele lor. Când apăsați din nou, se deschide un bloc cu o descriere a fotografiei.

Multe opțiuni de afișare și setări.

Arată frumos și funcționează grozav în toate browserele moderne

Puteți controla prezentarea automată de diapozitive (pornire/oprire), comuta diapozitive folosind săgețile de la tastatură, paginarea automată a titlurilor diapozitivelor dacă există multe dintre ele, acceptă mai multe galerii pe o singură pagină, subtitrări pentru diapozitive, suport API și posibilitatea de a crea propriile dvs. efecte de tranziție de diapozitiv

Așa ar trebui să arate rezultatul galeriei pe care o vom crea. Puteți urmări demo și, dacă doriți, descărcați rezultatul final al galeriei.

Un exemplu de aceeași galerie, dar realizată pe framework-ul Bootstrap 3:

Vom crea a doua versiune a galeriei de imagini pe baza pluginului Gridify. Acest plugin este conceput pentru a crea o grilă de imagini precum Pinterest.

Vă prezentăm procesul de creare a acestei galerii în următorii pași:

Notă: Există mai multe implementări ale pluginului gridify.js. În acest proiect, îl vom alege pe cel care se bazează pe biblioteca jQuery.

$(funcție () ( var opțiuni = ( srcNode: "img", // elemente grilă (clasă, nod) margine: "15px", // marjă în lățime pixel: "240px", // lățime element grilă în pixel max_width : "", // lățimea elementului de bandă dinamică redimensionabilă: true, // re-aranjare dacă tranziția de redimensionare a ferestrei: "toate 0.5s ease" // suportă tranziția pentru CSS3 );

2. Crearea codului HTML pentru galerie:

...

Vom vizualiza imaginea galeriei, ca în exemplul anterior, folosind fancyBox.

Cod final pentru o galerie de imagini asemănătoare Pinterest pentru Bootstrap 4:

Bootstrap 4 - Crearea unei galerii de imagini receptive folosind gridify.js img ( padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; ) img:hover (opacitate: 0,6; filter: alpha) (opacitate=60); ... $(function() ( var options = ( srcNode: "img", // marja elementelor de grilă: "15px", // marja în lățimea pixelilor: "240px", // lățimea elementului de grilă în pixeli max_width: " ", // lățimea elementului din bandă dinamică redimensionabilă: adevărat, // redispunerea dacă tranziția de redimensionare a ferestrei: "toate 0.5s ease" // suportă tranziția pentru CSS3 ); $(".grid").gridify(opțiuni); ) );

Un exemplu de aceeași galerie pe Bootstrap 3.