Kuvagalleria jqueryssä. Fotorama - reagoiva jQuery-galleria, asennus ja konfigurointi. Koko näytön diaesitys HTML5:llä ja jQueryllä
Hei kaikki! Tässä artikkelissa tarkastellaan kuinka tehdä kaunis ja kätevästi lajiteltava galleria JQueryn avulla.
Kaunis, kätevästi lajiteltu galleria on upea asia verkkosivustollesi, joka ilahduttaa sinua ja kävijöitäsi. Tänään tarkastelemme erittäin helposti asennettavaa ja konfiguroitavaa laajennusta JQuery-kirjastoon - Filterizr.
Helppokäyttöisyydestä huolimatta laajennus on melko kevyt ja tehokas. Katsotaanpa sitä tarkemmin.
EsittelyNähdäksesi, miten laajennus toimii, siirry viralliselle verkkosivustolle, ja tässä se on edessäsi!
Voit lajitella kaupungin, luonnon, toimialan, auringonnousun, auringonlaskun tai näyttää kaikki valokuvat (oletus). Siinä on Shuffle-painike, jonka avulla voit sekoittaa kuvia. ASC- ja DESC-painikkeet lajittelevat kuvat nousevaan ja laskevaan järjestykseen. Jos haluat löytää kuvan sijainnin tai kuvauksen perusteella, valitse haluamasi kohde pudotusvalikosta ja kirjoita kysely hakukenttään. Kun siirrät hiiren kuvan päälle, kuva muuttuu mustavalkoisesta värilliseksi.
AsennusLataa kirjasto napsauttamalla Lataa-painiketta tai käytä NPM:ää:
Npm asenna filterizr
Laajennus on jo määritetty valmiiksi, mutta jos haluat ohittaa oletusasetukset, voit joko:
1) Välitä objekti parametreineen JQuery-konstruktorille
Muutt filterizd = $(".filtr-container").filterizr((
// vaihtoehdot
})
2) Kirjoita asetukset uudelleen Filterizr-objektin setOptions()-metodilla.
Filterizd.filterizr("setOptions", (
// vaihtoehdot
})
Oletusparametrit:
Vaihtoehdot = (
animaation kesto: 0,5,
takaisinsoitto:(
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
viive: 0,
delayMode: "progressiivinen",
helpotus: "helposti",
suodatin: "kaikki",
filterOutCss: (
opasiteetti: 0,
muunnos: "scale(0.5)"
},
filterInCss: (
opasiteetti: 0,
muunnos: "asteikko(1)"
},
asettelu: "sameSize",
valitsin: ".filtr-container",
setupControls: tosi
}
Tarkemmat ohjeet ja kuvaukset jokaisesta parametrista löytyvät osoitteesta
Hei kaikki!
Kaikentyyppiset kehittäjät ovat seuraavaa verkkoprojektiaan luodessaan usein kiinnostuneita kysymyksestä, kuinka tarjota käyttäjilleen erilaisia kuvia, olivatpa ne valokuvia tai kuvasarjoja. Tätä varten online-tilan utelias mieli, suurimmaksi osaksi tämä on "porvarillinen" tila, etsii yhä uusia ratkaisuja näyttävien, värikkäiden ja ennen kaikkea toimivien diaesityksiä ja kuvagallerioiden luomiseen. Useimmiten kehittäjät räätälöivät ne sopimaan luotavan verkkoprojektin mallin suunnitteluun tai lisäosien ja moduulien muodossa tietylle sivustonhallintakoneelle. Kannattaa katsoa nykyaikaisia malleja, sillä yksikään teema ei, harvoja poikkeuksia lukuun ottamatta, tule toimeen ilman jonkinlaista plug-in-liukusäädintä tai yksinkertaista kuvankiertolaitetta. Joten on ymmärrettävää, että monet verkkokehittäjät haluavat saada jotain tällaista arsenaaliinsa ja yllättävät lukijansa täysin esittelemällä kuvia sivustollaan.
Jatkaessani jatkuvaa uusien ratkaisujen arvioiden sarjaa luomisen aikana, päätin koota kattavamman kokoelman mielenkiintoisimmista ja tehokkaimmista koskaan näkemistäni diaesityksistä ja valokuvagallerioista, jotka on luotu jQueryn taikuudella.
Varoitan heti, että katsauksessa käsitellyt resurssit ovat pääosin englanninkielisiä, mutta uskon, että kuka tahansa sitä tarvitsee, sen selviää intuitiivisesti tai kääntäjien avulla, joita on kymmenkunta senttiä. Ja jos etsit tarpeeksi lujasti, voit löytää kuvauksia joidenkin gallerioiden ja liukusäätimien luomistekniikasta venäjäksi, koska monet verkkokehittäjistämme kääntävät työskennellessään tietyn projektin parissa ensin itselleen ja julkaisevat sitten yksityiskohtaiset kuvaukset kaikista manipuloinneistaan. ilmainen pääsy.
Esimerkiksi näin tein, kun työskentelin luomismekanismin parissa, löysin ensin burzhunetista minulle sopivan galleriavaihtoehdon, käänsin sen ymmärtääkseni paremmin mitä olin tekemässä, ja tulevaisuudessa. Tästä tuli, uskallan toivoa, ei huono artikkeli Highslide-skriptin käytöstä, jossa oli esimerkkejä työskentelystä erilaisissa sovellusmuunnelmissa.
Joten, tarpeettomia sanoituksia riittää, siirrytään suoraan arvosteluun, katsotaan, luetaan lyhyitä selityksiä ja valitaan valtavasta määrästä uusia jQuery-laajennuksia ja skriptejä mielenkiintoisten kuvien liukusäätimien, valokuvagallerioita ja diaesityksiä varten sivustoillasi: automaattiset ja manuaaliset liukusäätimet, taustakuvan liukusäätimet, pikkukuvien kanssa ja ilman jne. ja niin edelleen...
Sivustosta | Demo
Täydellinen, muokattavissa oleva jQuery-kuvagalleria, jossa on diaesityselementtejä, siirtymätehosteita ja useita albumivaihtoehtoja. Yhteensopiva kaikkien nykyaikaisten työpöytä- ja mobiiliselaimien kanssa.
Opetusohjelma koko näytön gallerian luomiseen jQueryn avulla. Ajatuksena on, että esitellyn koko näytön kuvan pikkukuva tulee näkyviin sivulle, ja se heijastuu, kun liikut kuvissa nuolilla tai hiiren napsautuksella. Suuret kuvat liikkuvat ylös- tai alaspäin diaesitystyylillä valitsemastasi siirrosta riippuen. Mahdollisuus skaalata kuvaa, jolloin taustalla oleva kuva on katseltavissa koko näytön tilassa tai sivun koon mukaistettuna.
Parallaksi liukusäädin
Parallax Slider on mielenkiintoinen ratkaisu kuvien näyttämisen järjestämiseen diaesityksen muodossa manuaalisilla ohjauselementeillä. Pikkukuvien alkuperäinen sijoitus herättää huomion. Virallisella verkkosivustolla on täydellinen erittely liukusäätimen integroinnista ja määrittämisestä.
Minimalistinen diaesitysgalleria jQuerylla on erinomainen kuvagalleria, jossa on elementtejä kuvien automaattiseen vaihtamiseen sekä mahdollisuus ohjata näyttöä manuaalisesti ja valita kuvia pudotusvalikosta, jossa on pikkukuvaruudukko. Yksi haitoista on täysikokoisten kuvien katselun puute, mutta tämä on tämän gallerian minimalismia.
Tämä on koko näytön diaesitys, jossa on automaattisesti vaihtuvia kuvia, ei hämmästyttäviä tehosteita, kaikki on yksinkertaista ja tyylikästä.
Minimit Gallery on erittäin muokattavissa oleva jQuery-laajennus, jossa on laaja valikoima kuvasiirtymiä. Minimit-gallerian avulla voit järjestää kuvien näyttämisen karusellin, diaesityksen, yksinkertaisen pyörittimen ja tavallisen kuvan vieritysrullan muodossa.
on pieni (2 kt) jQuery-laajennus, joka tarjoaa yksinkertaisen, järjettömän tavan näyttää kuvia diaesityksenä.
on mukavan näköinen javascript-galleria, jossa on intuitiiviset säätimet ja saumaton yhteensopivuus kaikissa tietokoneissa, iPhoneissa ja mobiililaitteissa. Erittäin helppo asentaa ja konfiguroida
Toisin kuin monet Javascript- ja jQuery-kuvan liukusäätimet, Slider.js on hybridiratkaisu, joka tukee CSS3-siirtymiä ja .
Tämä on yksisivuinen malli erilaisten HTML5- ja CSS3-esitysten luomiseen.
Diapo-diaesitys on avoimen lähdekoodin projekti. Halutessasi voit ehdottaa muutoksia tai parannuksia. Voit ladata ja käyttää sitä ilmaiseksi, eikä mikään eikä kukaan estä sinua käyttämästä tätä liukusäädintä projekteissasi. Liukusäädintä on helppo muokata, esitettävän sisällön välillä on mielenkiintoisia siirtymiä, ja liukusäätimeen voi sijoittaa mitä tahansa, se toimii melko nopeasti, ilman jambeja.
on vain toinen työkalu diaesitysten luomiseen verkkosivustoilla ja muissa verkkoprojekteissa. Tukee kaikkia nykyaikaisia selaimia, vaaka- ja pystyanimaatioita, tukea mukautetuille siirtymille, takaisinsoitto API:lle ja paljon muuta. Voit käyttää dioissasi mitä tahansa HTML-elementtejä, se on ymmärrettävää ja helposti saatavilla aloittelijoille, ja se jaetaan täysin ilmaiseksi.
JavaScript-diaesitys ketterää kehitystä varten
Toteuta diaesityksiäsi tällä mahtavalla jQuery-laajennuksella. Erittäin muokattava työkalu, jonka avulla voit rakentaa sisältöesityksen tarpeidesi mukaan. Helpottaaksesi integrointia ulkoisiin tietoihin tai sisällönhallintajärjestelmän tietoihin, . Tämä on uusi versio ja kirjoitettu tyhjästä. Kehittäjät yrittivät kuvata koko aivolapsensa kanssa työskentelyprosessia erittäin selkeästi ja ymmärrettävästi.
on jQuery-laajennus, jonka avulla voit muuntaa järjestämättömät luettelot diaesityksiksi houkuttelevilla animaatiotehosteilla. Diaesityksessä voit näyttää diojen luettelon joko numeroiden tai pikkukuvien avulla tai käyttämällä Edellinen- ja Seuraava-painikkeita. Liukusäätimessä on monia alkuperäisiä animaatiotyyppejä, mukaan lukien kuutio (eri alatyypeillä), putki, lohko ja paljon muuta.
Täydellinen työkalusarja kaikenlaisten eri sisällön esitysten järjestämiseen web-projekteissasi. Porvarilliset kaverit tekivät parhaansa, mukaan lukien lähes kaikenlaiset erilaiset liukusäätimet ja galleriat jQueryn taikuutta käyttäen. Valokuvaliukusäädin, valokuvagalleria, dynaaminen diaesitys, karuselli, sisällön liukusäädin, välilehdet-valikko ja paljon muuta, yleensä hillittömälle mielikuvituksellemme on tilaa.
Tämä on jQuery-diaesityslaajennus, joka on rakennettu yksinkertaisuutta ajatellen. Vain hyödyllisimmät toiminnot on pakattu sekä aloittelijoille että edistyneille kehittäjille, jotka tarjoavat mahdollisuuden luoda yksinkertaisia, mutta samalla erittäin tehokkaita diaesityksiä, jotka ovat käyttäjäystävällisiä.
— yksinkertainen liukusäädin, joka on rakennettu jQueryyn, yksinkertainen kaikilta osin, ei vaadi erityisiä taitoja, uskon, että monet pitävät siitä hyödyllisenä diaesityksiä toteuttaessaan verkkosivustoillaan. Plugin testattiin kaikissa nykyaikaisissa selaimissa, mukaan lukien hidas IE-selain.
jbgallery on eräänlainen käyttöliittymäwidget, joka on kirjoitettu jQuery-kirjaston javascriptillä. Sen tehtävänä on näyttää yksi suuri kuva sivuston taustana koko näytön tilassa, useita kuvia liukusäätimen muodossa. Kaikissa katselutiloissa on katseluohjaimet. Se on omalla tavallaan mielenkiintoinen ratkaisu, ja joissain tapauksissa se ei ole edes vakio.
Se on helppokäyttöinen jQuery-laajennus, jolla voit näyttää valokuvasi diaesityksenä, jossa on siirtymätehosteet kuvien välillä (olet nähnyt mielenkiintoisempia). jqFancyTransitions on yhteensopiva ja laajasti testattu versioiden Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+ kanssa.
on vapaasti jaettu jQuery-laajennus kuvien ja muun tiedon katseluun Lightbox-muodossa. Ponnahdusikkuna säätimillä, varjostettu tausta ja kaikki, yksinkertainen ja tyylikäs.
Toinen Lightbox-sarjan jQuery-laajennus, vaikka se painaakin törkeän vähän (9 KB), mutta siinä on paljon toimintoja. Siellä on kunnollisesti suunniteltu käyttöliittymä, jota voit aina parantaa tai muokata CSS:n avulla.
Jo nimestä käy selväksi, ettei mitään hienoa ole, meillä on hyvin yksinkertainen automaattinen kuvanrulla, josta puuttuvat säätimet kokonaan. Kuka tietää, ehkä tämä liukusäädin kiinnittää huomiosi juuri minimalismillaan.
Kuvan rotaattori erityyppisillä siirtymillä. Se toimii sekä automaattisesti että napsauttamalla, ja se on melko helppo asentaa.
— täysi kuvagalleria pelkän liukusäätimen sijaan. Pikkukuvien esikatselu ja mahdollisuus valita siirtymätehosteita, täysi tuki kaikille selaimille, yksityiskohtainen kuvaus integroinnista verkkoprojektiin ja ilmainen jakelu.
Tämä on käyttövalmiiden diaesitysten toteutus käyttämällä scriptaculous-/prototyyppiä tai jQueryä. Horinaja on jokseenkin innovatiivinen ratkaisu, koska sen avulla voit vierittää liukusäätimeen sijoitettua sisältöä pyörällä. Kun hiiren osoitin on diaesitysalueen ulkopuolella, vieritys pysähtyy, kun osoitin asetetaan diaesityksen päälle.
Tämä on ominaisuus yksinkertaisista kuvanvierityssarjoista, vaikkakin katseluohjaimilla, ja toimii siksi sekä automaattisessa että manuaalisessa tilassa.
s3Slider on jQuery-laajennus, joka luo diaesityksen järjestämättömästä kuvaluettelosta ja voidaan helposti toteuttaa millä tahansa verkkoalustalla.
Tämä on jQuery-laajennus, joka on optimoitu käsittelemään suuria määriä valokuvia ja säästämään kaistanleveyttä.
Vegasin tausta
Vegas Background jQuery -laajennuksen avulla voit lisätä kauniita koko näytön taustakuvia verkkosivuille, joissa kaikissa on diaesityselementtejä. Jos tutkit huolellisesti laajennuksen kanssa työskentelyn hienouksia, voit löytää monia mielenkiintoisia ratkaisuja, tietysti vain, jos tarvitset sitä.
— liukusäädin liukusäätimenä, ei enempää, ei vähempää, kuvien tai artikkeleiden ilmoituksilla ja yksinkertaisilla säätimillä satunnaisesti.
on kevyt (noin 5 kt) javascript kuvien katselun järjestämiseen. Automaattinen suurten kuvien koon ja skaalaus mahdollistaa kuvan katselun täysikokoisena selainikkunassa
PikaChoose jQuery Image Galleryn versio 4 on saatavilla! Pikachoose on kevyt jQuery-diaesitys upeilla ominaisuuksilla! Integraatio Fancyboxiin, erinomaisia teemoja (vaikkakaan ei ilmaisia) ja paljon muuta tarjoavat lisäosien kehittäjät huomioisi.
Tarkistaa tietojesi kuvien määrän ja luo dynaamisesti valokuvalinkkejä digitaalisena navigointina. Lisäksi jokaisen kuvan napsauttaminen siirtyy eteen- tai taaksepäin, ja voit myös selata kuvia sen alueen mukaan, jota napsautat kuvaa (esimerkiksi: klikkaamalla kuvan vasenta reunaa siirrät dioja edestakaisin, vastaavasti kuvan oikealle puolelle).
Toinen jQuery-liukusäädin, joka sopii täydellisesti mihin tahansa WordPress-malliin.
Toinen "Nivo" -kehitys, kuten kaikki tämän studion kaverit, plugin on tehty korkealaatuisesti, sisältää 16 ainutlaatuista siirtymätehostetta, näppäimistönavigointia ja paljon muuta. Tämä versio sisältää erillisen laajennuksen suoraan WordPressille. Joten kaikille tämän blogimoottorin faneille Nivo Slider on juuri sinulle sopiva.
jQuery-laajennus, jonka avulla voit luoda nopeasti yksinkertaisen, tehokkaan ja kauniin liukusäätimen kaikenkokoisille kuville.
Pirobox on kevyt jQuery "lightbox" -skripti, katselu tapahtuu ponnahdusikkunassa, joka mukautuu automaattisesti kuvan kokoon, kaikilla säätimillä.
Tämän gallerian luojat tarjoavat kuvista melko omaperäisen esityksen. Kuvat näytetään miniatyyreinä aallon muodossa, kun napsautat pikkukuvaa, näemme kuvan keskikokoisen version, napsautat toisen kerran ja näet suuren kuvan. Voit pitää tätä kokeiluna, mutta sinun on myönnettävä, että jotain uutta ja epätavallista on aina mielenkiintoista.
Koko näytön diaesitys HTML5:llä ja jQueryllä
Diaesityksiä ja kuvien näyttämiseen koko näytön tilassa kehittäjät käyttivät jo tuttua Vegas jQuery -laajennusta, joka sisältää monia ideoita ja tekniikoita, joita on aiemmin kuvattu yksityiskohtaisesti ryhmän artikkeleissa. HTML5-äänielementtien läsnäolo ja kuvien välisten siirtymien tyyli ovat houkuttelevia.
Toinen Codrops-tiimin kehitystyö, täysi ja toimiva kuvagalleria, mutta sitä on turha kuvailla, se on nähtävä.
Kuvaesitys, kuvat katoavat silmiesi edessä, vaikutus on yksinkertaisesti upea.
On JavaScript-kuvagalleriakehys, joka on rakennettu jQuery-kirjaston päälle. Tavoitteena on yksinkertaistaa ammattimaisen kuvagallerian kehittämistä verkko- ja mobiililaitteisiin. Voit tarkastella sitä ponnahdusikkunassa tai koko näytön tilassa.
Alamme hiljaa tottua siihen ja odottelemme uusia töitä Codrops tiimiltä. Hanki erinomainen kuvan liukusäädin, jossa on upea 3D-siirtymätehoste, jotta voit katsella kuvia koko näytön tilassa.
Toinen WordPress-laajennus diaesityksen järjestäjäsarjasta. Integroituu helposti melkein mihin tahansa suunnitteluun ja tarjoaa monia mukautusvaihtoehtoja kokeneille ja kokemattomille käyttäjille.
Toinen WordPressille kirjoitettu laajennus helpottaa kuvien tai minkä tahansa muun sisällön diaesityksen järjestämistä blogiisi.
Hyvä diaesityslaajennus integroitavaksi WordPressiin. Xili-floom-slideshow asennetaan automaattisesti, ja myös henkilökohtaiset asetukset ovat sallittuja.
Slimbox2 on vakiintunut WordPress-laajennus kuvien näyttämiseen Lightbox-tehosteilla. Tukee automaattista diaesitystä ja kuvien koon muuttamista selainikkunassa. Ja yleisesti ottaen tällä laajennuksella on monia etuja muihin tämän sarjan laajennuksiin verrattuna.
Tämän laajennuksen/widgetin avulla voit luoda dynaamisia, ohjattuja diaesityksiä ja esityksiä verkkosivustollesi tai blogillesi, joka toimii WordPress-moottorilla.
Tämä WordPress-laajennus muuntaa upotetut galleriakuvat yksinkertaiseksi ja joustavaksi diaesityksenä. Laajennus käyttää FlexSlider jQuery -kuvan liukusäädintä ja käyttäjän henkilökohtaisia asetuksia.
on WordPress-laajennus valokuvien, SmugMug-, Flickr-, MobileMe-, Picasa- tai Photobucket- RSS-syötteiden kuvaesitysten järjestämiseen, toimii ja näyttää puhtaalla Javascriptillä.
Yksinkertainen liukusäädin WordPressille ja muille. Ei mitään ylimääräistä tai raskasta, työ on tehty minimalistiseen tyyliin, painopiste on vakaudessa ja nopeudessa, yhdistyy täydellisesti bloginhallintakoneeseen.
Mielestäni Skitter on yksi parhaista liukusäätimistä, joka tukee WordPressin kanssa työskentelyä. Minua houkuttelee toiminnan vakaus ja nopeus, ei liian näkyvät säätimet, siirtymäefektit ja melko yksinkertainen yhteys teemaan.
on WordPressin laajennus, jonka avulla voit helposti ja nopeasti järjestää kuvagallerian verkkosivustollesi ja katsella sitä diaesitystilassa. Näyttö voi olla joko automaattinen tai täysin ohjattu esittelyllä pikkukuvia ja kuvatekstejä.
Sivustosta | Demo
Näyttää kaikki postauksen/sivun kuvat diaesityksenä. Helppo asennus. Tämä laajennus vaatii Adobe Flashin siirtymäanimaatioilla varustetulle versiolle, jos Flashia ei löydy, liukusäädin toimii normaalisti.
Toinen yksinkertainen WordPressin liukusäädin, se näyttää kuvia viesteistä ja lyhyistä artikkeleista. Käytän juuri tällaista lisäosaa tässä blogissa silloin tällöin.
Meteor Slides on jQuery WordPress -liukusäädin, jossa on valittavissa yli kaksikymmentä siirtymistyyliä. Kirjoittaja kutsui laajennusta "meteoriksi", mikä luultavasti tarkoitti toiminnan nopeutta, ehkä en huomannut mitään meteorista.
oQey Gallery on täysimittainen kuvagalleria, jossa on WordPressin diaesityselementtejä, sisäänrakennetuilla video- ja musiikkiominaisuuksilla.
Se on diaesitys flash-animaatioelementeillä kuvien ja videoiden katseluun verkkosivustoilla ja blogeissa. Voit sijoittaa tämän liukusäätimen mille tahansa verkkosivustolle, missä tahansa koossa ja haluamallasi sisällöllä.
Flash Gallery -laajennus muuttaa tavalliset galleriat upeiksi kuvaseiniksi, jotka tukevat useita albumeita viestiä kohden, koko näytön katselua ja diaesitystilaa.
WOW Slider on WordPressin jQuery-kuvan liukusäädin, jossa on uskomattomia visuaalisia tehosteita (räjähdys, lennätys, kaihtimet, neliöt, fragmentit, perus, häivytys, pino, pystypino ja lineaarinen) ja ammattimaisesti suunniteltuja malleja.
Promotion Slider on jQuery-laajennus, jonka avulla on helppo luoda yksinkertainen diaesitys tai ottaa käyttöön useita vyöhykkeitä pyöriviä mainoksia sivulla, koska se on erittäin muokattavissa oleva työkalu, jolla voit hallita täysin mitä näytät liukusäätimessä ja miten moduuli toimii yleisesti.
| Demo
Uutta versiossa 2.4: tuki vedä ja pudota -kuvien lajittelulle suoraan WordPress-editorin kautta sekä mahdollisuus lisätä valokuvalinkkejä pääkuviin. (IE8:ssa saattaa olla virheitä, toimii hyvin kaikissa yleisimmissä selaimissa. Kirjoittajat lupaavat täyden tuen IE8:lle tulevaisuudessa.)
| Demo
Tämän arvostelun viimeinen sointu on tämä WordPress-laajennus, toinen liukusäädin, jossa on mielenkiintoisia visuaalisia tehosteita kuvien valitsemiseen ja vaihtamiseen.
Katselen kaikkea yllä kuvattua ja hämmästyn, mitä mielikuvitusta näillä ihmisillä on, mutta tämä ei ole kaikki, mitä useat verkkokehittäjät ovat viime aikoina keksineet aiheesta kuvien järjestäminen verkkoprojekteissa. Hienoa, että nyt on mahdollista toteuttaa näin upeita ratkaisuja gallerioiden ja diaesitysten luomiseen.
Uskallan hiljaa toivoa, että tästä kokoelmasta löydät jotain mielenkiintoista itsellesi, luot oman ainutlaatuisen gallerian tai liukusäätimen käyttäjien iloksi ja tietysti rakkaasi itsesi iloksi, ja missä me olisimme ilman tätä...
Hei kaikki! Tänään puhumme ehkä parhaasta ilmaisesta valokuvagalleriasta, videosta ja valokuvaliukusäätimestä, puhumme "valokuvakehyksestä". Huolimatta siitä, että käsikirjoitusta ei ole tuettu nyt 2 vuoteen ja kirjoittaja siirtyi saman aiheen projektiin, se toimii loistavasti ja miellyttää edelleen silmää.
Tärkeimmät edut (+)
Miinukset (-)
Tämä yhteysvaihtoehto on yksinkertaisin, mutta ei paras, sitä tulisi käyttää vain, jos sinun on näytettävä galleria useimmilla sivuston sivuilla. Tämän vaihtoehdon etuna on CDN:n käyttö.
Voit helpottaa hakua käyttämällä Ctrl + F . Jos haluttua linjaa ei ole, sinun on yhdistettävä jQuery. WordPressissä tämä voidaan tehdä liittämällä alla oleva koodi teeman funktiotiedostoon (functions.php). Itse asiassa tätä komentosarjaa käytetään, kun jQueryn eri versioiden välillä on ristiriitoja, ja se toimii seuraavan kaavan mukaan: se poistaa aiemmin rekisteröidyn jQueryn, rekisteröi uuden ja näyttää komentosarjan. JQuery-kirjaston nykyiset versiot löytyvät täältä.
Voit yksinkertaisesti lisätä tämän rivin ja väliin:
Tässä yhteysvaihtoehdossa komentosarjatiedostot näkyvät vain tarvittavilla sivuilla [shortcode]:n kautta. Ja jos käytät Autoptimize-laajennusta, myös komentosarjakoodi integroidaan teematiedostoihin. Näiden yksinkertaisten manipulaatioiden pitäisi lisätä sivuston latausnopeutta.
Galleria näytetään HTML-koodina käyttämällä kontti c class="fotorama", säilö sisältää kuvan tulostuskoodin tai linkki kuvaan . Kun kirjoitat artikkelia WordPress-moottorilla, vaihda editori tekstitilaan ja kirjoita säilö c class="fotorama" .
Se näyttää tältä:
Tai näin (linkkien numerointi on valinnainen):
1 3 4
Esimerkkejä Fotorama-asetuksista Säiliön mitatKuvakehyslohkon koko on ensimmäisen kuvan koko, muut kuvat skaalataan suhteessa ensimmäiseen. Voit korjata tämän tilanteen määrittämällä mitat manuaalisesti.
Muita asetuksia on:
Data-width="98%" //suhteellinen leveys data-ratio="800/600" //kuvasuhde data-minwidth="420" //min. leveys data-maxwidth="900" // max. leveys data-minheight="320" // min. height data-maxheight="100% // suhteellinen maksimikorkeus data-height="100% // suhteellinen korkeus
MiniatyyritData-nav="thumbs" vastaa pikkukuvista
Mutta tämä menetelmä ei ole kovin tehokas, koska skriptin on ladattava kaikki valokuvat kerralla pikkukuvien luomiseksi, joten olisi järkevämpää valmistella pieniä kopioita kuvista etukäteen. WordPress luo automaattisesti pikkukuvat, joita käytämme. Saat linkin pikkukuvaan lisäämällä tiedoston nimeen -70x70 (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk- 70x70.jpg).
Pikkukuvan oletusarvo on 64 × 64. Voit säätää tätä parametria käyttämällä data-thumbwidth- (leveys) ja data-thumbheight (korkeus) -asetuksia. Jos tarvitset pikkukuvan oman kokonsa, aseta pikkukuvatiedoston leveys- ja korkeusparametrit:
Photoframe käsittelee täydellisesti HTML:n ja CSS:n, mikä laajentaa huomattavasti skriptin toimivuutta. Työskentele linkkien, lohkojen, taulukoiden, kappaleiden kanssa, kirjoita CSS:ää ja paljon muuta. Alla on esimerkkejä gallerian töistä. Jos visuaalinen osa ei näy, napsauta "Tulos"-painiketta.
Näytä/piilota esimerkkejä
Katso Ivanov Klimin (@DreamerKlim) kynä ooppwb CodePenissä.
Katso Ivanov Klimin (@DreamerKlim) kynä aVEEVb CodePenissä.
Koko näytön tila data-allowfullscreen="true" //selainikkunassa data-allowfullscreen="native" //koko näytössäOn mahdollisuus lisätä erillinen suuri kuva koko näytön tilaan data-full-toiminnolla:
Skriptikokoelmastamme löydät pieniä, mutta erittäin hyödyllisiä ja toimivia laajennuksia verkkosivustollesi. jQuery Galleryn avulla on helppo luoda kauniisti suunniteltu digitaalinen valokuvagalleria, jossa on vieritys, zoomaus, pikkukuvien katselu ja monia muita hyödyllisiä ominaisuuksia. Tarjolla on sekä tiukkoja ratkaisuja ammattisivustoille että kirkkaita animaatioita ja muita erikoistehosteita viihdeprojekteihin.
jQuerylla kuvia voidaan katsella lataamatta sivua uudelleen tai lisäämättä liikennevirtaa. Esitettyjen lisäosien avulla voit optimoida kuvien lataamisen reaaliajassa ja esitellä galleria kätevästi ja käyttäjäystävällisellä tavalla. Mukauttamisen helpon ja useiden käytettävissä olevien ratkaisujen ansiosta oma jQuery-kuvagalleriasi voi nyt näyttää juuri siltä, miltä haluat. Esitetyt skriptit on testattu eri alustoilla ja niillä on erinomainen yhteensopivuus.
Tänään tarkastelemme jQuery Flipping Gallery -laajennusta, jonka avulla voit luoda upeita kuvagallerioita, joissa on erittäin omaperäisiä siirtymiä. Esimerkissä on 5 tyyppistä siirtymää käyttämällä tätä laajennusta. Lisäosa on todella helppokäyttöinen, joten kuka tahansa voi käyttää sitä täysin.
Esimerkki löytyy täältä:
ladataTarkastellaan tarkemmin valikon luomista Demo 2:sta, ja valikko näkyy vasemmassa yläkulmassa.
HTML-osaEnsin sinun on yhdistettävä jQuery-kirjasto, jonka voit ladata täältä, ja Flipping Gallery -laajennus tagien väliin:
| 1 2 3 4 5 6 | ... ... |
Sitten järjestämme kuvat. Voit lisätä niin monta kuvaa kuin haluat:
| 1 2 3 4 5 6 7 8 |
|
Ja lisätäksesi kuvauksen kuville (kuten demoissa 4 ja 5), sinun on käytettävä attribuuttia data-otsikko:
| 1 2 3 4 5 6 7 8 |
|
| 1 2 3 4 5 6 7 8 9 | $(.gallery") .flipping_gallery (( suunta: "eteenpäin" , valitsin: "> a" , väli: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "bottom" , automaattinen toisto: 500 ) ); |
Katsotaanpa, mitä kukin menetelmä tarkoittaa:
- suunta - menetelmä, joka vastaa siitä, miten kuvat näkyvät. Jos "eteenpäin", kuva alusta sijoitetaan loppuun, jos "taaksepäin" - päinvastoin. Oletusarvo on "eteenpäin".
- valitsin - valitsin, jolla valitsemme kuvat, sitä voidaan muuttaa haluamallasi tavalla.
- etäisyys — määrittää kuvien välin perspektiivissä.
- showMaximum - määrittää käyttäjälle näkyvien kuvien määrän. Voit käyttää vähintään 100 kuvaa, mutta vain 15 ensimmäistä näytetään, mikä on erittäin kätevää eikä lataa selainta.
- enableScroll - voit katsella kuvia hiiren rullalla.
- flipDirection - määrittää, minne kuva liukuu: "vasemmalle" - vasemmalle, "oikealle" - oikealle, "ylhäällä" - ylös ja "alas" - alas. Oletuksena se liukuu alas.
- autoplay — gallerian automaattinen toisto. Määritetty millisekunteina, ts. Kuinka kauan kuvien muuttuminen kestää?
Sinulla on nyt upea galleria, jota voit käyttää kuvien julkaisemiseen.
