Share
Zoals ik in mijn vorige artikel beloofde, is hier de tutorial over het maken van een galerij uit de afbeeldingen op maat. Als een bonus leert u hoe u een eenvoudige jQuery-plug-in maakt om de grotere afbeelding van de miniatuur op een aantrekkelijkere manier te presenteren.
Als je mijn vorige artikel over aangepaste beeldgroottes niet hebt gelezen, lees dit dan alsjeblieft zodat het gemakkelijker is om deze tutorial te begrijpen.
Afhankelijk van de lay-out van uw thema en welk rastersysteem het gebruikt, kunt u verschillende miniaturen kiezen voor verschillende beeldformaten. Voordat u besluit na te denken over hoeveel afbeeldingen u op een rij wilt hebben, wat is dan de breedte van de container waarin de miniaturen worden weergegeven, marges, opvullingen, enzovoort.
Ik zal een voorbeeld van een 940 pixel breed, 2 kolom layout (8/4 ratio) gebruiken, waarbij de inhoud 620 pixels zal zijn en de zijbalk 300 pixels met een linker marge van 20 pixels. Het inhoudsgebied en het zijbalkgebied hebben een binnenkussen van 20 pixels. Nu een beetje wiskunde: de inhoud is 620 px breed met padding van 20 px, waardoor er 580 pixels overblijven voor miniaturen; en het weergeven van 5 miniaturen per regel, elk met een rechtermarge van 10px, zodat ze niet aan elkaar plakken; 5e beeld in elke regel heeft geen rechtermarge; miniaturen zijn 108 px breed en hoog en bijgesneden.
De afbeelding met de grotere afmetingen is maximaal 660 px breed en 660 px hoog, ze worden proportioneel verkleind zonder bij te snijden.
U kunt zelf kiezen welke maten in uw lay-out passen, als u besluit om van formaat te veranderen, kunnen ze eenvoudig worden geregenereerd (zie vorige post over hoe u dit moet doen), en ze hoeven niet vierkant te zijn.
Bewerk de functions.php bestand, zodat het er ongeveer zo uitziet:
Accentsconagua
add_action ('after_setup_theme', 'setup'); functie-instelling () // ... add_theme_support ('post-thumbnails'); add_image_size ('preview', 108, 108, true); // thumbnail add_image_size ('ingezoomd', 660, 600); // large // ... Nog steeds binnen functions.php voeg de methode toe generate_thumbnail_list:
functie generate_thumbnail_list ($ post_id = null) if ($ post_id == null) retour; $ images = get_posts (array ('nummerposts' => -1, 'post_type' => 'bijlage', 'post_mime_type' => 'afbeelding / jpeg, afbeelding / jpg, afbeelding / png, afbeelding / gif', 'post_parent' => $ post_id, 'orderby' => 'menu_order', 'order' => 'ASC', 'exclude' => get_post_thumbnail_id ($ post_id))); if (tel ($ afbeeldingen)> 0) echo 'In inhoud single.php bel de generate_thumbnail_list methode, waarbij de bericht-ID als een parameter wordt doorgegeven.
Afbeeldingen
Het bovenstaande zal een ongeordende lijst uitvoeren, met koppelingen naar de grotere bestanden en de miniatuurafbeeldingen.
Het is duidelijk dat de miniaturen moeten worden gestileerd, anders is het gewoon een gewone lijst met afbeeldingen. Voeg het volgende toe aan uw bestaande stylesheet of maak een nieuw en sla het in:
.duidelijk duidelijk: beide; .gallery list-style-type: none; opvulling: 0; marge: 0; .gallery li float: left; marge: 0 10px 10px 0; .gallery li: nth-child (5n) margin-right: 0; .gallery a float: left; cursor: pointer; tekstdecoratie: geen; .gallery img float: left; rand: 0;
Hierdoor worden afbeeldingen naast elkaar geplaatst en blijft er wat ruimte om hen heen over.
Als u nu op de miniatuur klikt, wordt de grote afbeelding op een lege pagina geopend. Dit is een goede terugval indien JavaScript is uitgeschakeld.
Voordat u een JavaScript schrijft, is het wenselijk om te weten hoe de grote afbeelding wordt weergegeven. Dit is wat ik in gedachten had:
Opmerking: dit alles wordt gegenereerd met de plug-in jQuery. Dit is slechts om het creatieproces te tonen.
Een transparante overlay bovenop alle inhoud, met de afbeelding in het midden en de knoppen in de rechterbovenhoek. Terwijl de afbeelding wordt geladen, wordt er een spinner weergegeven. In de hoofdmap van de hoofdtekst van het document zal een wrapper div worden toegevoegd, die de links zal bevatten voor navigatie naar de volgende en vorige, een link om de galerij te sluiten, en de wrapper rond de afbeelding waar de afbeelding zal worden geladen. Dit is de minimale HTML-code die voor de galerij wordt gebruikt.
Volgende vorige
Als je de volgende stijl toevoegt, style je de bovenstaande elementen zoals in de bovenstaande afbeelding (opmerkingen zijn opgenomen om delen te verklaren die misschien niet meteen duidelijk zijn):
#zoom z-index: 99990; / * hoge index, zodat deze bovenop alle andere elementen blijft staan * / positie: vast; / * staat vast, dus als inhoud wordt gescrold blijft dit op dezelfde plaats * / top: 0; links: 0; breedte: 100%; hoogte: 100%; / * maakt een transparante achtergrond, zodat de onderliggende inhoud zichtbaar is, transparantie kan worden aangepast * / background: rgba (0, 0, 0, 0.8); #zoom .content z-index: 99991; / * hogere index zodat de afbeelding bovenop de overlay blijft * / positie: absoluut; / * start initiële positionering: wordt horizontaal en verticaal gecentreerd * / top: 50%; links: 50%; breedte: 200 px; hoogte: 200 px; marge: -100 px 0 0 -100 px; / * eindpositie * / / * een geanimeerde spinner als achtergrond zal zichtbaar zijn tijdens het laden van de afbeelding * / achtergrond: #ffffff url ('... /img/spinner.gif') geen herhaling 50% 50%; border: 20px solid #ececec; opvulling: 0; #zoom img weergave: blok; max. breedte: geen; achtergrond: #ececec; -moz-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0,3); -webkit-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0,3); box-shadow: 2px 2px 5px rgba (0, 0, 0, 0,4); #zoom .close z-index: 99993; / * hogere index zodat het sluiten boven de overlay en afbeelding * / positie blijft: absoluut; boven: 0; rechts: 0; breedte: 49 px; hoogte: 49 px; cursor: pointer; achtergrond: transparante URL ('... /img/icons/close.png') geen herhaling 50% 50%; dekking: 1; filter: alpha (opacity = 100); #zoom .evervious, #zoom .volgende z-index: 99992; / * hogere index zodat het sluiten boven de overlay en afbeelding * / positie blijft: absoluut; boven: 0; overloop verborgen; weergave: blok; breedte: 49 px; hoogte: 49 px; tekst-inspringing: 100%; #zoom .evorige right: 100px; achtergrond: url ('... /img/icons/arrows.png') no-repeat 0 0; #zoom .next right: 50px; achtergrond: url ('... /img/icons/arrows.png') geen herhaling 100% 0; #zoom .close: hover background-color: # da4f49; / * voegt een rode tint toe bij zweven * / #zoom. vroeger: hover, #zoom .next: hover background-colour: # 0088cc; / * voegt een blauwe tint toe bij zweven * / De uitkomst van het bovenstaande:
De bovenstaande HTML-code is niet nodig, deze wordt gegenereerd met JavaScript. Er worden evenementen bijgevoegd voor het openen, navigeren en sluiten van de galerij. Navigeren en sluiten van de galerij kan worden gedaan vanaf het toetsenbord of met behulp van de muis.
Het onderstaande JavaScript wordt ook becommentarieerd om uit te leggen wat er aan de hand is:
(functie ($) $ .zoom = function () // een galerijwrapper toevoegen aan de body van het document $ ('body'). append (''); var zoomedIn = false, // een vlag om te weten of de galerij open is of niet zoom = $ ('# zoom'), zoomContent = null, opened = null; // de instelling van de geopende afbeeldingselementfunctie () zoom.hide (); // verberg het // voeg de binnenste elementen, de afbeeldingsomslag toe, sluit en navigatielinks zoom.prepend (''); zoom.prepend (''); zoom.prepend ( 'Vorige'); zoom.prepend ( 'Next'); zoomContent = $ ('# zoom .content'); // gebeurtenissen koppelen aan de toegevoegde elementen $ ('# zoom .close'). on ('klik', sluiten); $ ('# zoom .previous'). on ('klik', openVorige); $ ('# zoom .next'). on ('klik', openNext); // observeer toetsenbordgebeurtenissen voor navigatie en het sluiten van de galerij $ (document) .keydown (function (event) if (! opened) return; if (event.which == 27) $ ('# zoom .close' ) .klik (); return; if (event.which == 37) $ ('# zoom.previous'). klik op (); return; if (event.which == 39) $ ('# zoom .next '). klik (); return; return;); if ($ ('. gallery li a'). length == 1) // voeg 'zoom' klasse toe voor één afbeelding zodat de navigatielinks $ ('. gallery li a') [0] .addClass ('verbergen zoom'); // attach evenementwaarnemer koppelen om de afbeelding $ ('. zoom, .gallery li a'). on ('klik', open) te openen; function open (event) event.preventDefault (); // voorkomen dat een lege pagina met de afbeelding wordt geopend var link = $ (this), src = link.attr ('href'), // maak een afbeelding object met de bron uit de link afbeelding = $ (nieuwe afbeelding ()) .attr ('src', src) .hide (); if (! src) terug; $ ('# zoom.previous, #zoom .next'). show (); if (link.hasClass ('zoom')) $ ('# zoom.evervious, #zoom .next'). hide (); // toon de galerij met loading spinner, navigatie en sluit knoppen als (! zoomedIn) zoomedIn = true; zoom.show (); // opruimen en afbeeldingsobject toevoegen voor het laden van zoomContent.empty (). prepend (afbeelding); // event observer voor het laden van afbeeldingen, render () wordt // called terwijl image image.load (render) laadt; geopend = link; function openPrevious (event) event.preventDefault (); if (opened.hasClass ('zoom')) return; var prev = opened.parent ('li'). vorige (); if (prev.length == 0) prev = $ ('. gallery li: last-child'); prev.children ('a'). trigger ('klik'); function openNext (event) event.preventDefault (); if (opened.hasClass ('zoom')) return; var next = opened.parent ('li'). next (); if (next.length == 0) next = $ ('. gallery li: first-child'); next.children ('a'). trigger ('klik'); function render () // als de afbeelding niet volledig is geladen, doe niets als (! this.complete) return; var image = $ (this); // als afbeelding dezelfde afmetingen heeft als de galerij // laat de afbeelding niet animeren als (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) vertonen (afbeelding); terug te keren; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // wijzig de grootte van de afbeeldingen in de afbeelding vóór // de afbeelding weergeven zoomContent.animate (width: image.width (), height: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (image);); functie show (afbeelding) image.fadeIn ('snel'); functie close (event) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); opstelling(); ; ) (JQuery); Nadat u de bovenstaande plug-in hebt toegevoegd, initialiseert u deze door de plugin-oproep toe te voegen aan de generate_thumbnail_list methode:
function generate_thumbnail_list ($ post_id = null) // ... if (tel ($ afbeeldingen)> 0) // ... echo '';
Een echt voorbeeld van hoe dit werkt en hoe het kan worden gebruikt: Zoom jQuery Photo Gallery Plugin demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()