Hvordan Lage Web lysbildeserier

Hvordan Lage Web lysbildeserier


Lysbildefremvisninger brukes til nesten alle slags innhold som kan vises på nettet, inkludert tekst, bilder og video. Web lysbildefremvisninger var en gang stort sett bygd ved hjelp av Flash, men Javascript ressurser som jQuery har nylig blitt så utbredt at du kan skape en attraktiv, effektiv lysbildefremvisning uten å måtte bruke kommersiell programvare. Ved hjelp av Javascript for lysbilde viser også betyr at de vil være tilgjengelig for folk som ikke har Flash Player installert, slik som de ser på nettstedet ditt på mobile enheter.

Bruksanvisning

1 Last ned jQuery script. Mange gratis Javascript ressurser for Web lysbildefremvisninger er tilgjengelig for øyeblikket, men det jQuery-serien er uten tvil det mest omfattende. Du kan gjøre endringer i kildekoden hvis du trenger å gjøre noen endringer fordi disse ressursene er designet for å være fleksibel og tilpasningsdyktig. Etter at du har jQuery script lastet ned, laste det opp til din egen webserver og inkludere en link til den i hodet av sidene på nettstedet:

<Script type = "text / javascript" src = 'jquery.min.js'> </ script>

2 Bla gjennom de tilgjengelige ressursene jQuery for å finne en lysbildefremvisning som passer dine behov. Et stort antall av plug-ins er nå tilgjengelig for Web lysbildefremvisninger, og de fleste er raske og enkle å bruke. Sjekk utvalget som er tilgjengelig på jQuery nettstedet og på andre nettsteder. Mange av de mest nyttige verktøyene er faktisk ikke oppført på jQuery området, selv om de bruker skriptet. Når du har funnet en plug-in som du ønsker å prøve, laste det ned og følg instruksjonene inkludert.

3 Ta med nødvendig jQuery-koden på websidene. Følg alltid bruksanvisningen til den valgte ressursen, men generelt du må inkludere kode i hodet av sidene på nettstedet. Denne koden vil enten være en manuset selv eller en kobling til en ekstern script som du også må laste opp til din server. Du må kanskje også å omfatte ytterligere ressurser, for eksempel bilder og CSS-kode. Følgende er et eksempel på jQuery kode i hodet på en webside, bruker både en ekstern script og kode på gjeldende side:

<Script type = "text / javascript" src = 'jquery.myslideshow.js'> </ script>

<Script type = "text / javascript">

$ (Document) .ready (function ()

. {$ ( '. Innhold') doSlideshow (); });

</ Script>

Den "jquery.myslideshow.js" script må være i samme katalog som den websiden.

4 Forbered innholdet på websider for visning i lysbildefremvisningen. Sørg for lysbildefremvisningen innholdet er klar til bruk ved å beskjære bilder, skrive tekst og optimalisere filstørrelser. Du må også forberede spesielt for jQuery ressursen du bruker. Dette innebærer vanligvis å plassere innholdet i en bestemt plassering i forhold til dine websider og å registrere det på sidene gjennom spesifikke HTML markup, slik som dette eksempelet:

<Div class = "content">

<Img alt = "pic1" />

<Img alt = "pic2" />

<Img alt = "pic3" />

</ Div>

JQuery plug-in i dette tilfellet ville søke i dokumentet for elementer med "innhold" -klasseattributtet og gjennomføre "MySlideShow" -funksjonen på innholdet, tre bilder i dette eksemplet.

5 Endre stilen på lysbildefremvisningen som passer din generelle Internett stil. Ikke bry deg om at lysbildefremvisningen passer dine behov, men har ikke den rette visuelle styling fordi du kan endre dette etter at du har lysbildefremvisning script installert. De fleste av disse ressursene bruke Javascript i forbindelse med CSS, slik at du kan gjøre hva endringer er nødvendig for å matche ditt nettsted stil. Se på CSS-kode og eksperimentere ved å gjøre endringer i den, slik at du beholder en kopi av originalene i tilfelle koden slutter å fungere.

Hint

  • Du må kanskje prøve mer enn én av de tilgjengelige jQuery lysbildefremvisninger for å finne en som passer deg perfekt. Ikke bekymre deg, blir lettere prosessen jo mer du gjør det.
  • Det er en sterk sjanse lysbildefremvisningen vil se vesentlig annerledes i enkelte nettlesere, spesielt eldre. Sørg for at du teste den grundig.