Share
Comme je vous l'avais promis dans mon article précédent, voici le didacticiel sur la création d'une galerie à partir d'images de taille personnalisée. En prime, vous apprendrez à créer un plugin jQuery de base pour présenter l'image de la vignette en plus grand format de manière plus attrayante..
Si vous n'avez pas lu mon article précédent sur la taille des images personnalisées, veuillez le lire afin de faciliter la compréhension de ce didacticiel..
En fonction de la disposition de votre thème et du système de grille utilisé, vous pouvez choisir différentes tailles d'image pour les vignettes. Avant de décider du nombre d’images que vous souhaitez avoir dans une rangée, de la largeur du conteneur dans lequel les vignettes seront affichées, des marges, des marges, etc..
Je vais utiliser une disposition de 2 colonnes de 940 pixels de large (format 8/4), où le contenu sera de 620 pixels et la barre latérale de 300 pixels avec une marge gauche de 20 pixels. La zone de contenu et la zone de la barre latérale auront un remplissage interne de 20 pixels. Maintenant, un peu de maths: le contenu est large de 620px avec un rembourrage de 20px, laissant 580px pour les vignettes; et afficher 5 miniatures par ligne, chacune ayant une marge droite de 10 px afin qu’elles ne soient pas collées ensemble; La 5ème image de chaque ligne n'aura pas de marge droite; les vignettes auront une largeur et une hauteur de 108 px et seront coupées.
L’image la plus grande aura une largeur maximale de 660 pixels et une hauteur de 660 pixels; elles seront redimensionnées proportionnellement sans recadrage..
Vous pouvez choisir les tailles qui conviennent à votre mise en page. Si vous décidez de modifier les tailles, elles peuvent être facilement régénérées (voir le post précédent pour savoir comment le faire) et elles ne doivent pas nécessairement être de forme carrée..
Modifier le functions.php le fichier ainsi il ressemble à quelque chose comme ceci:
Accentsconagua
add_action ('after_setup_theme', 'setup'); function setup () //… add_theme_support ('post-vignettes'); add_image_size ('preview', 108, 108, true); // miniature add_image_size ('zoomé', 660, 600); // grand //… Toujours dedans functions.php ajouter la méthode generate_thumbnail_list:
function generate_thumbnail_list ($ post_id = null) if ($ post_id == null) return; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'pièce jointe', '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 'Dans content-single.php appeler le generate_thumbnail_list méthode, en passant l'ID de poste en tant que paramètre.
Images
Ce qui précède produira une liste non ordonnée contenant des liens vers les fichiers plus volumineux et les images miniatures..
Il est évident que les vignettes doivent être stylées, sinon il ne s'agit que d'une simple liste d'images. Ajoutez les éléments suivants à votre feuille de style existante ou créez-en une nouvelle et mettez-la en file d'attente:
.clear clear: les deux; .gallery list-style-type: none; rembourrage: 0; marge: 0; .gallery li float: left; marge: 0 10px 10px 0; .gallery li: nième enfant (5n) marge-droite: 0; .gallery a float: left; curseur: pointeur; texte-décoration: aucun; .gallery img float: left; bordure: 0;
Cela mettra les images les unes à côté des autres en laissant de l'espace autour d'eux..
À ce stade, un clic sur la vignette ouvrira la grande image sur une page vierge. C'est une bonne solution de rechange si le JavaScript est désactivé.
Avant d'écrire un code JavaScript, il serait souhaitable de savoir comment la grande image sera affichée. Voici ce que j'avais en tête:
Remarque: tout cela sera généré à partir du plugin jQuery. Ceci est juste pour montrer le processus de création.
Un calque transparent au-dessus de tout le contenu, avec l'image au milieu et les commandes dans le coin supérieur droit. Pendant le chargement de l’image, un film apparaît. Un div de wrapper sera ajouté à la racine du corps du document. Il contiendra les liens permettant de naviguer vers le suivant et le précédent, un lien permettant de fermer la galerie et le wrapper autour de l'image où l'image sera chargée. C'est le code HTML minimal qui sera utilisé pour la galerie..
Suivant précédent
L'ajout du style suivant stylisera les éléments ci-dessus comme dans l'image ci-dessus (des commentaires sont inclus pour expliquer les parties qui peuvent ne pas être immédiatement évidentes):
#zoom z-index: 99990; / * indice élevé pour qu'il reste au-dessus de tous les autres éléments * / position: fixed; / * est corrigé si le contenu défile, il reste au même endroit * / top: 0; gauche: 0; largeur: 100%; hauteur: 100%; / * crée un fond transparent, ainsi le contenu sera visible, la transparence pourra être ajustée * / background: rgba (0, 0, 0, 0.8); #zoom .content z-index: 99991; / * indice plus élevé pour que l'image reste au-dessus de la superposition * / position: absolute; / * début du positionnement initial: sera centré horizontalement et verticalement * / haut: 50%; à gauche: 50%; largeur: 200px; hauteur: 200px; marge: -100px 0 0 -100px; / * position finale * / / * une image animée en arrière-plan sera visible pendant le chargement de l'image * / background: #ffffff url ('… /img/spinner.gif') no-repeat 50% 50%; bordure: 20px solide #ececec; rembourrage: 0; #zoom img display: block; largeur maximale: aucune; arrière-plan: #ecec; -moz-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0,3); -webkit-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0,3); boîte-ombre: 2px 2px 5px rgba (0, 0, 0, 0,4); #zoom .close z-index: 99993; / * indice plus élevé pour que la fermeture reste au-dessus de la superposition et de l'image * / position: absolute; en haut: 0; à droite: 0; largeur: 49px; hauteur: 49px; curseur: pointeur; fond: url transparente ('… /img/icons/close.png') non répétée 50% 50%; opacité: 1; filtre: alpha (opacité = 100); #zoom .previous, #zoom .next z-index: 99992; / * indice plus élevé pour que la fermeture reste au-dessus de la superposition et de l'image * / position: absolute; en haut: 0; débordement caché; bloc de visualisation; largeur: 49px; hauteur: 49px; retrait du texte: 100%; #zoom .previous right: 100px; fond: url ('… /img/icons/arrows.png') no-repeat 0 0; #zoom .next right: 50px; fond: url ('… /img/icons/arrows.png') no-repeat 100% 0; #zoom .close: hover background-color: # da4f49; / * ajoute une teinte rouge au survol * / #zoom .previous: survol, #zoom .next: hover background-color: # 0088cc; / * ajoute une teinte bleue en survol * / Le résultat de ce qui précède:
Le code HTML ci-dessus ne sera pas nécessaire, il sera généré avec JavaScript. Des événements seront organisés pour l'ouverture, la navigation et la fermeture de la galerie. La navigation et la fermeture de la galerie peuvent être effectuées à partir du clavier ou à l'aide de la souris.
Le JavaScript ci-dessous est également commenté pour expliquer ce qui se passe:
(function ($) $ .zoom = function () // ajoute un wrapper de galerie au corps du document $ ('body'). append (''); var zoomedIn = false, // un drapeau pour savoir si la galerie est ouverte ou non zoom = $ ('# zoom'), zoomContent = null, open = null; // la fonction d'élément d'image ouverte setup () zoom.hide (); // le cache // ajoute les éléments internes, le wrapper, les liens de fermeture et de navigation zoom.prepend (''); zoom.prepend (''); zoom.prepend ('Précédent'); zoom.prepend ('Suivant'); zoomContent = $ ('# zoom .content'); // attache des événements aux éléments ajoutés $ ('# zoom .close'). on ('click', close); $ ('# zoom .previous'). on ('click', openPrevious); $ ('# zoom .next'). on ('click', openNext); // observe les événements de clavier pour la navigation et la fermeture de la galerie $ (document) .keydown (function (event) if (! open) return; if (event.which == 27) $ ('# zoom .close' ) .click (); return; if (event.which == 37) $ ('# zoom .previous'). click (); return; if (event.which == 39) $ ('# zoom.suivant '). click (); return; return;); if ($ ('. gallery li a'). length == 1) // ajoute la classe 'zoom' pour une seule image afin que les liens de navigation masquent $ ('. gallery li a') [0] .addClass (' Zoom'); // attache un observateur d'événements de clic pour ouvrir l'image $ ('. zoom, .gallery li a'). on ('clic', ouvrir); function open (event) event.preventDefault (); // empêche d'ouvrir une page vierge avec l'image var link = $ (this), src = link.attr ('href'), // crée un objet image avec la source du lien image = $ (new Image ()) .attr ('src', src) .hide (); si (! src) return; $ ('# zoom .previous, #zoom .next'). show (); if (link.hasClass ('zoom')) $ ('# zoom .previous, #zoom .next'). hide (); // affiche la galerie avec les boutons de chargement de spinner, de navigation et de fermeture if (! zoomedIn) zoomedIn = true; zoom.show (); // nettoie et ajoute un objet image pour le chargement de zoomContent.empty (). prepend (image); // Observateur d'événements pour le chargement de l'image, render () sera // appelé pendant le chargement de l'image image.load (render); ouvert = lien; function openPrevious (event) event.preventDefault (); if (open.hasClass ('zoom')) return; var prev = open.parent ('li'). prev (); if (prev.length == 0) prev = $ ('. gallery li: last-child'); prev.children ('a'). trigger ('click'); function openNext (event) event.preventDefault (); if (open.hasClass ('zoom')) return; var next = open.parent ('li'). next (); if (next.length == 0) next = $ ('. gallery li: premier-enfant'); next.children ('a'). trigger ('click'); function render () // si l'image n'est pas complètement chargée, ne faites rien si (! this.complete) return; var image = $ (this); // si l'image a les mêmes dimensions que la galerie // ne montre que l'image ne s'anime pas si (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) show (image); revenir; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // redimensionne la galerie aux dimensions de l'image avant // affichage de l'image zoomContent.animate (width: image.width (), height: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (image);); fonction show (image) image.fadeIn ('fast'); function close (event) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); installer(); ; ) (jQuery); Après avoir inclus le plugin ci-dessus, initialisez-le en ajoutant l'appel du plugin dans le dossier generate_thumbnail_list méthode:
function generate_thumbnail_list ($ post_id = null) //… if (nombre ($ images)> 0) //… echo '';
Un exemple concret de son fonctionnement et de son utilisation: démonstration du plugin Zoom jQuery Photo Gallery
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()