Koble til GalleryView med jQuery på nettstedet ditt

Jeg er alltid på vakt etter gratis, nydelige dingser, kreative verktøy og ekspert-plugins som gjør livet enklere for suget til webutvikling. Nylig snublet jeg på GalleryView av Jack Anderson, en nettutvikler i Washington, DC-området.

JQuery-plugin-en inneholder mange konfigurasjonsalternativer for brukere som vil lage sine egne unike fotogalleristiler, fra implementering av plug and play-nullkonfigurasjon til å legge til bildetekster, lage tilpassede miniatyrbilder og fotodetaljer. Andre alternativer inkluderer et glidebladstilgalleri, varierende elementposisjonering og "Opprett et galleri", som er et nytt online tillegg som lar deg bygge din egen "$ (#myGallery)" -funksjon. Dette innlegget vil se på nedlasting av plugin fra GitHub, oppsett, bruk, kodebiter og flere demonstrasjoner som kjører GalleryView jQuery-plugin. Jeg har ikke gitt en nedlasting av demonstrasjonene mine i dette innlegget siden den opprinnelige koden er tilgjengelig for deg å delta på egen hånd fra GitHub-katalogen.

Last ned og konfigurer

Som med alle Github-lagringene, er GalleryView-koden tilgjengelig for gratis nedlasting som en zip-fil eller enkeltvis, og inkluderer følgende mapper: CSS, demoer, js og de tilknyttede filene: readme, licens, og endre logg. Når du er lastet ned og trukket ut til webkatalogstrukturen, kan du gi nytt navn til rotmappen til hva du måtte ønske deg. For denne demonstrasjonen ga jeg nytt navn til katalogen "galleryview" og la den under webkatalogen min, som vist i figur B:

Etter at katalogstrukturen er satt, er de neste trinnene for å sette opp jQuery-plugin ganske enkelt og raskt. Med seks totale trinn og deretter litt koding i galleriets webside-dokument, kan du få galleriet i gang. Trinnene i forkortet form inkluderer følgende:

  1. Lag katalogstrukturen (Ferdig!)
  2. Ta med skriptkoder for GalleryView-versjon, jQuery-tidtakere og letter filer.
  3. Legg til en henvisning til GalleryView CSS-stilarket på websiden.
  4. Lag en uordnet liste med bildeinnhold og teksttekst med ul id = "gallery" .
  5. Rediger IDen til den første regelen i GalleryView CSS-stilarket for å matche IDen som er gitt i den uordnede listen, som standard er den oppført som " #myGallery ".
  6. Ring GalleryView-plugin med funksjonskallet: $ ('# id_of_list'). GalleryView ().

JQuery

Kraften bak GalleryView er kraften i jQuery-biblioteket, og utnytte den styrken inkluderer følgende globale og lokale skriptkoder som er lagt til i:

Den siste skriptkoden kaller GalleryView () -funksjonen på de uordnede listene, og inneholder mange innstillinger som kan endres avhengig av galleriets krav. Flere alternativer og modifiserbare konfigurasjoner inkluderer følgende (jeg har listet opp bare de første seks av de tretti totale innstillingene med standardverdier):

 overgangshastighet: 2000, // INT - varighet av panel / rammeovergang (i millisekunder) 
 overgangsintervall: 4000, // INT - forsinkelse mellom panel / rammeoverganger (i millisekunder) 
 easing: 'swing', // STRING - lettelsesmetode å bruke for animasjoner (jQuery gir 'swing' eller 'lineær', mer tilgjengelig med jQuery UI eller easing plugin) 
 show_panels: true, / BOOLEAN - flagg for å vise eller skjule paneldelen av galleriet 
 show_panel_nav: false, // BOOLEAN - flagg for å vise eller skjule navigasjonsknapper på panelet 
 enable_overlays: true, // BOOLEAN - flagg for å vise eller skjule paneloverlegg 
Andre valgfrie funksjoner inkluderer panelbredde, panelhøyde, panel_animasjon, panel_skala, enable_slideshow, show_filmstrip, show_captions og show_infobar, bare for å nevne noen. Disse og alle "Full Featured" -alternativene er tilgjengelige i all-features.html-filen som ligger i demomappen, som er inkludert i nedlastingen. "Full Feature Demo" vises i Google Chrome versjon 22.0.1229.94 m, i visningen Inspect Element som vist i figur C :

CSS

GalleryView-pluginen inneholder et eget stilark "jquery.galleryview-3.0-dev.css". Selvfølgelig står du fritt til å endre eller endre noen av stylingegenskapene som du ønsker. CSS er godt organisert og kommentert og inneholder seksjoner for "Galleriliste", "Panelstiler", "Filmstripstiler" og mer. "Panel Styles" -utdraget vises i figur D :

Legg til samtalen i stilarket fra websidedokumentet ditt, som ligner på stilarklenken nedenfor:

HTML

Så har du skriptetikettene dine, har du samtalen til stilarket - det som gjenstår nå er å lage den uordnede listen

    med hvert bilde og bildetekst lagt til som individuelle listeelementer
  • innenfor websidedokumentet. Hvis du bruker det fulle funksjonssettet, anbefales det at du tar med attributter i bildekoden for "data-frame", "title" og "data-description". Kodebiten nedenfor viser den grunnleggende HTML-en som er nødvendig for å laste inn bildene:

    En skjermdumping av fullfunksjonsdemoen vises som vist i Google Chrome versjon 22.0.1229.94 m med figur E :

    demonstrasjoner

    Jack Anderson gir flere online demonstrasjoner av GalleryView som er i bruk, inkludert:

    • Nullkonfigurasjon - Standarddemonstrasjonen, som er GalleriVis rett ut av boksen der alle bilder skaleres og beskjæres for å passe helt inn i dimensjonene til galleripanelet, og den inkluderer filmstrimmelrammer, som vist i figur E ovenfor.
    • Bildetekster - Legger til bildetekster i filmstrimmelrammer ved å legge til "tittelen" -attributtet til bildekoden, som vist i figur F :

    • Egendefinerte miniatyrbilder og bildedetaljer - Bruker to GalleryView-funksjoner, muligheten til å angi egendefinerte miniatyrbilder og informasjonsoverlegg med datarammen, tittelen og databeskrivelsen, som vist i figur G :

    Andre demonstrasjoner inkluderer Slider Style Gallery, Varying Element Position og Image Panning. Og husk at du kan lage ditt eget "Galleri" i Jacks eksperimentelle "Create-A-Gallery" hvor du angir panelalternativer, filmstripealternativer og informasjonslinjealternativer med veksler og lysbilder som vist i figur H :

    GalleryView-pluginen skal være en enkel adopsjon for omtrent alle nettsteder som krever et fotogalleri som en del av online innholdslevering.

    © Copyright 2020 | mobilegn.com