Share
Som jag lovade i min tidigare artikel, här är handledningen om att skapa ett galleri utifrån de anpassade bilderna. Som en bonus får du lära dig hur du skapar ett grundläggande jQuery-plugin för att presentera miniatyrbildens större bild på ett mer tilltalande sätt.
Om du inte läste min tidigare artikel om anpassade bildstorlekar, läs den så att det blir lättare att förstå den här handledningen.
Beroende på tematets layout och vilket gallersystem som används, kan du bestämma olika bildstorlekar för miniatyrbilder. Innan du bestämmer dig för hur många bilder du vill ha i rad, hur stor är behållarens bredd där miniatyrerna kommer att visas, marginaler, paddningar etc.
Jag kommer att använda en 940 pixel bred, 2 kolumnlayout (8/4 ratio) som ett exempel där innehållet kommer att vara 620 pixlar och sidobar 300 pixlar med en vänster marginal på 20 pixlar. Innehållsområdet och sidofältet kommer att ha en inre polstring på 20 pixlar. Nu är lite matte: innehållet är 620px bred med vaddering på 20px, vilket ger 580px för miniatyrbilder; och visar 5 miniatyrbilder per rad, som alla har en högra margin på 10px så att de inte fastnar ihop; 5: e bilden i varje rad har inte rätt margin miniatyrer kommer att vara 108px i bredd och höjd och beskäras.
Den större bilden kommer att vara maximalt 660px bred och 660px lång, de kommer att ändras proportionellt utan beskärning.
Du kan välja vilka storlekar som passar din layout, om du bestämmer dig för att ändra storlekar som de lätt kan regenereras (se tidigare inlägg om hur man gör det), och de behöver inte vara fyrkantiga.
Redigera functions.php filen så det ser ut så här:
Accentsconagua
add_action ('after_setup_theme', 'setup'); funktion setup () // ... add_theme_support ('post-miniatyrer'); add_image_size ('förhandsgranskning', 108, 108, sant); // thumbnail add_image_size ('zoomed', 660, 600); // stor // ... Fortfarande inne functions.php lägg till metoden generate_thumbnail_list:
funktion generate_thumbnail_list ($ post_id = null) om ($ post_id == null) returnera; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'attachment', 'post_mime_type' => 'bild / jpeg, bild / jpg, bild / png, bild / gif', 'post_parent' => $ post_id, 'orderby' => 'menu_order', 'order' => 'ASC', 'exclude' => get_post_thumbnail_id ($ post_id))); om (räkna ($ bilder)> 0) echo 'I innehålls single.php ring generate_thumbnail_list metod, som skickar post-ID som en parameter.
Bilder
Ovanstående kommer att mata ut en oorderad lista, som innehåller länkar till de större filerna och miniatyrbilderna.
Självklart behöver miniatyrerna stylas, annars är det bara en vanlig lista med bilder. Lägg till följande i ditt befintliga stilark eller skapa en ny och bekräfta det:
.klara clear: both; .gallery list-style-type: none; vaddering: 0; marginal: 0; .gallery li float: left; marginal: 0 10px 10px 0; .gallery li: nth-child (5n) margin-right: 0; .gallery a float: left; markör: pekare; text-dekoration: ingen; .gallery img float: left; gräns: 0;
Detta kommer att sätta bilder bredvid varandra, vilket ger utrymme runt dem.
När du klickar på miniatyrbilden öppnas den stora bilden på en tom sida. Detta är en bra återgång om JavaScript är inaktiverat.
Innan du skriver något JavaScript skulle det vara önskvärt att veta hur den stora bilden kommer att visas. Här är vad jag hade i åtanke:
Obs! Allt detta kommer att genereras från jQuery-plugin. Detta är bara för att visa skapandet av processen.
Ett transparent överlag ovanpå allt innehåll, med bilden i mitten och kontrollerna längst upp till höger. Medan bilden laddas kommer det att finnas en spinnare som visar. I dokumentkroppens rot läggs en wrapper div som kommer att innehålla länkarna för navigering till nästa och föregående, en länk för att stänga galleriet och omslaget runt bilden där bilden ska laddas. Detta är den minimala HTML-koden som ska användas för galleriet.
Nästa Föregående
Läggande av följande stil kommer att ställa in ovanstående element som i bilden ovan (kommentarer ingår för att förklara delar som inte kan vara omedelbart uppenbara):
#zoom z-index: 99990; / * högt index så att det förblir ovanpå alla andra element * / position: fast; / * är fast så om innehållet rullas hålls det på samma ställe * / topp: 0; vänster: 0; bredd: 100%; höjd: 100%; / * skapar en transparent bakgrund, så innehållet under det kommer att vara synligt, insyn kan anpassas * / bakgrund: rgba (0, 0, 0, 0,8); #zoom .content z-index: 99991; / * högre index så att bilden kommer att ligga ovanpå överlagret * / position: absolut; / * Börja inledande positionering: centreras horisontellt och vertikalt * / topp: 50%; vänster: 50%; bredd: 200px; höjd: 200px; marginal: -100px 0 0 -100px; / * slutpositionering * / / * En animerad spinnare som bakgrund kommer att vara synlig medan bilden laddas * / bakgrund: #ffffff url ('... /img/spinner.gif') no-repeat 50% 50%; gräns: 20px solid #ececec; vaddering: 0; #zoom img display: block; max bredd: ingen; bakgrund: #ececec; -moz-box-skugga: 2px 2px 5px rgba (0, 0, 0, 0.3); -webkit-box-skugga: 2px 2px 5px rgba (0, 0, 0, 0.3); boxskugga: 2px 2px 5px rgba (0, 0, 0, 0.4); #zoom .close z-index: 99993; / * högre index så att stängningen kommer att ligga över överlagret och bild * / position: absolut; topp: 0; höger: 0; bredd: 49px; höjd: 49px; markör: pekare; bakgrund: transparent url ('... /img/icons/close.png') no-repeat 50% 50%; opacitet: 1; filter: alfa (opacitet = 100); #zoom .revlig, #zoom .next z-index: 99992; / * högre index så att stängningen kommer att ligga över överlagret och bild * / position: absolut; topp: 0; överflöde: gömd; display: block; bredd: 49px; höjd: 49px; textindelning: 100%; #zoom .revlig höger: 100px; bakgrund: url ('... /img/icons/arrows.png') no-repeat 0 0; #zoom .next right: 50px; bakgrund: url ('... /img/icons/arrows.png') no-repeat 100% 0; #zoom .close: sväva bakgrundsfärg: # da4f49; / * lägger till en röd nyans på sväva * / #zoom .revlig: sväva, #zoom .next: sväva bakgrundsfärg: # 0088cc; / * lägger till en blå nyans på svävaren * / Resultatet av ovanstående:
HTML-koden ovan kommer inte behövas, den kommer att genereras med JavaScript. Händelser kommer att bifogas för att öppna, navigera och stänga galleriet. Navigering och stängning av galleriet kan göras från tangentbordet eller med musen.
JavaScript nedan kommer också att kommenteras för att förklara vad som händer:
(funktion ($) $ .zoom = function () // lägg till ett galleriomslag till dokumentkroppen $ ('body'). append (''); var zoomedIn = false, // en flagga om galleriet är öppet eller inte zoom = $ ('# zoom'), zoomContent = null, öppnat = null; // den öppna bildelementfunktionsinställningen () zoom.hide (); // göm det // lägg till de inre elementen, bildomslaget, stäng och navigationslänkar zoom.prepend (''); zoom.prepend (''); zoom.prepend ( 'Föregående'); zoom.prepend ( 'Nästa'); zoomContent = $ ('# zoom .content'); // bifoga händelser till de tillagda elementen $ ('# zoom .close'). på ('klicka', stäng); $ ('# zoom. former'). på ('klicka', öppna tidigare); $ ('# zoom .next'). på ('klicka', öppetNext); // observera tangentbordshändelser för navigering och stänga galleriet $ (dokument) .keydown (funktion (händelse) om (! öppnat) return; om (event.which == 27) $ ('# zoom .close' ) .click (); return; om (event.which == 37) $ ('# zoom. zoom .next '). klicka (); returnera; returnera;); om $ ('. galleri li a'). längd == 1) // lägg till 'zoom'-klassen för enstaka bild så att navigeringslänkarna gömmer $ ('. gallery li a ') [0] .addClass zoom'); // bifoga klickhändelseobservatör för att öppna bilden $ ('.zoom .gallery li a'). (Klicka på, öppna); funktionen öppen (händelse) event.preventDefault (); // förhindra att en blank sida öppnas med bildvarelänket = $ (detta), src = link.attr ('href'), // skapa ett bildobjekt med källan från länken image = $ (ny bild ()) .attr ('src', src) .hide (); om (! src) return; $ ('# zoom .previous, #zoom .next'). visa (); om (link.hasClass ('zoom')) $ ('# zoom .previous, #zoom .next'). hide (); // visa galleriet med att ladda spinn, navigering och stänga knappar om (! zoomedIn) zoomedIn = true; zoom.show (); // Rensa upp och lägg till bildobjekt för att ladda zoomContent.empty (). prepend (bild); // händelseobservatör för bildbelastning, render () kommer att kallas // medan bilden laddas image.load (render); öppnas = länk; funktionen öppenFörutsänd (händelse) event.preventDefault (); om (opened.hasClass ('zoom')) return; var prev = opened.parent ('li'). prev (); om (prev.length == 0) prev = $ ('gallery li: last-child'); prev.children ('a'). trigger ('klick'); funktionen openNext (händelse) event.preventDefault (); om (opened.hasClass ('zoom')) return; var next = opened.parent ('li'). nästa (); om (next.length == 0) next = $ ('. galleri li: första barnet'); next.children ('a'). trigger ('klick'); funktionen render () // om bilden inte är fullt laddad gör ingenting om (! this.complete) return; var bild = $ (detta); // om bilden har samma dimensioner som galleriet // visa bara att bilden inte animerar om (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) visa (bild); lämna tillbaka; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // ändra storlek på galleriet till bilddimensionerna innan // visar bild zoomContent.animate (width: image.width (), höjd: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (bild);); funktionsvisning (bild) image.fadeIn ('fast'); funktionen stäng (händelse) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); inrätta(); ; ) (JQuery); Efter att ha inkluderat det ovanstående pluginet, initiera det genom att lägga till plugin-samtalet i generate_thumbnail_list metod:
funktion generate_thumbnail_list ($ post_id = null) // ... om (räkna ($ bilder)> 0) // ... echo '';
Ett verkligt exempel på hur det fungerar och hur det kan användas: Zoom jQuery Photo Gallery Plugin demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()