Share
Wie ich bereits in meinem vorherigen Artikel versprochen habe, finden Sie hier ein Tutorial zum Erstellen einer Galerie aus Bildern in benutzerdefinierten Größen. Als Bonus erfahren Sie, wie Sie ein einfaches jQuery-Plugin erstellen, um das größere Bild des Miniaturbilds auf ansprechende Weise darzustellen.
Wenn Sie meinen vorherigen Artikel über benutzerdefinierte Bildgrößen nicht gelesen haben, lesen Sie ihn bitte, damit Sie dieses Tutorial leichter verstehen können.
Abhängig von dem Layout Ihres Themas und dem verwendeten Rastersystem können Sie unterschiedliche Bildgrößen für die Miniaturbilder festlegen. Bevor Sie sich entscheiden, überlegen Sie sich, wie viele Bilder Sie in einer Reihe haben möchten, wie groß die Breite des Containers ist, in der die Miniaturansichten angezeigt werden, Ränder, Füllungen usw.
Ich werde ein 940 Pixel breites 2-Spalten-Layout (8/4-Verhältnis) als Beispiel verwenden, bei dem der Inhalt 620 Pixel und die Seitenleiste 300 Pixel mit einem linken Rand von 20 Pixel beträgt. Der Inhaltsbereich und der Seitenleistenbereich haben eine innere Auffüllung von 20 Pixeln. Nun ein paar Worte: Der Inhalt ist 620px breit, der Abstand beträgt 20px, so dass 580px für Thumbnails übrig bleiben. und Anzeigen von 5 Miniaturbildern pro Zeile mit jeweils einem rechten Rand von 10 Pixeln, damit sie nicht zusammenkleben; Das fünfte Bild in jeder Zeile hat keinen rechten Rand. Thumbnails haben eine Breite und Höhe von 108px und werden beschnitten.
Das größere Bild ist maximal 660px breit und 660px hoch. Die Größe des Bildes wird proportional angepasst, ohne es zu beschneiden.
Sie können die für Ihr Layout geeignete Größe auswählen. Wenn Sie sich entscheiden, die Größe zu ändern, können Sie sie leicht regenerieren (siehe den vorherigen Beitrag zur Vorgehensweise), und sie müssen nicht quadratisch sein.
Bearbeiten Sie die Functions.php Datei so sieht es ungefähr so aus:
Accentsconagua
add_action ('after_setup_theme', 'setup'); function setup () //… add_theme_support ('post-thumbnails'); add_image_size ('preview', 108, 108, true); // thumbnail add_image_size ('zoomed', 660, 600); // groß //… Immer noch in Functions.php füge die Methode hinzu generate_thumbnail_list:
Funktion generate_thumbnail_list ($ post_id = null) if ($ post_id == null) return; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'attachment', 'post_mime_type' => 'image / jpeg, image / jpg, image / png, image / gif', 'post_parent') => $ post_id, 'orderby' => 'menu_order', 'order' => 'ASC', 'exclude' => get_post_thumbnail_id ($ post_id)))); if (count ($ images)> 0) echo 'Im content-single.php Ruf den generate_thumbnail_list Methode, die Post-ID als Parameter übergeben.
Bilder
Oben wird eine ungeordnete Liste ausgegeben, die Links zu den größeren Dateien und den Miniaturbildern enthält.
Natürlich müssen die Thumbnails gestaltet werden, ansonsten handelt es sich lediglich um eine einfache Liste von Bildern. Fügen Sie Ihrem vorhandenen Stylesheet Folgendes hinzu oder erstellen Sie ein neues und setzen Sie es in die Warteschlange:
.klar beide: beide; .gallery list-style-type: none; Polsterung: 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: Zeiger; Textdekoration: keine; .gallery img float: left; Grenze: 0;
Dadurch werden Bilder nebeneinander gestellt, und um sie herum bleibt etwas Platz.
Wenn Sie nun auf die Miniaturansicht klicken, wird das große Bild auf einer leeren Seite geöffnet. Dies ist ein guter Rückschlag für den Fall, dass JavaScript deaktiviert ist.
Bevor Sie JavaScript schreiben, ist es wünschenswert zu wissen, wie das große Bild angezeigt wird. Folgendes habe ich mir vorgenommen:
Hinweis: All dies wird vom jQuery-Plugin generiert. Dies soll nur den Schöpfungsprozess zeigen.
Eine transparente Überlagerung über dem gesamten Inhalt, wobei sich das Bild in der Mitte und die Steuerelemente in der oberen rechten Ecke befinden. Während das Bild geladen wird, wird ein Spinner angezeigt. Im Stammverzeichnis des Dokumentenkörpers wird ein Wrapper-Div hinzugefügt, der die Links für die Navigation zum nächsten und vorherigen, einen Link zum Schließen der Galerie und den Wrapper um das Bild, in das das Bild geladen wird, enthält. Dies ist der minimale HTML-Code, der für die Galerie verwendet wird.
Weiter zurück
Durch das Hinzufügen des folgenden Stils werden die obigen Elemente wie im Bild oben dargestellt (Kommentare enthalten Erläuterungen zu Teilen, die möglicherweise nicht unmittelbar offensichtlich sind):
#zoom z-index: 99990; / * hoher Index, damit er auf allen anderen Elementen bleibt * / Position: fest; / * ist fest, dh wenn der Inhalt gescrollt wird, bleibt er an der gleichen Stelle * / top: 0; links: 0; Breite: 100%; Höhe: 100%; / * erstellt einen transparenten Hintergrund, sodass der Inhalt darunter sichtbar ist, die Transparenz kann angepasst werden * / background: rgba (0, 0, 0, 0.8); #zoom .content z-index: 99991; / * höherer Index, damit das Bild oben auf dem Overlay bleibt * / position: absolute; / * Startpositionierung: wird horizontal und vertikal zentriert * / oben: 50%; links: 50%; Breite: 200px; Höhe: 200px; Marge: -100px 0 0 -100px; / * Endpositionierung * / / * Ein animierter Spinner als Hintergrund ist sichtbar, während das Bild geladen wird. * / background: #ffffff url ('… /img/spinner.gif') no-repeat 50% 50%; Rahmen: 20px solid #ececec; Polsterung: 0; #zoom img display: block; Max-Breite: keine; Hintergrund: #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-Schatten: 2px 2px 5px rgba (0, 0, 0, 0,4); #zoom .close z-index: 99993; / * höherer Index, sodass der Abschluss über der Überlagerung und dem Bild bleibt * / position: absolut; oben: 0; rechts: 0; Breite: 49px; Höhe: 49px; Cursor: Zeiger; Hintergrund: transparente URL ('… /img/icons/close.png') keine Wiederholung 50% 50%; Deckkraft: 1; Filter: Alpha (Deckkraft = 100); #zoom .previous, #zoom .next z-index: 99992; / * höherer Index, sodass der Abschluss über der Überlagerung und dem Bild bleibt * / position: absolut; oben: 0; Überlauf versteckt; Bildschirmsperre; Breite: 49px; Höhe: 49px; Text Gedankenstrich: 100%; #zoom .previous right: 100px; Hintergrund: URL ('… /img/icons/arrows.png') keine Wiederholung 0 0; #zoom .next right: 50px; Hintergrund: URL ('… /img/icons/arrows.png') keine Wiederholung 100% 0; #zoom .close: hover Hintergrundfarbe: # da4f49; / * fügt beim Schweben einen roten Farbton hinzu * / #zoom .previous: hover, #zoom .next: hover Hintergrundfarbe: # 0088cc; / * fügt beim Schweben einen blauen Farbton hinzu * / Das Ergebnis der oben genannten:
Der obige HTML-Code wird nicht benötigt, er wird mit JavaScript generiert. Es werden Ereignisse zum Öffnen, Navigieren und Schließen der Galerie hinzugefügt. Das Navigieren und Schließen der Galerie kann über die Tastatur oder mit der Maus erfolgen.
Das folgende JavaScript wird ebenfalls kommentiert, um zu erklären, was los ist:
(function ($) $ .zoom = function () // fügt einen Galerie-Wrapper an den Dokumentenkörper $ ('body'). an.'); var zoomedIn = false, // ein Flag, um zu erfahren, ob die Galerie geöffnet ist oder nicht zoom = $ ('# zoom'), zoomContent = null, geöffnet = null; // das geöffnete Bildelement function setup () zoom.hide (); // verstecken Sie es // fügen Sie die inneren Elemente, Image Wrapper, Schließen und Navigationslinks hinzu zoom.prepend (''); zoom.prepend (''); zoom.prepend ('Previous'); zoom.prepend ('Next'); zoomContent = $ ('# zoom .content'); // Ereignisse an die hinzugefügten Elemente anhängen $ ('# zoom .close'). on ('click', close); $ ('# zoom .previous'). on ('click', openPrevious); $ ('# zoom .next'). on ('click', openNext); // Tastaturereignisse zur Navigation und zum Schließen der Galerie beobachten $ (document) .keydown (Funktion (Ereignis) if (! geöffnet) return; if (event.which == 27) $ ('# zoom .close') ) .click (); return; if (event.which == 37) $ ('# zoom .previous'). click (); return; if (event.which == 39) $ ('# zoom .next '). click (); return; return;); if ($ ('. gallery li a'). length == 1) // füge die 'zoom'-Klasse für ein einzelnes Bild hinzu, sodass die Navigationslinks $ ('. gallery li a ') [0] .addClass (' ausblenden) Zoomen'); // Klick-Ereignisbeobachter anhängen, um das Bild $ zu öffnen ('. zoom, .gallery li a'). on ('click', open); function open (event) event.preventDefault (); // das Öffnen einer leeren Seite mit dem Image var link = $ (this), src = link.attr ('href') verhindern, // ein Image-Objekt mit der Quelle aus dem Link image = $ (new Image ()) erstellen .attr ('src', src) .hide (); if (! src) return; $ ('# zoom .previous, #zoom .next'). show (); if (link.hasClass ('zoom')) $ ('# zoom .previous, #zoom .next'). hide (); // Zeigt die Galerie mit dem Lade-Spinner, der Navigation und den Schließen-Schaltflächen an. if (! zoomedIn) zoomedIn = true; zoom.show (); // Bereinigen und Bildobjekt zum Laden hinzufügen zoomContent.empty (). prepend (image); // Ereignisbeobachter für das Laden von Bildern, // Render () wird aufgerufen, während das Bild geladen wird image.load (Rendern); geöffnet = Link; function openPrevious (event) event.preventDefault (); if (geöffnet. hasClass ('zoom')) return; var prev = closed.parent ('li'). prev (); if (prev.length == 0) prev = $ ('. gallery li: last-child'); prev.children ('a'). trigger ('click'); function openNext (event) event.preventDefault (); if (geöffnet. hasClass ('zoom')) return; var next = closed.parent ('li'). next (); if (next.length == 0) next = $ ('. gallery li: first-child'); next.children ('a'). trigger ('click'); function render () // Wenn das Bild nicht vollständig geladen ist, tun Sie nichts, wenn (! this.complete) return; var image = $ (this); // Wenn das Bild die gleichen Abmessungen wie die Galerie hat // Zeigen Sie das Bild einfach nicht animieren, wenn (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) show (Bild); Rückkehr; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // Verkleinern Sie die Galerie auf die Bildgröße, bevor Sie // das Bild anzeigen. zoomContent.animate (width: image.width (), height: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (image);); Funktion show (image) image.fadeIn ('fast'); function close (event) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); Konfiguration(); ; ) (jQuery); Nachdem Sie das obige Plugin hinzugefügt haben, initialisieren Sie es, indem Sie den Plugin-Aufruf in die generate_thumbnail_list Methode:
Funktion generate_thumbnail_list ($ post_id = null) //… if (Anzahl ($ images)> 0) //… echo '';
Ein Beispiel aus der Praxis, wie dies funktioniert und wie es verwendet werden kann: Zoom jQuery Photo Gallery Plugin-Demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()