CSS-baserte presentasjonsalternativer for fotogalleri

Dette stykket vil gi en kortfattet oversikt over flere alternativer for CSS-galleri-kodeeksempler som fungerer rent med bare CSS eller med det meste CSS og noe JavaScript eller jQuery; den dominerende koden i hvert tilfelle er CSS-basert.

Den primære vektleggingen av CSS-tilnærmingen til presentasjon av galleribilder er et resultat av skiftet fra å bruke tabeller for presentasjonsplaner, og selv om dette ikke er en ny sak, vil du bli overrasket over hvor mange nettsteder som fortsetter å bruke

tagg for presentasjonsrammen. En annen vekt på CSS-tilnærmingen er å fjerne avhengigheter av skriptskode som JavaScript og jQuery. Under gjennomgang er Gallery CSS, CSS Image Gallery, W3 Schools Dynamic Drive CSS Image Gallery og CodePen CSS Image Gallery.

Gallery CSS av Ben Schwarz uttaler at det er bygget på ren CSS uten skript som vist i skjermbildet i figur B nedenfor. Imidlertid ser det ut til at de to demonstrasjonseksemplene som er gitt i nedlastningen, ved nærmere undersøkelse, inkluderer flere anrop til .js-filer og jQuery. Jeg er en purist antar jeg, og hvis du skal markedsføre et produkt som sier at det er ugyldig for en viss komponent, men så inkluderer arbeidsmodellen eller eksemplene dine deler av den komponenten, så er det vanskelig for meg å forstå hvordan de slippe unna med disse typer uttalelser. ZIP-filen gallery-css-master.zip nedlasting (5.1MB) fra GitHub, inneholder følgende kataloger: dist, eksempler, sass og flere filer i roten til katalogen gallery-css-master. En skjermdumping av filstrukturen vises i figur C, som vist i det lokale nettstedspanelet til FileZilla til høyre.

Tre raske trinn vil få deg til å kjøre et CSS-galleri i rask rekkefølge.

  • Inkluder kobling til gallery.css og gallery.theme.css
  • Legg deretter til markeringen i galleriet ditt med klasse- og ID-anrop.
  • Hvis du vil legge til autospilling, må du inkludere autoplay class class = "gallery autoplay items-3" .

Jeg kjørte begge eksempler på demonstrasjoner i Chrome og IE8, og IE8-eksemplet viste ikke kontrollene i IE8-nettleseren, men viste i Chrome, så det ser ut til å være et problem som vedvarer med kontrolloperatørens egenskaper i IE.

Hvis du vil lære mer om hvordan CSS Gallery fungerer, kan du kjøpe Ben's 40-minutters screencast for $ 12 for å se de avanserte teknikkene hans, inkludert layout og oppsett, CSS-overganger, CSS-velgere, forhandlerprefiksering, avansert bruk av SASS og SCSS, og CSS-animasjon.

W3Schools CSS Image Gallery vist i figur D bruker et enkelt sett med bilder div-containere med inline display, marginer, rammer, automatisk høyde og bredde og flyter venstre egenskaper.

Figur D

Koden oppretter en serie bilder som er rene esker i miniatyrbilder med hver sin tekst. I "prøv det selv" -demoen som vises i figur E, er den enkle og rene koden faktisk også responsiv, ettersom bildene fortsetter å flyte til venstre når skjermstørrelsen går over til en mindre dimensjon. Jeg har testet koden for W3Schools CSS Image Gallery i IE8 og Chrome med vellykkede resultater.

Figur E

Dynamic Drive CSS Image Gallery er et annet ganske enkelt skrevet eksempel på CSS-kode som viser større versjoner av galleri-miniatyrbilder dynamisk med musevinkler, vist i figur G nedenfor. HTML-bildetekster kan legges til det forstørrede bildet, og alle aspekter av Image Gallery eksisterer som vanlig HTML på siden. Jeg har testet kodeeksemplene i IE8 og Chrome, og svevefunksjonaliteten fungerer som forventet. I følge dokumentasjonen med galleriet fungerer den i IE6 +, Firefox og Opera 8+.

Figur G

En annen funksjon som er forklart i demoen for det dynamiske stasjonsgalleriet, er at det bruker CSSs ": hover" -pseudoklasse for å få et element til å reagere med onMouseover- hendelser, og når det skjer, er en absolutt plassert beholder som holder det forstørrede bildet, forankret på siden av en annen beholder med en stilling satt til relativ.

Det siste eksemplet er CodePen CSS Gallery, som er et annet enkelt eksempel på ren CSS-kode som viser miniatyrbilder av bildene under det utvidede nåværende bildet. Et museklikk er nødvendig for å se de utvidede bildene som er inkludert i galleriet. Jeg testet demokoden i Chrome med gode resultater; IE8 klarte imidlertid ikke å utføre museklikkfunksjonen. Et annet eksempel på demo av samme stil ved bruk av CSS-overganger er også tilgjengelig.

Figur H

Disse fire eksemplene klør bare overflaten av muligheter med ren CSS eller CSS med begrenset scripting. Fordelene ved å bruke en kun CSS-gallerikode betyr at du ikke trenger å bekymre deg for brukere som har JavaScript slått av, eller å måtte legge til skriptsamtaler til HTML-dokumentene dine.

© Copyright 2020 | mobilegn.com