Hvordan konvertere presentasjonsfiler til en nett-klar lysbildefremvisning ved hjelp av JavaScript

Dette innlegget vil inneholde et enkelt sett med JavaScript-lysbildefremvisningsfunksjoner som krever at du manuelt lagrer eller eksporterer tidligere opprettede presentasjonsbilder til individuelt navngitte bildefiler, for eksempel .png-filtyper. Selv om dette kan virke konvensjonelt, er det fremdeles ganske enkelt å implementere. En av de beste grunnene til å konvertere presentasjonsfiler til visning på nettet er eliminering av programvareavhengig visning av spesifikke filtyper (dvs. .ppt, .pps, .pptx, .key, .opd,, pez). Presentasjonsbilder som er konvertert til bilder, tillater visning av alle brukere uansett presentasjonsprogramvare. I tillegg kan dette enkle settet med JavaScript-lysbildefremvisningsfunksjoner også brukes til å lage et lysbildefremvisning av ethvert bildegalleri, og så lenge de holder en jevn høyde og bredde, vil presentasjonseffektene forbli de samme.

På en rask sidenotis er det flere rammer som genererer lysbildefremvisning med imponerende effekter, og hver av disse bruker sine egne kombinasjoner av webteknologi, inkludert Ajax, DHTML, JavaScript, HTML5, CSS3, jQuery, Python og andre. Jeg vil gjennomgå flere av disse rammene i senere innlegg, som vil omfatte deck.js, impress.js, fathom.js og skred.

Eksporter presentasjonen

Enten du bruker Microsoft PowerPoint, Google Docs, Apple Keynote eller Prezi, er det første trinnet å eksportere lysbildene til individuelle bildefiler, for eksempel Portable Network Graphics (PNG) -format. Dette er ikke en bokstavelig eksport, ettersom det egentlig er en konvertering fra presentasjonsformat til individuelle bildefiler. I dette eksemplet vil vi lagre PowerPoint-presentasjonsbildene som bildefiler. Presentasjonen jeg bruker i dette eksemplet ble hentet fra http://mayas.mrdonn.org/powerpoints.html. For eksemplene med denne opplæringen vil jeg bare bruke de første 15 lysbildene i denne demonstrasjonen.

For denne demonstrasjonen, i PowerPoint 2007, er trinnene ganske enkle.

  • Åpne presentasjonen i PowerPoint.
  • Gå til Fil | Lagre som, og velg deretter Andre formater.
  • Velg bildefiltypen du bruker i webutviklingen din; typiske alternativer inkluderer JPG, PNG, GIF, TIF og BMP.
  • Velg mappeplassering du vil lagre bildene til; hvert lysbilde blir lagret som et individuelt bilde.
  • Velg for å lagre hvert lysbilde som et individuelt bilde.

Figur A

I dette tilfellet ble presentasjonsbildene lagret i den valgte mappen som. PNG-filer som vist i figur B :

Figur B

Koden

Denne demonstrasjonen inkluderer filer i en katalog som heter web, og i roten til den katalogen er det en HTML-fil som heter Slideshow.html ; en underkatalog som heter lysbilder inneholder bildene som ble opprettet fra presentasjonseksporten i forrige trinn, og en underkatalog som heter nav inneholder de tre navigasjonsikonene som brukes til onClick-funksjonene Hjem, Forrige og Neste. Webkatalogen med alle de ovennevnte filene er tilgjengelig for nedlasting her.

Vår HTML-eksempelfil starter med å opprette flere stiler som er i dokumentet for brukervennlighet, og den inkluderer ingen tekstdekorasjon for alle ankermerker, og setter grensen til null for alle bilder, og definerer en boksskygge for "pic" id, innstiller bakgrunnen til farge # 619C80, setter innholds-ID til å sentrere all tekstjustering med en toppmargin på 25 piksler, og til slutt setter titteletiketten "lbl" ID-font til større. Stilkoden vises nedenfor:

 en {tekstdekorasjon: ingen; } 
 img {border: 0px; } 
 #pic {-webkit-box-skygge: 5px 5px 10px rgba (58, 51, 50, 0, 62); 
 -moz-box-skygge: 5px 5px 10px rgba (58, 51, 50, 0, 62); 
 boksskygge: 5px 5px 10px rgba (58, 51, 50, 0, 62); } 
 kropp {bakgrunn: # 619C80; } 
 #content {text-align: center; 
 margin-top: 25px; } 
 #lbl {skriftstørrelse: større; } 

Deretter legger vi til innholdet vårt, som er inneholdt i et med id = "innhold", og starter med vårt første bilde med kilde der id = "pic", alt og titler også er angitt. Så legger vi til en som setter bildetekstene med id = "lbl". Deretter legger vi til et avsnitt som inneholder tre ankermerker med onClick-funksjoner for å returnere "Hjem", gå videre til "Neste" -bilde, eller gå tilbake til et "Forrige" -bilde. Hvert anker inneholder et passende ikon for hver funksjon. Koden vises nedenfor:


 The Mayan Society 

 
 
 

Neste, vil vi legge til JavaScript-enheten vår nederst på siden, men før den avsluttende taggen. Først setter vi variabelen til null, og deretter definerer vi bildegruppen med hvert bilde oppført etter bildekilde, deretter bildetittel og alternativ tekst, deretter bildeteksten. Starten av JavaScript begynner med koden, som vist nedenfor.

Legg til noen få kodelinjer under åpningskoden, så legger vi inn variabelen og bildearrayen som vist nedenfor.

 var num = 0; 
 // bildekilde, alt tekst, bildetekst 
 imgArray =  
 'img / Developer / 299 / how-convert-presentation-files-web-ready-slideshow-using-javascript.png', 'The Mayan Society - Slide 1', 'The Mayan Society', 
 'slides / slide02.png', 'Geography - Slide 2', 'Geography', 
 'slides / slide03.png', 'Lowlands - Slide 3', 'Lowlands', 
 'slides / slide04.png', 'Highlands vs Lowlands - Slide 4', 'Highlands vs Lowlands', 
 'slides / slide05.png', 'Dry Season - Slide 5', 'Dry Season', 
 'slides / slide06.png', 'The Rivers - Slide 6', 'The Rivers', 
 'slides / slide07.png', 'The Rain Forest - Slide 7', 'The Rain Forest', 
 'slides / slide08.png', 'The Soil - Slide 8', 'The Soil', 
 'slides / slide09.png', 'Geographical Dispersion - Slide 9', 'Geographical Dispersion', 
 'slides / slide10.png', 'Mayan History - Classical Period - Slide 10', 'Mayan History - Classical Period', 
 'slides / slide11.png', 'Mayan History - Classical Period - Slide 11', 'Mayan History - Classical Period', 
 'slides / slide12.png', 'Mayan Agriculture - Slide 12', 'Mayan Agriculture', 
 'slides / slide13.png', 'Mayan Agriculture forts. - Lysbilde 13 ', ' Mayan Agriculture forts. ', 
 'slides / slide14.png', 'Cenotes - Slide 14', 'Cenotes', 
 'slides / slide15.png', 'Mayan Religion - Slide 15', 'Mayan Religion' 
  

Deretter legger vi til vår første funksjonsanrop til lysbildefremvisningen (lysbilde_nummer), som angir document.getElementById for bildekilden, bildetittelen, bildet alt og deretter den indreHTML-bildearrayen. Denne funksjonen vises nedenfor:

 funksjon lysbildefremvisning (lysbilde_nummer) { 
 document.getElementById ( 'pic') src = imgArray SLIDE_NUM 0.; 
 . Document.getElementById ( 'pic') title = imgArray SLIDE_NUM 1; 
 document.getElementById ( 'pic') alt = imgArray SLIDE_NUM 1.; 
 document.getElementById ( 'lbl') innerhtml = imgArray SLIDE_NUM 2.; 
 } 

Deretter legger vi til lysbildefremvisning- funksjonen (), som aktiverer onClick for "Next" -ankeret og ikonet; når du klikker på det, vises neste bilde i matrisen. Denne funksjonen vises nedenfor.

 funksjon lysbildefremvisning () { 
 num ++; 
 num = num% imgArray.length; 
 fremvisning (num); 
 } 
 Den neste funksjonen vår er lysbildeserienBack (), som muliggjør onClick på "Forrige" -ankeret og ikonet. Denne funksjonen vises nedenfor. 
 funksjon lysbildeserieBack () { 
 num--; 
 if (num <0) {num = imgArray.length-1;} 
 num = num% imgArray.length; 
 fremvisning (num); 
 } 

Og den endelige funksjonen, slideshowHome () gjør det mulig å klikke på "Home" -ankeret og -ikonet, som når du klikker på vil bringe det første bildet i matrisen som skal vises. Dette tilbakestiller også matrisen til 0 med num = 0 ; . Den endelige funksjonen vises nedenfor.

 funksjon lysbildefremvisning Hjem () { 
 num = 0; 
 fremvisning (num); 
 } 
Det første lysbildefremvisningsbildet vises i figur C som vist i Google Chrome 18.0.1.

Figur C

Dette er en enkel og rask metode for å integrere presentasjoner på nettstedet ditt, og det gir brukerne tilgang til presentasjoner uten avhengighet av en bestemt filtype. I tillegg til brukerinngangsnavigering, kan et annet alternativ være å inkludere et sett med JavaScript-funksjoner for automatisk å rotere bildene med et angitt tidsavbrudd.

© Copyright 2020 | mobilegn.com