Share
Som jeg lovet i min forrige artikkel, er det opplæringen om å lage et galleri ut av de tilpassede bildene. Som en bonus lærer du hvordan du oppretter et grunnleggende jQuery-plugin for å presentere bildet med større størrelse på miniatyrbildet på en mer tiltalende måte.
Hvis du ikke har lest min forrige artikkel om egendefinerte bildestørrelser, kan du lese den så det blir lettere å forstå denne opplæringen.
Avhengig av temaets layout, og hvilket gridsystem det bruker, kan du bestemme forskjellige bildestørrelser for miniatyrbilder. Før du bestemmer deg for hvor mange bilder du vil ha på rad, hva er bredden på beholderen der miniatyrbildene vil bli vist, marginer, paddings osv..
Jeg vil bruke en 940 piksler bred, 2 kolonne layout (8/4 ratio) som et eksempel, hvor innholdet vil være 620 piksler og sidebar 300 piksler med en 20 piksler venstre margin. Innholdsområdet og sidefeltet vil ha en indre polstring på 20 piksler. Nå er litt matte: innholdet er 620px bredt med polstring på 20px, og lar 580px for miniatyrbilder. og viser 5 miniatyrer per linje, hver med en høyre margin på 10px slik at de ikke sitter fast sammen; 5. bilde i hver linje har ikke rett margin; miniatyrer vil være 108px i bredde og høyde, og beskjæres.
Størrelsen på bildet vil være maksimalt 660px bredt og 660px høyt, de vil bli forandret proporsjonalt uten beskjæring.
Du kan velge hvilke størrelser som passer til oppsettet ditt, hvis du bestemmer deg for å endre størrelser, kan de lett regenereres (se forrige innlegg om hvordan du gjør det), og de trenger ikke å være firkantede.
Rediger functions.php fil så det ser ut som dette:
Accentsconagua
add_action ('after_setup_theme', 'setup'); funksjonoppsett () // ... add_theme_support ('post-miniatyrer'); add_image_size ('forhåndsvisning', 108, 108, sant); // thumbnail add_image_size ('zoomed', 660, 600); // stor //… Fortsatt i functions.php legg til metoden generate_thumbnail_list:
funksjon generate_thumbnail_list ($ post_id = null) hvis ($ post_id == null) returnere; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'vedlegg', 'post_mime_type' => 'bilde / jpeg, bilde / jpg, bilde / png, bilde / gif', 'post_parent' => $ post_id, 'orderby' => 'menu_order', 'order' => 'ASC', 'ekskluder' => get_post_thumbnail_id ($ post_id))); hvis (telle ($ bilder)> 0) echo 'I innholds single.php Ring generate_thumbnail_list metode, passerer post-ID som en parameter.
Bilder
Ovenstående vil sende en uordnet liste, som inneholder lenker til de større filene og miniatyrbildene.
Selvfølgelig må miniatyrbildene styles, ellers er det bare en vanlig liste med bilder. Legg til følgende i ditt eksisterende stilark eller opprett en ny og legg til det:
.fjern clear: both; .gallery liste-stil-type: none; polstring: 0; margin: 0; .gallery li float: left; margin: 0 10px 10px 0; .gallery li: nth-child (5n) margin-right: 0; .gallery a float: left; markør: pointer; tekst-dekorasjon: ingen; .gallery img float: left; grense: 0;
Dette vil sette bilder ved siden av hverandre, noe som gir litt plass rundt dem.
På dette tidspunktet klikker på miniatyrbildet det store bildet på en tom side. Dette er en god tilbakebetaling i tilfelle JavaScript er deaktivert.
Før du skriver noen JavaScript, vil det være ønskelig å vite hvordan det store bildet vil bli vist. Her er det jeg hadde i tankene:
Merk: alt dette vil bli generert fra jQuery-plugin. Dette er bare for å vise opprettelsesprosessen.
Et gjennomsiktig overlegg på toppen av alt innholdet, med bildet i midten og kontrollene øverst til høyre. Mens bildet lastes inn, vises det en spinner. I roten til dokumentlegemet vil en wrapper div bli lagt til, som vil inneholde linkene for navigering til neste og forrige, en kobling for å lukke galleriet og omslaget rundt bildet der bildet skal lastes. Dette er den minimale HTML-koden som skal brukes til galleriet.
Neste Forrige
Hvis du legger til følgende stil, stiler du de ovennevnte elementene som i bildet ovenfor (kommentarer er inkludert for å forklare deler som kanskje ikke er umiddelbart åpenbare):
#zoom z-index: 99990; / * høy indeks slik at den forblir på toppen av alle andre elementer * / posisjon: fast; / * er fast, så hvis innholdet rulles inn, forblir det på samme sted * / topp: 0; venstre: 0; bredde: 100%; høyde: 100%; / * skaper en gjennomsiktig bakgrunn, så innholdet under det vil være synlig, gjennomsiktighet kan justeres * / bakgrunn: rgba (0, 0, 0, 0.8); #zoom .content z-indeks: 99991; / * høyere indeks, slik at bildet forblir på toppen av overlegget * / posisjon: absolutt; / * Start startposisjonering: vil være sentrert horisontalt og vertikalt * / topp: 50%; venstre: 50%; bredde: 200px; høyde: 200px; margin: -100px 0 0 -100px; / * endeposisjonering * / / * En animert spinner som bakgrunn vil være synlig mens bildet lastes * / bakgrunn: #ffffff url ('... /img/spinner.gif') no-repeat 50% 50%; grense: 20px solid #ececec; polstring: 0; #zoom img display: block; maksimal bredde: ingen; bakgrunn: #ececec; -moz-boks-skygge: 2px 2px 5px rgba (0, 0, 0, 0.3); -webkit-boks-skygge: 2px 2px 5px rgba (0, 0, 0, 0.3); boksskygge: 2px 2px 5px rgba (0, 0, 0, 0.4); #zoom .close z-index: 99993; / * høyere indeks, slik at lukkingen forblir over overlegget og bildet * / posisjon: absolutt; topp: 0; høyre: 0; bredde: 49px; høyde: 49px; markør: pointer; bakgrunn: gjennomsiktig url ('... /img/icons/close.png') no-repeat 50% 50%; opasitet: 1; filter: alfa (opasitet = 100); #zoom .fore, #zoom .next z-index: 99992; / * høyere indeks, slik at lukkingen forblir over overlegget og bildet * / posisjon: absolutt; topp: 0; overløp: skjult; skjerm: blokk; bredde: 49px; høyde: 49px; tekstinnhold: 100%; #zoom .revlig høyre: 100px; bakgrunn: url ('... /img/icons/arrows.png') no-repeat 0 0; #zoom .next right: 50px; bakgrunn: url ('... /img/icons/arrows.png') no-repeat 100% 0; #zoom .close: svever bakgrunns-farge: # da4f49; / * legger til en rød hue på hover * / #zoom .fore: hover, #zoom .next: hover background-color: # 0088cc; / * legger til en blå fargetone på hover * / Resultatet av det ovennevnte:
HTML koden ovenfor vil ikke være nødvendig, den vil bli generert med JavaScript. Hendelser vil bli vedlagt for å åpne, navigere og lukke galleriet. Navigering og lukking av galleriet kan gjøres fra tastaturet eller ved hjelp av musen.
JavaScript nedenfor er også kommentert for å forklare hva som skjer:
(funksjon ($) $ .zoom = function () // legg til et galleriomslag til dokumentkroppen $ ('body'). append (''); var zoomedIn = false, // et flagg for å vite om galleriet er åpent eller ikke zoom = $ ('# zoom'), zoomContent = null, åpnet = null; // det opprettede bildeelementfunksjonsoppsettet () zoom.hide (); // gjem det // legge til de indre elementene, bildeomslaget, lukk og navigasjonskoblingen zoom.prepend (''); zoom.prepend (''); zoom.prepend ( 'Forrige'); zoom.prepend ( 'Neste'); zoomContent = $ ('# zoom .content'); // legge til hendelser til de ekstra elementene $ ('# zoom .close'). på ('klikk', lukk); $ ('# zoom. forrige'). på ('klikk', åpne forrige); $ ('# zoom .next'). på ('klikk', openNext); // observere tastaturhendelser for navigering og lukke galleriet $ (dokument) .keydown (funksjon (hendelse) hvis (åpnet) return; hvis (event.which == 27) $ ('# zoom .close' ) .click (); return; hvis (event.which == 37) $ ('# zoom. former'). klikk (); return; hvis (event.which == 39) $ ('# zoom .next '). klikk (); return; return;); hvis ($. 'galleri li a'). lengde == 1) // legg til 'zoom'-klassen for enkeltbilde så navigasjonslinkene vil skjule $ ('. gallery li a ') [0] .addClass zoom '); // vedlegg klikk hendelsesobservatør for å åpne bildet $ ('.zoom .gallery li a'). på ('klikk', åpent); funksjonen åpen (hendelse) event.preventDefault (); // hindre å åpne en tom side med bildet var lenke = $ (dette), src = link.attr ('href'), // lage et bildeobjekt med kilden fra linkbildet = $ (nytt bilde) .attr ('src', src) .hide (); hvis (! src) return; $ ('# zoom. prev, #zoom .next'). show (); hvis (link.hasClass ('zoom')) $ ('# zoom. prev, #zoom .next'). skjul (); // vis galleriet med lastespinn, navigering og lukk knapper hvis (! zoomedIn) zoomedIn = true; zoom.show (); // rydde opp og legg til bildeobjekt for å laste zoomContent.empty (). prepend (image); // hendelses observatør for bilde lasting, gjengivelse () vil bli // kalt mens bildet lastes image.load (render); åpnet = lenke; funksjonen åpenEnvendig (hendelse) event.preventDefault (); hvis (opened.hasClass ('zoom')) return; var prev = opened.parent ('li'). prev (); hvis (prev.length == 0) prev = $ ('. gallery li: last-child'); prev.children ('a'). trigger ('klikk'); funksjon openNext (event) event.preventDefault (); hvis (opened.hasClass ('zoom')) return; var neste = opened.parent ('li'). neste (); hvis (next.length == 0) next = $ ('. gallery li: first-child'); next.children ('a'). trigger ('klikk'); funksjon gjengivelse () // Hvis bildet ikke er fullt lastet, gjør ingenting hvis (! this.complete) return; var image = $ (dette); // hvis bildet har samme dimensjoner som galleriet // bare vis bildet ikke animere om (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) vis (image); komme tilbake; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // resize galleriet til bildedimensjonene før // viser bildet zoomContent.animate (width: image.width (), høyde: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (image);); funksjonsutstilling (bilde) image.fadeIn ('fast'); funksjonen lukk (hendelse) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); oppsett (); ; ) (JQuery); Etter å ha tatt med det ovennevnte pluginet, initialiser det ved å legge til plugin-samtalen i generate_thumbnail_list metode:
funksjon generate_thumbnail_list ($ post_id = null) // ... hvis (telle ($ bilder)> 0) // ... echo '';
Et virkelig eksempel på hvordan dette fungerer og hvordan det kan brukes: Zoom jQuery Photo Gallery Plugin demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()