O galerie simplă în jquery. Plugin pentru galerie jQuery „MB.Gallery”. Pluginul jQuery CSS3 „Efect de afișare unde”
Biblioteca jQuery a apărut în 2007. De atunci, un număr mare de plugin-uri au fost dezvoltate folosindu-l, inclusiv galerii de imagini. Sunt pline de cadre frumoase, tranziții decente de animație și design minunat. Cu toate acestea, în mod interesant, încă nu am întâlnit nicio galerie jQuery cu capacitatea de a roti o imagine. Dar destul de des trebuie să vizualizați imagini răsturnate la 90 de grade sau chiar încărcate cu susul în jos. Aceasta este exact funcționalitatea necesară pentru proiectul meu.
De fapt, răsturnarea imaginilor folosind javascript este foarte ușor. Știind acest lucru, am decis să scriu propria mea galerie de imagini rotativă simplă, care se bazează pe pluginul jquery. Nu mai devreme spus decât făcut, după câteva ore au apărut rezultate destul de potrivite:
Demonstrație de muncă
Cum se utilizează
Pentru ca galeria să funcționeze corect, aveți nevoie de două lucruri: o bibliotecă jQuery încărcată și fonturi grozave de fonturi încărcate. În cap includem stilurile și scripturile necesare:
Creăm layout-ul necesar al galeriei:
Și inițializați galeria:
$(function() ( $(".simple_img_gallery").createSimpleImgGallery(); ));
Gata. A ieșit minimalist și destul de drăguț.
Galeria implementată este disponibilă pe github.
Concluzie
Încă o galerie de imagini a apărut pe internet :)
Ca o dezvoltare ulterioară a galeriei, puteți implementa capacitatea de a mări și reduce imagini - aceasta este, de asemenea, o funcție destul de utilă în proiectele comerciale, de care majoritatea galeriilor sunt lipsite.
De asemenea, pentru a reduce numărul de dependențe, puteți încerca să renunțați la font-awesome, deoarece din acest set mare de pictograme sunt folosite doar 4 dintre ele.
Bună ziua tuturor!
Dezvoltatorii de toate liniile, atunci când își creează următorul proiect web, sunt adesea interesați de întrebarea cum să-și prezinte utilizatorilor diverse tipuri de imagini, fie ele fotografii sau seturi de imagini. Pentru aceasta, mințile iscoditoare ale spațiului online, în cea mai mare parte desigur acesta este un spațiu „burghez”, caută din ce în ce mai multe soluții noi pentru a crea diapozitive și galerii foto spectaculoase, colorate și, cel mai important, funcționale. În cea mai mare parte, acestea sunt personalizate de dezvoltatori pentru a se potrivi cu designul șablonului proiectului web care este creat sau sub formă de pluginuri și module pentru un anumit motor de gestionare a site-ului. Merită să vă uitați la șabloanele moderne pentru că nici o singură temă, cu rare excepții, nu se poate descurca fără un fel de glisor de plug-in sau un simplu rotator de imagine. Deci, este de înțeles că mulți dezvoltatori web doresc să aibă așa ceva în arsenalul lor și să-și surprindă cititorii la maximum prezentând în mod eficient imagini pe site-urile lor.
Continuând seria de recenzii în curs de desfășurare a noilor soluții apărute la creare, am decis să alcătuiesc o colecție mai completă a celor mai interesante și eficiente prezentări de diapozitive și galerii foto pe care le-am întâlnit vreodată, create folosind magia jQuery.
Aș dori să vă avertizez imediat că resursele discutate în recenzie sunt în principal în limba engleză, dar cred că oricine are nevoie de ele își va da seama intuitiv sau cu ajutorul traducătorilor, dintre care sunt un ban pe duzină. Și dacă căutați suficient de mult, puteți găsi descrieri ale tehnicii de creare a unor galerii și slidere în rusă, deoarece mulți dintre dezvoltatorii noștri web traduc în timp ce lucrează la un anumit proiect, mai întâi pentru ei înșiși, apoi postează descrieri detaliate ale tuturor manipulărilor lor. pentru acces gratuit.
De exemplu, asta am făcut, când lucram la mecanismul de creare, am găsit mai întâi o opțiune de galerie potrivită pentru mine în burzhunet, am tradus-o pentru o mai bună înțelegere a ceea ce făceam și în viitor. acest lucru s-a dovedit, îndrăznesc să sper, nu un articol rău despre utilizarea scriptului Highslide, cu exemple de lucru în diferite variante de aplicație.
Așadar, destule versuri inutile, să trecem direct la recenzie, să urmărim, să citim scurte explicații și să alegem dintr-un număr mare de noi plugin-uri și scripturi jQuery pentru implementarea unor slidere de imagini interesante, galerii foto, prezentări de diapozitive pe site-urile dvs.: cu glisoare de schimbare automată și manuală, glisoare de imagine de fundal, cu și fără miniaturi etc. etc...
Of.Site |
O galerie de imagini jQuery completă, personalizabilă, cu elemente de prezentare de diapozitive, efecte de tranziție și mai multe opțiuni de album. Compatibil cu toate browserele moderne desktop și mobile.
Un tutorial despre cum să creați o galerie pe ecran complet folosind jQuery. Ideea este ca o miniatură a imaginii prezentate pe tot ecranul să apară în lateral, cu o reflexie pe măsură ce vă deplasați prin imagini folosind săgețile sau clicul mouse-ului. Imaginile mari se deplasează în sus sau în jos într-un stil de prezentare de diapozitive, în funcție de tranziția pe care o alegeți. Abilitatea de a scala imaginea, ceea ce face ca imaginea din fundal să fie vizualizată în modul ecran complet sau ajustată la dimensiunea paginii.
Paralax Slider
Parallax Slider este o soluție interesantă pentru organizarea afișării imaginilor sub forma unui slide show cu elemente de control manual. Amplasarea originală a imaginilor în miniatură atrage atenția. Site-ul oficial are o detaliere completă a modului de integrare și configurare a glisorului.
Minimalistic Slideshow Gallery with jQuery este o galerie de imagini excelentă cu elemente pentru schimbarea automată a imaginilor, precum și capacitatea de a controla manual afișarea și selectarea imaginilor dintr-un bloc derulant cu o grilă de miniaturi. Unul dintre dezavantaje este lipsa de vizualizare a imaginilor la dimensiune completă, dar acesta este minimalismul acestei galerii.
Aceasta este o prezentare de diapozitive pe tot ecranul cu imagini care se schimbă automat, fără efecte uluitoare, totul este simplu și de bun gust.
Minimit Gallery este un plugin jQuery extrem de personalizabil, cu o selecție mare de tranziții la afișarea imaginilor. Folosind galeria Minimit, puteți organiza o afișare de imagini sub forma unui carusel, prezentare de diapozitive, un rotator simplu și un defilare obișnuit de imagini.
este un mic plugin jQuery (2kb) care oferă o modalitate simplă, fără sens, de a afișa imagini ca o prezentare de diapozitive.
este o galerie javascript frumos, cu controale intuitive și compatibilitate perfectă pe toate computerele, iPhone-urile și dispozitivele mobile. Foarte ușor de instalat și configurat
Spre deosebire de multe glisoare de imagine Javascript și jQuery, Slider.js este o soluție hibridă, alimentată de tranziții și animații CSS3.
Acesta este un șablon de o pagină pentru crearea diferitelor prezentări în HTML5 și CSS3.
Diapo slideshow este un proiect open source. Dacă doriți, puteți sugera modificări sau îmbunătățiri. Îl poți descărca și folosi gratuit și nimic și nimeni nu te împiedică să folosești acest glisor în proiectele tale. Slider-ul este ușor de personalizat, există tranziții interesante între conținutul prezentat și poți plasa orice în slider, funcționează destul de repede, fără nici un blocaj.
nu este altceva decât un alt instrument pentru crearea de prezentări de diapozitive pe site-uri web și alte proiecte web. Acceptă toate browserele moderne, animații orizontale și verticale, suport pentru tranziții personalizate, API de apel invers și multe altele. Puteți utiliza orice elemente HTML în diapozitivele dvs., este ușor de înțeles și accesibil pentru începători și este distribuit complet gratuit.
Prezentare de diapozitive JavaScript pentru dezvoltare agilă
Implementați-vă prezentările de diapozitive cu acest plugin jQuery minunat. Instrument extrem de personalizabil, astfel încât să vă puteți construi prezentarea de conținut conform cerințelor dvs. Pentru a oferi o integrare mai ușoară cu date externe sau date din CMS-ul dvs., este utilizat formatul de date. Aceasta este o versiune nouă și scrisă de la zero. Dezvoltatorii au încercat să descrie întregul proces de lucru cu creația lor foarte clar și inteligibil.
este un plugin jQuery care vă permite să transformați liste neordonate în prezentări de diapozitive cu efecte de animație atractive. Într-o prezentare de diapozitive, puteți afișa o listă de diapozitive, fie folosind numere sau miniaturi, fie folosind butoanele Anterior și Următorul. Glisorul are multe tipuri de animație originale, inclusiv cub (cu diferite subtipuri), țeavă, bloc și multe altele.
Un set complet de instrumente pentru organizarea a tot felul de prezentări de conținut variat pe proiectele dvs. web. Băieții burghezi au făcut tot posibilul, incluzând aproape toate tipurile de slidere și galerii folosind magia jQuery. Glisor de fotografii, galerie foto, prezentare dinamică de diapozitive, carusel, glisor de conținut, meniu de file și multe altele, în general, există loc pentru imaginația noastră ireprimabilă să se dezlănțuie.
Acesta este un plugin de prezentare de diapozitive jQuery care este creat cu simplitate în minte. Este împachetat doar cel mai util set de funcții, atât pentru începători, cât și pentru dezvoltatori avansați, oferind posibilitatea de a crea prezentări simple, dar în același timp foarte eficiente, ușor de utilizat.
— un slider simplu construit pe jQuery, simplu din toate punctele de vedere, care nu necesită abilități speciale, cred că mulți îl vor găsi util pentru implementarea prezentărilor de diapozitive pe site-urile lor. Pluginul a fost testat în toate browserele moderne, inclusiv în browserul lent IE.
jbgallery este un fel de widget de interfață cu utilizatorul scris în javascript al bibliotecii jQuery. Funcția sa este de a afișa o imagine mare ca fundal al site-ului în modul ecran complet, mai multe imagini sub forma unui glisor. Toate modurile de vizualizare au comenzi de vizualizare. Este o soluție interesantă în felul său și, în unele cazuri, nici măcar nu este standard.
Este un plugin jQuery ușor de utilizat pentru afișarea fotografiilor dvs. ca o prezentare de diapozitive cu efecte de tranziție între imagini (ați văzut altele mai interesante). jqFancyTransitions este compatibil și testat pe scară largă cu Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
este un plugin jQuery distribuit gratuit pentru vizualizarea imaginilor și a altor informații în formularul Lightbox. Fereastra pop-up cu comenzi, fundal umbrit și toate astea, simplă și de bun gust.
Un alt plugin jQuery din seria Lightbox, deși cântărește revoltător de puțin (9 KB), dar are o mulțime de funcționalități. Există o interfață proiectată decent pe care o puteți îmbunătăți sau personaliza oricând folosind CSS.
Deja din nume devine clar că nu este nimic fantezist, avem un scroller automat de imagini foarte simplu, cu controale complet lipsă. Cine știe, poate acest glisor îți va atrage atenția tocmai prin minimalismul său.
Rotator de imagine cu diferite tipuri de tranziții. Funcționează atât automat, cât și prin clic și este destul de ușor de configurat.
— o galerie de imagini cu drepturi depline, mai degrabă decât doar un glisor. Previzualizarea miniaturilor și abilitatea de a selecta efecte de tranziție, suport complet pentru toate browserele, descriere detaliată a integrării într-un proiect web și distribuție gratuită.
Aceasta este o implementare a prezentărilor de diapozitive gata de utilizare folosind scriptaculous/prototype sau jQuery. Horinaja este oarecum o soluție inovatoare, deoarece vă permite să utilizați o roată pentru a defila prin conținutul plasat în glisor. Când indicatorul mouse-ului se află în afara zonei de prezentare, defilarea are loc automat când indicatorul este plasat deasupra prezentării, defilarea se oprește.
Aceasta este o caracteristică dintr-o serie de defilare a imaginilor simple, deși cu comenzi de vizualizare și, prin urmare, funcționează atât în modul automat, cât și în modul manual.
s3Slider este un plugin jQuery care creează o prezentare de diapozitive dintr-o listă neordonată de imagini și poate fi implementat cu ușurință pe orice platformă web.
Acesta este un plugin jQuery care este optimizat pentru procesarea unor volume mari de fotografii economisind în același timp lățimea de bandă.
Fundal Vegas
Pluginul Vegas Background jQuery vă permite să adăugați imagini de fundal frumoase pe tot ecranul paginilor web, toate cu elemente de prezentare de diapozitive. Dacă studiați cu atenție complexitățile lucrului cu pluginul, puteți găsi multe soluții interesante, desigur, numai dacă aveți nevoie de el.
— un slider ca slider, nici mai mult, nici mai puțin, cu legende pentru imagini sau anunțuri de articole și comenzi simple, la întâmplare.
este un javascript ușor (aproximativ 5 KB) pentru organizarea vizualizării imaginilor. Redimensionarea și scalarea automată a imaginilor mari vă permite să vizualizați imaginea la dimensiune completă în fereastra browserului
Versiunea 4 a Galeriei de imagini PikaChoose jQuery este disponibilă! Pikachoose este o prezentare jQuery ușoară, cu caracteristici excelente! Integrarea cu Fancybox, teme excelente (deși nu gratuite) și multe altele sunt oferite atenției dumneavoastră de către dezvoltatorii de pluginuri.
Verifică numărul de imagini din înregistrarea dvs. și creează în mod dinamic un set de link-uri foto ca navigare digitală. În plus, făcând clic pe fiecare imagine se va deplasa înainte sau înapoi și, de asemenea, puteți derula imaginile în funcție de zona în care faceți clic pe imagine (de exemplu: făcând clic pe partea stângă a imaginii, diapozitivele vor muta înainte și înapoi, respectiv, pentru partea dreaptă a imaginii).
Un alt glisor jQuery care se va potrivi perfect în orice șablon WordPress.
O altă dezvoltare a „Nivo”, ca tot ceea ce fac băieții din acest studio, pluginul este realizat cu o calitate înaltă, conține 16 efecte unice de tranziție, navigare cu tastatură și multe altele. Această versiune include un plugin dedicat direct pentru WordPress. Deci, pentru toți fanii acestui motor de blogging, Nivo Slider va fi potrivit pentru tine.
Plugin jQuery care vă permite să creați rapid un glisor simplu, eficient și frumos pentru imagini de orice dimensiune.
Pirobox este un script jQuery „lightbox” ușor, vizualizarea se realizează într-un bloc pop-up care se ajustează automat la dimensiunea imaginii, cu toate controalele.
Creatorii acestei galerii oferă o prezentare destul de originală a imaginilor. Imaginile sunt afișate în miniaturi sub formă de val, când dați clic pe miniatură, vom vedea o versiune de dimensiune medie a imaginii, faceți a doua oară și veți vedea o imagine mare. Puteți considera acest lucru un experiment, dar trebuie să recunoașteți că ceva nou și neobișnuit este întotdeauna interesant.
Prezentare de diapozitive pe ecran complet cu HTML5 și jQuery
Pentru a crea prezentări de diapozitive și pentru a afișa imagini în modul ecran complet, dezvoltatorii au folosit deja familiarul plugin Vegas jQuery, care conține multe idei și tehnici descrise anterior în detaliu în articolele grupului. Prezența elementelor audio HTML5 și stilul tranzițiilor între imagini sunt atractive.
O altă dezvoltare a echipei Codrops, o galerie de imagini cu drepturi depline și funcțională, dar nu are rost să o descrii, trebuie să o vezi.
Prezentare de imagini, imaginile dispar chiar în fața ochilor tăi, efectul este pur și simplu minunat.
Este un cadru de galerie de imagini JavaScript construit pe deasupra bibliotecii jQuery. Scopul este de a simplifica procesul de dezvoltare a unei galerii de imagini profesionale pentru web și dispozitive mobile. Îl puteți vizualiza într-o fereastră pop-up sau în modul ecran complet.
Începem în liniște să ne obișnuim și să așteptăm noi lucrări de la echipa Codrops. Vă rugăm să obțineți un glisor de imagine excelent cu un efect de tranziție 3D magnific pentru a vizualiza imaginile în modul ecran complet.
Un alt plugin WordPress din seria organizatoare de diapozitive. Se integrează cu ușurință în aproape orice design și oferă multe opțiuni de personalizare atât pentru utilizatorii experimentați, cât și pentru cei neexperimentați.
Un alt plugin scris pentru WordPress, va face mult mai ușor să organizați o prezentare de imagini sau orice alt conținut pe blogurile dvs.
Un bun plugin de prezentare de diapozitive pentru integrarea în WordPress. Xili-floom-slideshow este instalat automat și sunt permise și setările personale.
Slimbox2 este un plugin WordPress bine stabilit pentru afișarea imaginilor cu efect Lightbox. Acceptă prezentarea automată de diapozitive și redimensionarea imaginilor în fereastra browserului. Și, în general, acest plugin are multe avantaje față de alte plugin-uri din această serie.
Acest plugin/widget vă permite să creați prezentări și prezentări dinamice, controlate pentru site-ul sau blogul dvs. care rulează pe motorul WordPress.
Acest plugin WordPress transformă imaginile încorporate ale galeriei dvs. într-o prezentare de diapozitive simplă și flexibilă. Pluginul folosește glisorul de imagine FlexSlider jQuery și setările personale ale utilizatorului.
este un plugin WordPress pentru organizarea de slideshow-uri de fotografii, imagini din SmugMug, Flickr, MobileMe, Picasa sau Photobucket RSS feed, funcționează și afișează folosind Javascript pur.
Un glisor simplu pentru WordPress și multe altele. Nimic de prisos sau greoi, lucrul este realizat într-un stil minimalist, se pune accent pe stabilitate și viteză, se conectează perfect la motorul de gestionare a blogului.
În opinia mea, Skitter este unul dintre cele mai bune glisoare care acceptă lucrul cu WordPress. Sunt atras de stabilitatea și viteza de funcționare, controalele nu prea proeminente, efectele de tranziție și o conexiune destul de simplă la tema.
este un plugin pentru WordPress cu ajutorul căruia poți organiza ușor și rapid o galerie de imagini pe site-ul tău cu posibilitatea de a o vizualiza în modul slide show. Afișajul poate fi fie automat, fie complet controlat, cu demonstrații de miniaturi și subtitrări pentru imagini.
Of.Site |
Afișează toate imaginile pentru o postare/pagină ca prezentare de diapozitive. Instalare ușoară. Acest plugin necesită Adobe Flash pentru versiunea cu animație de tranziție, dacă Flash nu este găsit, glisorul funcționează ca de obicei.
Un alt glisor simplu pentru WordPress, afișează imagini pentru postări și scurte anunțuri de articole. Folosesc doar un astfel de plugin pe acest blog din când în când.
Meteor Slides este un slider jQuery WordPress cu peste douăzeci de stiluri de tranziție din care să alegeți. Autorul a numit plugin-ul un „meteor”, ceea ce implică probabil viteza de funcționare, poate că nu am observat nimic meteoric.
oQey Gallery este o galerie de imagini cu drepturi depline, cu elemente de prezentare de diapozitive pentru WordPress, cu capabilități video și muzicale încorporate.
Este o prezentare de diapozitive cu elemente de animație flash pentru vizualizarea imaginilor și videoclipurilor pe site-uri web și bloguri. Puteți plasa acest glisor pe orice site web, în orice dimensiune și cu orice conținut doriți.
Pluginul Flash Gallery transformă galeriile tale obișnuite în pereți de imagini uimitoare, cu suport pentru mai multe albume per postare, vizualizare pe tot ecranul și modul de prezentare de diapozitive.
WOW Slider este un slider de imagine jQuery pentru WordPress cu efecte vizuale uimitoare (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack și Linear) și șabloane proiectate profesional.
Promotion Slider este un plugin jQuery care facilitează crearea unei prezentări de diapozitive simple sau implementarea mai multor zone de reclame rotative pe o pagină, deoarece este un instrument extrem de personalizabil, veți avea control deplin asupra a ceea ce afișați în glisor și asupra modului în care modulul funcționează în general.
|
Demo
|
Nou în versiunea 2.4: suport pentru sortarea fotografiilor prin drag-n-drop direct prin editorul WordPress, precum și posibilitatea de a adăuga link-uri foto la imaginile principale. (IE8 poate avea unele erori, funcționează bine în toate browserele majore. Autorii promit suport complet pentru IE8 în viitor.)
Coarda finală a acestei recenzii va fi acest plugin pentru WordPress, un alt slider cu efecte vizuale interesante pentru selectarea și schimbarea imaginilor.
Mă uit la tot ce este descris mai sus și sunt uimit, ce fantezie au acești oameni, dar nu asta este tot ceea ce diverși dezvoltatori web au venit în ultima vreme pe tema organizării imaginilor pe proiecte web. Este grozav că acum a devenit posibilă implementarea unor astfel de soluții minunate pentru crearea de galerii și prezentări de diapozitive.
Îndrăznesc să sper în liniște că în această colecție vei găsi ceva interesant pentru tine, vei crea propria ta galerie sau slider unic, spre bucuria utilizatorilor tăi și, bineînțeles, a iubitului tău sine, și unde am fi fără asta...
Am petrecut mult timp alegând subiectul pentru subiectul de astăzi. Drept urmare, am observat că încă nu am făcut colecții cu galerii de imagini. În opinia mea, este un subiect excelent, deoarece multe site-uri au galerii. Sincer, nu sunt toate foarte atractive. Având în vedere tendințele actuale în dezvoltarea jquery, html5 etc., m-am gândit că trebuie să existe soluții mult mai atractive decât cele pe care le întâlnisem înainte. Aşa. După ce am petrecut o zi, am reușit să găsim un număr mare de scenarii. Din tot acest munte, am decis să selectez doar, pentru că îmi place, așa cum ați observat deja din postările anterioare.
Galeria de imagini este aplicabilă nu numai în cazul albumelor foto. Scriptul poate fi folosit, cred că ar fi și mai corect, ca portofoliu pentru fotografi, designeri etc. Efectele Jquery vor ajuta la atragerea atenției vizitatorilor și pur și simplu să adauge eleganță site-ului tău.
Aşa. Vă aducem în atenție o colecție de pluginuri pentru galeria de imagini jquery pentru site.
S Gallery Un plugin atractiv pentru galerie de imagini Jquery. Animația funcționează folosind css3. 
DIAMONDS.JSplugin original pentru crearea unei galerii de imagini. Miniaturale sunt în formă de diamant, ceea ce este foarte popular în acest moment. Acest formular este realizat folosind css3. Singurul dezavantaj al acestei galerii este lipsa unei casete luminoase în care fotografia să se deschidă la dimensiune completă. Adică, va trebui să înșurubați pluginul lightbox. Acest script generează o grilă adaptivă de imagini sub forma unui diamant. 
Superbox O galerie de imagini modernă folosind Jquery, css3 și html5. Suntem cu toții obișnuiți cu faptul că atunci când faceți clic pe o previzualizare, imaginea completă se deschide într-o casetă de lumină (fereastră pop-up). Dezvoltatorii acestui plugin au decis că lightbox-ul și-a depășit deja utilitatea. Imaginile din această galerie se deschid sub previzualizare. Urmărește demonstrația și vezi că această soluție pare mult mai modernă. | Smooth Diagonal Fade Gallery O galerie de imagini modernă în care previzualizările sunt distribuite pe întreg spațiul ecranului. Scriptul poate scana un folder cu fotografii pe server, adică nu este nevoie să inserați fiecare imagine separat. Doar încărcați imaginile într-un folder de pe server și specificați calea către director în setări. Apoi, scenariul va face totul singur.
Gamma Gallery O galerie de imagini elegantă, ușoară și receptivă, cu o grilă în stil Pinterest, care a devenit foarte populară în zilele noastre. Scriptul funcționează perfect atât pe computere desktop, cât și pe dispozitive mobile cu orice rezoluție de ecran. O soluție excelentă pentru crearea unui portofoliu de designer web. 
GRILĂ DE MINIAȚI CU PREVIZUARE EXTENSIBILĂPlugin-ul este o grilă de imagini receptivă. Când dați clic mai jos, vor apărea o fotografie mai mare și o descriere. Bun pentru crearea unui portofoliu. 
jGalleryjGallery este o galerie de imagini pe ecran complet, receptivă. Efectele, tranzițiile și chiar stilul sunt ușor de personalizat. 
Glisse.js Un plugin simplu, dar foarte eficient pentru galerie de imagini. Aceasta este exact soluția atunci când trebuie să creați un album foto. Pluginul acceptă albume și are un efect de răsturnare foarte cool. 
Mozaic Flow O galerie de imagini simplă, receptivă, cu o grilă în stil Pinterest. 
GalereyaO altă galerie elegantă cu o grilă în stil Pinterest, filtrată pe categorii. Funcționează în browsere: Chrome, Safari, Firefox, Opera, IE7+, browser Android, Chrome mobil, Firefox mobil. 
minimum.jsO galerie de imagini gratuită, folosind JQUERY, 5 și CSS3. Are un aspect foarte atrăgător și, fără îndoială, va atrage atenția vizitatorilor tăi. 
flipLightBox O galerie de imagini simplă. Când faceți clic pe previzualizare, imaginea completă se deschide într-o casetă lightbox. 
blueimp GalleryGalerie flexibilă. Capabil să afișeze nu numai imagini, ci și videoclipuri într-o fereastră modală. Funcționează excelent pe dispozitivele tactile. Este ușor de personalizat și este posibil să extindeți funcționalitatea folosind plugin-uri suplimentare (vezi următorul plugin). Instalare și configurare
Printre varietatea de galerii foto, un loc aparte îl ocupă programele care folosesc previzualizările în miniatură pentru a se deplasa printre imaginile din fereastra de vizualizare (vezi, de exemplu, articolul Galerie foto prettyPhoto).Această metodă este deosebit de convenabilă pentru galeriile cu un număr mare de imagini, deoarece parcurgerea lor secvențială este destul de obositoare. Puteți, desigur, să vă întoarceți la pagina originală și să selectați imaginea dorită, dar această metodă nu poate fi numită reușită.
Galeria foto versatilă PP Gallery, un plugin din marea bibliotecă jQuery gratuită, face ușor să răsfoiți și să deschideți orice număr de imagini fără a părăsi vizualizatorul galeriei. PP Gallery are opțiuni extinse de navigare, iar prezența unui glisor pentru miniaturi vă permite să navigați rapid chiar și printr-o colecție foarte mare de fotografii. În plus, miniaturile din fereastra galeriei foto în sine în multe cazuri fac inutilă plasarea lor pe pagina principală (mai multe despre asta mai jos).
Galeria foto PP Gallery are un mod de vizualizare atât prin clic pe mouse sau folosind tastele înainte/înapoi, cât și sub formă de prezentare de diapozitive. Este usor de instalat, are un aspect elegant si toate setarile necesare. O descriere detaliată a galeriei foto PP Gallery poate fi găsită pe site-ul dezvoltatorilor. Un exemplu de lucru este prezentat în figură:
Instalarea unei galerii foto Galeria PP
Ca de obicei, începem prin a crea un folder nou pe site, numindu-l, de exemplu, ppgallery. Apoi descărcați arhiva și despachetați-o în folderul creat. Vom avea un folder js cu scripturi și altul cu fișiere CSS.
Apoi, vom adăuga la antetul paginii cu viitoarea galerie foto în interiorul etichetei... următoarele rânduri indicând căile către noile noastre fișiere și puțin JavaScript pentru a inițializa și configura parametrii PP Gallery:
$(document).ready(funcție() (
$("#galerie").ppGallery((
screenFade: 0.8, //transparența fundalului
screenColor: „#333333”, //culoarea fundalului
thumbWidth: 60, //lățimea miniaturilor. Implicit 60px
maxWidth: "700", //controlează lățimea maximă a imaginilor (setată mai mare decât cea mai mare)
slideShowDelay: "2", //viteza de schimbare a imaginilor în prezentarea de diapozitive (sec)
showHiddenGalleryButton: "", //#view - ascunde miniaturile pe pagina galeriei (a nu se confunda cu fereastra galeriei!)
autoOpen: 0 //lansează galeria imediat când pagina se deschide (1= da, 0= nu)
});
});
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.
Pentru a plasa imagini (mari - mare.jpg și miniaturi - mic.jpg), se folosește o listă neordonată de hyperlinkuri obișnuite cu identificatorul id="galerie":
...
Dacă doriți să afișați subtitrări sub imagini, acestea ar trebui incluse în hyperlinkuri.
Aceasta completează instalarea PP Gallery și puteți lansa galeria foto și o puteți admira în browser. După cum se spune adesea în reclamă, veți fi surprins cât de simplu și rapid este totul... Cu toate acestea, acest lucru este tipic pentru majoritatea pluginurilor jQuery, care ușurează viața designerilor web de câțiva ani.
Setarea opțiunilor pentru galeria foto Galeria PPSetările principale pentru apariția galeriei foto PP Gallery se află în fișierul CSS elementar ppgallery.css și în scriptul js pe care l-am plasat în eticheta .... Comentariile rusești, sper, nu necesită explicații.
Deoarece fereastra galeriei foto PP Gallery afișează miniaturile tuturor imaginilor, atunci, în principiu, duplicarea acestora pe pagina site-ului devine opțională. Singura excepție este dacă doriți să proiectați colorat o galerie foto cu tot felul de clopoței și fluiere. Dar de ce să faci asta dacă făcând clic pe orice imagine, vizitatorul merge în continuare la fereastra PP Gallery și munca ta va trece neobservată?
În consecință, pe pagina site-ului puteți ascunde toate imaginile galeriei, lăsând doar butonul de lansare pentru programul PP Gallery. Pentru a face acest lucru, introduceți valoarea #view în linia de inițializare
showHiddenGalleryButton: „#view”, //#view - ascunde miniaturile pe pagina galeriei
și adăugați un buton de lansare a galeriei foto folosind o etichetă înainte de lista de imagini (înainte de
- ).
Lansați o galerie foto sau
.
Designul butonului poate fi orice: sub forma unei simple inscripții, buton, imagine etc. De exemplu, un astfel de buton poate fi realizat folosind o miniatură a unui folder cu imagini, așa cum se arată în dreapta. Exemplul, din nou, funcționează, puteți da clic!
Să rezumam.
PP Gallery este o galerie foto universală care poate fi instalată ușor și rapid pe un site web. Are un aspect atractiv și capabilități avansate de navigare folosind previzualizări în miniatură, ceea ce vă permite în multe cazuri să evitați plasarea imaginilor pe pagina principală a galeriei foto.
Bună ziua, dragi cititori! În această lecție vă voi arăta cum să creați o galerie foto minimalistă, dar în același timp convenabilă și funcțională folosind jQuery, sau o galerie de imagini, după cum doriți. Galeria are capacitatea de a crea categorii, urmate de filtrare. De asemenea, este posibil să lansați o prezentare de diapozitive. Galeria funcționează în toate browserele, așa că nu vor fi probleme de adaptare.
Pentru a crea această galerie, vor fi utilizate două biblioteci gratuite: Quicksand și PrettyPhoto. Ele fac crearea unei galerii mult mai ușoară. Ca întotdeauna, puteți vedea rezultatul lucrării pe pagina demo și, de asemenea, puteți descărca arhiva din galeria de lucru și toate fișierele sursă. Singurul dezavantaj, ca să spunem așa, este crearea manuală a miniaturilor pentru imagini mari. În toate celelalte privințe, această galerie merită atenție. Exact ca!
Marcaj HTMLMai întâi, să ne uităm la panoul cu o listă de categorii, aceasta este o listă cu marcatori ul. Mai mult, fiecare element de listă trebuie să aibă un nume de clasă unic.
1 |
|
1 |  Numele imaginii publicat: 2012 |
După cum am menționat mai sus, elementele din listă sunt imagini din galerie. Fiecare element de listă include componente. Aceasta este imaginea în sine, sau mai degrabă miniatura ei, precum și o descriere. Miniatura este un link către imaginea principală. Atributul rel este necesar pentru a apela javascript și a deschide imaginea principală.
Nu uitați și de 2 lucruri importante: elementul li list trebuie să aibă un atribut unic data-id. Atributul data-type conține clasa categorie, a cărei listă am descris-o mai sus. Totul pare să fie legat de marcaj.
Stiluri CSSNu mă voi concentra în special pe stiluri, deoarece folosim biblioteca PrettyPhoto gata făcută, care este responsabilă pentru mărirea imaginii și există destul de mult cod CSS. Cu toate acestea, merită remarcat faptul că există 5 opțiuni pentru proiectarea unei imagini mărite, deși în mod ideal doar 3, deoarece în două opțiuni este eliminată doar rotunjirea.
Prin urmare, voi afișa doar stilurile CSS pentru miniaturi și lista de categorii.
1 | Portfolio-categ ( margin-bottom : 30px ; ) |
În principiu, totul ar trebui să fie clar cu stiluri. Pentru a alinia categoriile, proprietatea de afișare este setată la inline . Pentru a da un efect de contur imaginii, setați culoarea de fundal (albă) și umplutura la 10 pixeli. Dimensiunile articolelor din listă sunt stabilite în .portfolio-area li .
jQueryȘi, în sfârșit, cel mai important lucru este pentru ce este toată lecția. Acesta este codul jQuery. Să începem prin a filtra imaginile după categorie.
1 | // Selectați toate elementele copil din portofoliu-area și scrieți într-o variabilă $(".portfolio-categli" ) .click (funcția (e) ( var filterClass= $(this) .attr ("clasa" ) .split (" " ) .slice (- 1 ) [ 0 ] ; if (filterClass == "toate" ) ( LightboxPhoto() ; |
Folosind metoda clone() și un selector, selectăm toate elementele copil din .portfolio-area și le scriem în variabila $data. În continuare, urmărim clicul pe una dintre categorii, elementul li al listei cu clasa .portfolio-categ . Facem inactive toate categoriile eliminând removeClass(„activ”), dacă acest lucru nu se face, atunci în timp toate categoriile vor fi active și filtrarea se va opri.
Din moment ce facem clic pe un element listă, acest selector conține un element list, adică li , din acesta luăm valoarea atributului class și folosind metoda split împărțim numele clasei în mai multe părți, chenarul este un spațiu (adică, dacă clasa a fost „toate active”, atunci după împărțire obținem o matrice de „toate” și „active”). Apoi, folosind metoda slice, selectăm primul element al matricei (în cazul nostru, „toate”) și scriem rezultatul rezultat în variabila filterClass. Dacă nu era spațiu, numele clasei nu se va schimba.
În continuare, verificăm dacă variabila filterClass conține șirul all , apoi utilizând metoda .find selectăm toate elementele cu clasa portfolio-item2 din tabloul $data, la care ne-am uitat mai sus. Elementele selectate (și acestea sunt toate elementele listei, adică toate imaginile) sunt plasate în variabila filteredData.
În caz contrar, dacă filterClass nu este egal cu all , atunci vom plasa nu toate elementele listei în variabila filterData, ci doar pe acelea al căror atribut data-type se potrivește cu clasa categoriei. Pe scurt, elemente dintr-o singură categorie.
Și, în cele din urmă, trecem variabila rezultată în biblioteca jquery cu nisipuri mișcătoare, care filtrează imaginile. Asta e pentru filtrare.
Acum, în ceea ce privește mărirea imaginii în fereastra pop-up. Totul este mult mai simplu aici.
1 | jQuery(„a” ) .prettyPhoto (( |
Este urmărit un clic pe un link al cărui atribut rel începe cu prettyPhoto. Apoi intră în joc biblioteca prettyPhoto și imaginea este mărită miraculos. Apropo, trecem și mai mulți parametri. Cum ar fi viteza de animație este rapidă, întârzierea prezentării de diapozitive este de 5 secunde, tema de design Facebook (sunt 5 teme în total, acestea sunt situate în folderul imagini/prettyPhoto) și interzicem, de asemenea, afișarea numelui imaginii și mărirea imaginii când treceți mouse-ul. Documentația completă pentru prettyPhoto poate fi găsită
Pentru a fi la curent cu cele mai recente articole și lecții, abonați-vă la
