Prosjekt Info :
Prosjekt Innhold :
Forfatter : vwinstead
Beslektede emner :
The Galleria kjerne og en rekke temaer og add-ons er 100% åpen kildekode lisensiert under MIT-lisensen, som gjør det gratis å bruke, kopiere, selge og omfordele. [1] Dette betyr at du kan spille rundt med koden og justere den til å passe dine behov. Det er fint, men grensesnittet virkelig har nok av muligheter knyttet til den.
Videre er det ganske enkelt å integrere med en lysboks program kalt Fancybox . Andre lysboks programmer fungerer på en lignende måte, men jeg vil fokusere på Fancybox for mitt formål, fordi det er det jeg har fungerer.
Her er noen nyttige linker å komme i gang:
- Hjemmeside for Galleria : http://galleria.aino.se/
- Last ned Galleria: http://github.com/aino/galleria
- Se en demo : http://galleria.aino.se/media/galleria/src/themes/classic/classic-demo.html
- Fancybox (valgfritt): http://fancybox.net/
Last ned koden fra linken i forrige avsnitt. Pakk ut innholdet til en katalog som du selv velger.
Last ned kildekoden til noen mappe på din side: eksempel: / verktøy / galleria /
Under denne mappen vil du ha en "plugins" og "tema"-mappen. Nå som du har kildekoden på plass er det ingenting mer du trenger å gjøre med det. Det er installert.
Opprett en html-side slik at du kan teste ut Galleria app. De følgende avsnittene viser deg hvordan du kan integrere galleria i din prøven siden.
For å legge til Galleria app på en webside du vil gjøre følgende.
En. Legg til følgende to linjer til "head"-delen
< script src = "Verktøy / Galleria / galleria.js " > < / script >
2. Legg noen referanser til bildene. Du kan legge til "alt"-attributtet til bildene som dukker opp som bildetekster på bildene
< img alt = «Squirrel! Det er alt." src = "Http://wiki.com/commons/thumb/0/02/Hofgarten_edit.jpg" >
< img src = "Http://wiki.com/commons/thumb/Sea-otter-morro-bay_13.jpg" >
< img src = "Http://wiki.com/commons/thumb/Kuznetsk_Alatau_3.jpg" >
< img alt = "Jordbær, nam nam! Shiny rød" src = "Http://wiki.com/commons/thumb/d/de/strawberries_red_accent.jpg" >
< / div >
Tre. Referanse bildene div med Galleria.
Galleria. loadTheme ( '/ Verktøy / galleria / themes / classic / galleria.classic.js' ) ;
/ / Initialiser Galleria
$ ( '# Galleria' ) . Galleria ( ) ;
Det er egentlig alt som er nødvendig for å bruke dette programmet! Det mange ekstra alternativer som kan legges for å endre innstillingene for Galleria, men jeg vil gå inn som i et senere avsnitt.
FancyBox er et fint bilde popup funksjon (kalt en "lysboks") som forstørrer bildet og demper bakgrunnen når du klikker på et bilde. Jeg er ikke sikker på alle funksjonene på fancybox, men det er ren og enkel å bruke. Bare klikk på X øverst til høyre (eller noe annet sted enn på bildet) og det vil lukke bildet popup. Det er utrolig hvor mange lysboks apps IKKE få denne retten.
 |
Det er et par ting du må gjøre annerledes for å bruke fancybox på Galleria bildene. Last ned den nyeste fancybox kildekoden ved å bruke linken i første avsnitt ovenfor.
En. På "head"-delen av nettsiden din må du ta med fancybox skript
< script type = "Text / javascript" src = "./tools/fancybox/fancybox/jquery.fancybox-1.3.2.js" > script >
< link rel = "Stilark" type = "Text / css" href = "./tools/fancybox/fancybox/jquery.fancybox-1.3.2.css" media = "Skjerm" />
2. Hold bildet referanser den samme som i det siste eksempelet.
Tre. Når du henviser bildene div med Galleria, tilsett fancybox som et alternativ. Her er hvordan det ser ut:
forlenge : funksjon ( ) {
dette . bind ( Galleria. LOADFINISH , funksjon ( e ) {
$ ( e. imageTarget ) . klikk ( dette . proxy ( funksjon ( e ) {
e. preventDefault ( ) ; / / Fjerner søppel
var obj = dette . getData ( ) ;
$. fancybox ( {
"Href" : obj. image
} ) ;
} ) )
} ) ;
}
} ) ;
- ^Aino (2010), "Galleria — A JavaScript gallery for the Fastidious", Retrieved 29 October 2010