→ Lightbox a jQuery-en

A cikk példája egy galéria plug-in világító doboz. a jquery. És itt lehet letöltés Munkahely. Így működik valójában:

A LIGHTBOX megvalósítása jó, mivel egy konfigurációs hash segítségével vezérelhető. Nagyon könnyen elindul. A plugin elindításához bármilyen jquery könyvtárra van szüksége, az 1.2.6-os verzióval kezdődően a Lightbox plugin és a stílusfájl. Az archívumban, közvetlenül az alábbiakban helyezkedik el. Töltse le, kicsomagolja és nyissa meg a fájlt index.html Bármilyen böngészőben. Kell dolgozni.

Remélem, hogyan kell futtatni mindent érthető. Csak azt mondom, hogyan kell kezelni a lightbox beállításokat. Azonnal megjegyzem, hogy a plugin nem működik az IE 6-ban, ezért az inicializálás állapotát a "szamár", mint a "szamár". Ezután még egyszer fontos pillanat: $ (Dokumentum). Readymert amíg a fa készen áll Dom Az inicializálás nem gördül. Maga az inicializálási folyamat igaz:

$ ("# Galéria A"). Lightbox ();

Példa a forráskódra:

sebesség. - a fénykép megnyitásának és bezárásának sebessége a milisekundumokban.

Paraméterek hash kulcsok: közel, prev és következő Ezek olyan kulcsok, amelyekre az alternatív galéria nézetkezelés.

átlátszatlanság - A Dimmed háttér átlátszósága. 0-tól 1-ig tart. A háttér színe megváltoztatható a stílusfájlban.

A Hesha képek paraméterei, amelyeket hash fájlokba fektetnek be, a háttérképek elérése, a letöltési jelző és a hátsó gombok animációja.

A Heshe szövegben is megváltoztathatja a címkét a navigáláshoz.

Ha kapsz egy webhelyet a jQuery-en épített képekhez, akkor valószínűleg a LIGHTbox-ot használják rajta. Lightbox Power az, hogy a képeket vonzó és hatékony galériában is megfordíthatja. Ez különösen az, hogy az ilyen pluginok népszerűsége a jQuery számára a webdesign gömbjében.

A jQuery közösségnek köszönhetően hatalmas számú könnyű jelzőfülke van, amely kiváló lehetőségeket teremt a tervezők számára a képekkel való munkavégzéshez. A leckeinkben 15 különböző bővítményt fognak bemutatni, hogy figyeljen.

FELTÖLT.

A TOPUP könnyen használható a JavaScript könyvtár használatához a diszkrét kép kimeneti és weboldalakhoz. A könyvtárat JQUERY és JQUIERY UI vezérli, hogy kereszt-gruse kompatibilitást és tömörséget biztosítsanak.

Plugin highslide

A Highslide egy speciális eszköz a képek, a média és a galériák megtekintéséhez.

Színes doboz

Kis egyéni plugin a jquery 1.3+ számára.

A Lightbox 2 egy egyszerű, diszkrét szkript, amely a képet az aktuális oldalon lévő fedő rétegben kívánja kinyomtatni. Könnyen telepíthető, és minden modern böngészőben működik.

a PrettyPhoto nem csak a képeket, hanem a videót, a vakut, a YouTube-t és ajaxot is támogatja. Likebox a médiafájlokhoz.

Slimbox 2 - Light Box 2 klón 4 kb méretű, jquery használatával.

Shadowbox - Web alkalmazás a médiafájlok megtekintéséhez, amelyek támogatják az összes népszerű formátumot. A Shadowbox a JavaScript és a CSS-en íródott, és jó beállítási lehetőségeket tartalmaz.

Pirobox kiterjesztett v.1.0.

A plug-in egyik előnye, hogy bármilyen típusú fájl megnyitása - az UWF fájl beépített tartalmából, egyszerű kép up to.pdf fájl.

Más csodálatos funkciók: Automatikus változó képméret és támogató technológia és dobás.

Greybox használható webhelyek, képek és egyéb tartalmak megjelenítésére.

A Super Box egy olyan plugin, amely ablakokat jelenít meg a Lightbox hatással.

Egy fotógaléria létrehozása az oldalon

Képgaléria Lightbox2. - Telepítés és konfiguráció

Az előző cikkek egyikében elmondták a leginkább, valószínűleg népszerű ingyenes fotóalbumról - Világító doboz.A Script könyvtár alapján készült jquery. . Az alapon Világító doboz. A webes tervezők számos érdekes klónt fejlesztettek ki, de a kezdeti opció továbbra is továbbfejleszti, és sikeresen használható a különböző helyszíneken lévő fotó galériákhoz. Gondold át utolsó frissítés - Csatlakoztat. Lightbox2.Különböző kis méretű és mindig, könnyű telepítés a webhelyre. Azzal, hogy Lightbox2. Vonzó kialakítású, minden böngészőben dolgozik, és amely különösen kellemes, helyesen jeleníti meg a nagy képeket, összenyomva őket a felhasználói képernyő méretével összhangban.

Egyszerű fejlesztő Lightbox2. - Lokesh Dhakar, San Francisco programozója. Jelenleg (2014) a V2.7.1 lightbox verziója, amelyet megpróbálunk telepíteni a webhelyen. Példa az egyetlen kép kibontakozására Lightbox2. Az ábrán látható.

Fotógaléria lightbox2 telepítése2.

Fotógaléria telepítése Lightbox2. Először hozzon létre egy új mappát a webhelyen, hívja, természetesen, lightbox2.. Ez a mappa ugyanabban a könyvtárban kell lennie, mint a fotógaléria oldal. Ezután töltse le az archívumot, és csomagolja ki a létrehozott mappában. Két szkriptünk lesz ( * .js.), segédképek (mappa) img) és CSS fájl (* .css). Ezután helyezze be a címoldalt a címkén belüli jövőbeni fotógalériával ... A következő sorok jelzik az új fájlok módját:

Fontos jegyzet: ha több bővítményt használ a webhelyén jquery.Kényelmesebb a jQuery.js fájl (lehetőleg a legújabb verzió) átvitelére a root mappába, hogy ne töltse be többször. Ebben az esetben a fellebbezési sor egyformán megjelenik minden plugin számára. Különösen példánkra, kiderül:
.
Nem ajánlott több oldalt használni különböző változatok jquery.hogy ne ütközzenek egymással. Ugyanakkor győződjön meg róla, hogy ellenőrizze a pluginok működését telepített verzió jquery.Mivel nem minden verzió cserélhető.

Most meg kell tüntetnie a kívánt képeket az oldal oldalára. A szokásos módon mindegyiket miniatűr (kicsi) és egy teljes méretű képként (nagy) kell képviselni, amelyhez a miniatűrből származó kapcsolat jelzi. A linkek címkéjén adja meg a rel \u003d "lightbox" -et - egyetlen képhez, és ha több képet szeretne kombinálni a galériához, akkor minden kifejezés mindenki esetében ugyanaz, például REL \u003d "Lightbox-One"


stb.

Ha feliratokra van szüksége a képekhez, akkor helyezze őket címkapcsolatokba.
A három képből készült egyszerű fotógásztorok példája az ábrán látható:

Fontos jegyzet: ha a fő kép mérete ( big.jpg.) több mint méret Akkor a felhasználó böngészőjében Lightbox2.automatikusan testreszabja (csökkenti) a képernyő méretét. Ebben az esetben a kibővített kép mindig illeszkedik a képernyőn, függetlenül attól, hogy melyik eszközt használja: okostelefon, tabletta vagy nagy felbontású monitor.

Ezért kívánatos, hogy a nagy képnek van-e felbontása, például legalább 1000 képpont függőlegesen szabványos képernyő Teljes HD. - 1920x1080. Példánkban ez egy "szombat" kép.

Fotógaléria létrehozása Lightbox22.

A fénykép-gallerikus fájlfájl beállítása lightbox.js. bármilyen HTML- vagy szöveg szerkesztőpéldául a notebookban. A fájl kezdetén megjelenik az elérhető beállítások:
ez.fadedáció \u003d 500; // megnyitása Idő képek MS
ez.Fitimagesinviewport \u003d igaz; // A képernyő mérete igaz / hamis
ez.Rezervátum \u003d 700; // Idő telepítése képek MS MS
this.Positionfromtop \u003d 50; // a Windbox Windbox pontja a képernyő tetején
ez.Showimagenumbetabel \u003d igaz; // Következtetés Szobák Képek igaz / hamis
stb.

A legfontosabbak az oroszul megjegyzésekkel vannak felszerelve. Módosítsa a paraméterértékeket, és a fájl mentése után Lightbox.js. Megfigyelheti az eredményt az oldal megnyitásával a böngésző fotóalbumával.

A Galéria ablakának néhány paramétere, például a háttér színe és az átláthatóság, a felirat színe stb. A CSS fájlban van beállítva lightbox.css.. Kiegészítő képek (előre, vissza, letöltés, kimenet) a mappában találhatóak imgÉs a saját belátása szerint is megváltoztathatók.

Más programok létrehozása a webhely fotóalbuma, a képek és a diavetítések körhinta, lásd és a szakaszban "

Sokszor különböző képgalériák áttekintését gyűjtötték, összegyűjtötték a látványos diavetítések és -plaginok széles körű gyűjteményét. A Piggy Bankban és a Lighbox kizárólag a CSS3-on vannak, anélkül, hogy további JS-könyvtárakat csatlakoztatnánk. De az idő nem áll fenn, a felhasználók egyre inkább különböző mobileszközöket használnak az internetes szörfözéshez, ami azt jelenti, hogy a webes elemek alkalmazkodóképességét és különösen a "" hatású fotó galériáit jelenti, amely az egyik prioritás, amelyre a webes tervezők és a fejlesztőknek figyelmet kell fordítaniuk kell .

Jelenleg egy másik választást 15 adaptív jquery plugins, amelyek barátok, mind az asztali böngészők, mind tökéletesen illeszkednek a különböző képernyőkbe mobil eszközök (laptopok, okostelefonok, tabletták stb.).

Nézze meg a demót a fejlesztők webhelyén, töltse le a kívánt plugint, és hozzon létre, hozzon létre, hozzon létre ...

1. Iliightbox

iligbox - Ez egy LIGHTBOX-plugin jquery, széles körű támogatással különböző típusok Fájlok: képek, video, flash / swf, Ajax, keretek és beépített kártyák. Ez a plugin hozzáadja a gombokat is. közösségi hálózatokamely lehetővé teszi a felhasználók megoszthatják tartalom a Facebook, Twitter vagy vöröses. A látványos diavetítések, képgalériák és videoklipek szervezésének kiváló tulajdonsága, a szokásos és teljes képernyős módok megtekintésével.

iligbox Elég gyorsan és a mobil eszközökön való megtekintésekor több, mint helyesen jeleníti meg a feldolgozott tartalmat. Többek között a plugin használatával könnyedén megvalósíthatja az információs blokkok kimenetét a modális ablak típusával.

• Függőség: jquery.
• Támogató böngészők: IE7 +, Chrome, Firefox, Safari és Opera
• Engedély: És a pokol tudja)))

2. Swipippebox.

Swipippebox. - Ez egy jquery plugin, amely támogatja a mobil platform érzékszervi képernyőket. A képek mellett a plugin támogatja a beágyazott videót a YouTube és a Vimeo. A SwipeBox nagyon egyszerűen rögzíthető bármely projekthez, a pluginnek számos intuitív lehetősége van a funkcionalitás és a viselkedés konfigurálásához. A fejlesztő honlapján részletes dokumentáció A plugin csatlakozásáról és használatáról, a felesleges víz nélkül, minden esetben csak abban az esetben van, így nem nehéz kitalálni, hogy mi, és miért, azt hiszem, nem lesz nehéz.

• Függőség: jquery.
• Támogató böngészők: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android és Windows Phone
• Engedély: Nem határoztam meg, talán szerencsés leszel))

3. MagnificPopup.

Hosszú ideig, jól ismert és jól beváltabb Likebox-plug-in a jquery vagy a zepto.js. A plugin - Dmitry Semenov szerzője, amely egy fejlesztő és plugin photoswipe, amely az alábbiakban megmondja. Jön a jQuery / zepto plugin, több lehetőséget hiányzik a Photoswipe-ben, mint például a videó támogatás, leképezés és ajax tartalom, végrehajtás modális ablakok beépített formákkal. Minden kritérium esetében ez egy újabb csodálatos eszköz a webfejlesztőben. Különben van egy plugin a WordPresshez és a részletes dokumentációhoz a beállításhoz és a használathoz. Csak az orosz dokumentáció hiánya, a név és a vezetéknév alapján ítélve a szerző úgy tűnik, hogy orosz, soha nem értette meg a károsodás miatt, vagy az érzés képzeletbeli tudatosságának köszönhetően. Nos, oké, kinek kell feláldozni, nem is süllyedünk a teát is))).

• Függőség: jquery 1.9.1+ vagy zepto.js
• Támogató böngészők: IE7 (részben), IE8 +, króm, firefox, szafari és opera
• Engedély: MIT License

4. Fényképek.

• Függőség: JavaScript vagy jquery
• Támogató böngészők
• Engedély: MIT License

11. Featherlight.

6 K.bit Lightbox-plugin, többé-kevésbé STATVy fejlesztők számára az összes szükséges funkcióval rendelkezik. Az összes közös tartalomtípus (szöveg, kép, iframe, Ajax) támogatása mellett opcionális kapcsolat van opcionális, valamint a saját bővítményének fejlesztése a bővítményhez, amely teljes mértékben megfelel az Ön igényeinek új projekt létrehozásakor . Mint ez a gazdaság (bővítési fejlesztés) működik, nem volt különös szándékos, de azok, akik beillesztik ezt a bővítményt, azt hiszem, meg fogom érteni))).

• Függőség: jquery.
• Támogató böngészők: IE8 +, króm, firefox, szafari és opera
• Engedély: MIT License

12. LightGallery.

LightGalley. - multifunkcionális Likebox-plugin többszörösekkel további jellemzők. Több mint 20 lehetőséggel rendelkezik, a legkisebb lightbox részleteinek konfigurálásához. Mindent, jól, vagy szinte minden). A szépen épített miniatúrákkal ellátott képek teljes körű galériája, navigációs elemekkel és miniatűr görgetettel. Egyszerű HTML jelölés egy rendezetlen lista formájában

A DATA-SRC attribútum használata teljes méretű képekhez. Ugyanaz a YouTube és a Vimeo videóval. Minden intenzíven támogatja az összes videóformátumot HTML5, MP4, WEBM, OGG ... Animált bélyegképek, Adaptív elrendezés mobileszköz-támogatással, csúszási hatásokkal és sima átmenetek megjelenés a képek átkapcsolásakor és más tartalmakon. Megjelenés Könnyen kialakítható és konfigurálva van a CSS használatával.. A kép és a kód optimalizálása előtti betöltés. Navigálja a billentyűzetet az asztali számítógépekhez, valamint a további betűtípus ikonok használatának képességét. LightGalley. - Ez az, ahol az igazi "kombinál", a legfontosabb dolog, hogy ne veszítse el a beállítások bőségét és a bővítmény kiterjedt lehetőségeit.
Azok, akiknek tisztességes csúszkára van szükségem, ajánlom ugyanazokat a fejlesztőket.
• Függőség: jquery.
• Támogató böngészők: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android és Windows Phone
• Engedély: MIT License



13. Stripjs.

Szokatlan, azt is mondanám: a lightbox szokatlan végrehajtása, pontosabban, nem a szokásos tartalom bemutatása, amikor egy kép vagy videó, a Likebox tervezésében, a jobb oldalon jelenik meg, és nem tölti ki az egész képernyőt, de csak a teljes méretű kép vagy videó meghatározott méretét. A nagy képernyők Ez a megközelítés világos, az oldalnal való kölcsönhatás lehetősége továbbra is fennáll. A mobileszközök kis képernyőjén mindezen innovatív design simán megy a klasszikus lightbox-ba. Az ötlet érdekes, nézd meg a demót, talán valaki beilleszi az ilyen kreatívat.

• Függőség: jquery.
• Támogató böngészők: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+ és Android 3+
• Engedély: Creative Commons by-NC-ND 3.0 licenc



14. Lightlayer.

Egy könnyen használható Lightbox Plugin, amely jól kombinálható bármely projektrel, és jól néz ki minden képernyőn. A Lightlayer Plugin bemutatja a beállítások ellenőrzését, például a háttér színének megváltoztatását és az átláthatóság fokát, az alapegység helyzetét, az átmeneti hatások kiválasztását, amikor megnyitja / zárja be a felhasználókat, amelyek függetlenül manipulálódhatnak. A plugin nagyszerűen működik a külső weboldalak tartalmával, beépített video lejátszókkal és kártyákkal.

• Függőség: jquery.
• Támogató böngészők: IE9 +, Chrome, Firefox, Safari és Opera
• Engedély: MIT License



15. Fluidbox

Fluidbox - Likebox Plugin kizárólag a képekhez. A képellátás mindenféle változatának száma valóban lenyűgöző. A plugin kiválóan működik a különböző formatervezésekben, beleértve a lebegő képeket, az abszolút pozícionálással, képekkel és fényképekkel ellátott képeket, amelyek kereteket keretesek, és fenekelnek, egyetlen képekkel, valamint a galériába. Általánosságban elmondható, hogy hiába öntsük, hogy öntsük, festeni minden képességét a plugin egy rövid nézetben nem fog működni egyébként, így jobb nézni a demó, csavarja, forduljon és gondolja, hogy ez a plugin sokan szereti.

• Függőség: jquery.
• Támogató böngészők: IE9 +, króm, firefox, szafari, opera
• Engedély: MIT License



Ez valószínűleg minden! Remélem, ez a kis áttekintés segít megérteni a javasolt webfejlesztési termékek halomát. Megjegyzem, hogy nem minden olyan bővítmény, amelyet a munkaterületeken használt bővítmények kiválasztásában mutatott be, a legtöbbjük teszteli helyszíneken vagy Lachakon bizonyult, így ha bármilyen kérdés merül fel, valószínűleg megoldjuk őket, és együtt, Mivel mindig minden velünk fog működni.

Keresi a megfelelő orosz sablont a célokért? Valószínűleg ebben az esetben meg kell látogatnia a templateMonster Markey-t. Az egyszerű okból, hogy a legutóbb a helyszínen megjelentek Új szakasz Sablonok. Most minden felhasználó megismerheti magának a gyűjteményt, amely frissíti és frissít. A sablonok szövegeit kézzel írták. De ez nem az egyetlen plusz ezeknek a kész megoldásoknak. Végtére is, csomagjaikban megtalálhatja mindazt, ami megkönnyíti az online projekt fejlesztését, beleértve a vizuális szerkesztőt is.

Minden tekintetben Andrew

A Lightbox egy jquery-plugin, amely egy képet vagy bármely más tartalmat jelenít meg egy speciálisan berendezett ablakban, amely jelenik meg, általában egy áttetsző shadowned háttérben a fő tartalomoldal tetején.

Mielőtt telepítené a bővítményt az oldalra, és vegyen be, vessünk egy pillantást a példákra:



Első lépések Lightbox segítségével

Letöltés utolsó verzió A plugin (a loweren keresztül is elérhető: lower telepítése Lightbox2 - Saját). Ezt követően az unzorchive zIP fájl. és nézd meg a vágási munkálkodási példát, amely a mappában van példák..

Készen áll a lightbox telepítésére az oldalán? Kezdje a CSS és a JavaScript csatlakozásával. Mindkét fájlt a mappából veheti igénybe. dist.. Helyezze be a következő kódot a fejjel címkék között a weboldalon

A következő kód csatlakoztatja a plugin betétet a test záró címke előtt:

Győződjön meg róla, hogy a kívánt jquery is be van töltve. Ha már használja a JQUIERY-t (szükséges jquery 1.7 vagy újabb) az oldalon, győződjön meg róla, hogy betöltötte lightbox.js.. Ha nem csatlakozik a jQuery-hez, akkor a Dist / JS / Lightbox-Plus-jquery.js-t használják, amely már rendelkezik ezzel a könyvtárral, vagy töltse le a legújabb verziót. Webhely. Győződjön meg róla, hogy az előírt négy kép lightbox.css. Helyszín a megadott helyen. Képeket készíthet a mappából / DIST / képek.

Most foglalkozunk a HTML kóddal. Adja hozzá az adat-lightbox attribútumot a hivatkozáshoz, és amelyhez szeretnénk alkalmazni a pluginunkat. A kiváló minőségű attribútum értékben használjon egyedi nevet minden egyes képhez. Például:

1. kép.

Adja hozzá az adatcím attribútumot, ha meg szeretné mutatni a címet. Ha van olyan kapcsolódó képek csoportja, amelyeket egy készletben szeretne kombinálni, ugyanazt az értéket használja az adat-lightbox attribútumban a kívánt képekhez. Például:

Img 2 img 3 img 4

Beállítások Lightbox

Ha módosítani szeretné az alapértelmezett beállításokat, hívja az opciót:.

• mindigHowNaNavontouChDevices alapértelmezett: FALSE

  Ha egy igaz., a bal és jobb navigációs nyilak, amelyek az egér lebegése közben jelennek meg, megjelenik a képek megtekintése, az érintőképes bemeneti segédeszközökön lévő eszközökön láthatóak lesznek

• fADEDÁCIÓ Alapértelmezett: 500

  A milliszekundumban eltűnő tartály eltűnéséhez szükséges idő.

• fitimagesInviewport alapértelmezett: igaz

  Ha egy igaz.Ez arányosan csökkentette a képméretet, hogy a kép illeszkedjen a megtekintési területbe. Ez kiküszöböli a felhasználót attól, hogy lapozzunk a teljes kép megtekintéséhez.

• maxwidth.

  Ha be van állítva, a kép magassága ez az értékre korlátozódik (pixelben). A képarány nem figyelhető meg.

• maximum magasság

  Ha be van állítva, akkor a kép szélessége ez az értékre korlátozódik (pixelben). A képarány nem figyelhető meg.

• positionFromtop alapértelmezett: 50

  Távolság a megtekintési ablak tetejétől a Lightbox tartályba (pixelben).

• alapértelmezett átméretezés: 700

  Az idő, amikor a Lightbox konténer megváltoztatja szélességét és magasságát, amikor különböző méretű képeket változtat (milliszekundumban).

• showimagenumberlabel alapértelmezett: igaz

  Ha egy hamisA szöveg jelzi az aktuális képszámot és a beállított képek teljes számát, például: "2 kép 4".

• alapértelmezett Wraparound: FALSE

  Ha egy igaz.Amikor az utóbbi kép megjelenik, a gomb megjelenítéséhez szükséges gomb nem tűnik el. Az első kép megjelenítéséhez vezet.