Share
Aujourd'hui, vous allez transformer votre portefeuille simple en quelque chose d'extraordinaire avec la magie de Quicksand de Razorjack.
Vous avez toujours voulu utiliser le plugin jQuery Quicksand? Avez-vous déjà essayé de l'implémenter avec WordPress? Mais avez-vous trouvé cauchemardesque de faire les deux? Eh bien, je vais passer par un guide simple, étape par étape, pour passer d’un thème WordPress vierge à un magnifique portfolio personnalisé avec l’utilisation de Quicksand. Je vais utiliser un thème personnalisé qui a été réduit aux fins de ce tutoriel avec WordPress 3.0+.
Alors ouvrez votre éditeur de texte préféré et commençons!
Avec WordPress, nous sommes en mesure de créer des types de publication personnalisés permettant de gérer l’ensemble de notre contenu. Nous allons créer un type de publication personnalisé pour stocker tous les éléments de notre portefeuille dans une section d'administration dédiée..
Pour faciliter la gestion du code, commençons par créer un dossier appelé portefeuille et un fichier PHP appelé portfolio-post-types.php (ou tout ce que vous trouvez convenable).
Une fois que vous avez créé un fichier, ajoutons du code…
Commençons par créer une fonction:
Maintenant que nous avons créé notre fonction vierge, ajoutons du code pour que cette fonction fasse quelque chose de spécial. Tout d’abord, créez les étiquettes pour notre type de publication personnalisé. Insérez le code suivant dans notre Type de poste une fonction:
$ labels = array ('name' => __ ('Portfolio'), 'singular_name' => __ ('Portfolio'), 'rewrite' => array ('slug' => __ ('portfolio')), ' add_new '=> _x (' Ajouter un élément ',' portfolio '),' edit_item '=> __ (' Modifier un élément de portefeuille '),' new_item '=> __ (' Un nouvel élément de portefeuille '),' view_item '=> __ ('Afficher le portefeuille'), 'search_items' => __ ('Rechercher un portefeuille'), 'not_found' => __ ('Aucun élément du portefeuille trouvé'), 'not_found_in_trash' => __ ('Aucun élément du portefeuille trouvé dans la corbeille' ), 'parent_item_colon' => ");Une ventilation du code que nous venons d'écrire:
La variable 'labels' est un tableau de chaînes qui représente votre type de publication. Chacune des chaînes est du texte qui est généré pour la fonction particulière..
Accentsconagua
prénom - La forme plurielle du nom de votre type de message.singular_name - La forme singulière du nom de votre type de message.récrire - Réécrire les permaliens avec ce format. add_new - L'élément de menu pour ajouter un nouveau message.modifier l'article - L'en-tête affiché lors de l'édition d'un article.nouvel article - Montré dans le menu des favoris dans l'en-tête de l'administrateur.Regarder l'objet - Montré à côté du permalien sur l'écran d'édition.éléments_recherche - Texte du bouton pour la zone de recherche sur l'écran d'édition des articles.pas trouvé - Texte à afficher lorsqu'aucune publication n'est trouvée lors d'une recherche dans l'administrateur.not_found_in_trash - Texte à afficher lorsqu'il n'y a pas de messages dans la corbeille.parent_item_colon - Utilisé comme étiquette pour un article parent sur l'écran d'édition des articles. Utile uniquement pour les types d'articles hiérarchiques.Ensuite, créez les arguments pour notre type de publication personnalisé. Insérez le code suivant dans notre Type de poste une fonction:
$ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'type_fonction '=>' post ',' hierarchical '=> false,' menu_position '=> null,' supports '=> array (' title ',' editor ',' thumbnail ')); Étiquettes - Un tableau d'étiquettes pour ce type de message.Publique - Méta-argument utilisé pour définir les valeurs par défaut pour public_queriable, show_ui, show_in_nav_menus et exclude_from_search.publiquement interrogeable - Si les requêtes de type post peuvent être effectuées à partir du front-end.show_ui - S'il faut générer une interface utilisateur par défaut pour gérer ce type de publication.query_var - False pour empêcher les requêtes ou valeur de chaîne de la requête var à utiliser pour ce type de publication.récrire - Réécrire les permaliens avec ce format.type de capacité - La chaîne à utiliser pour créer les capacités de lecture, d'édition et de suppression.hiérarchique - Si le type de publication est hiérarchique. Permet au parent d'être spécifié.menu_position - La position dans l'ordre du menu dans lequel le type de publication doit apparaître dans l'admin.les soutiens - Un alias pour appeler add_post_type_support () directement.En savoir plus sur add_post_type_support dans le Codex WordPress
Maintenant que notre type de message est configuré avec les paramètres, nous devons enregistrer le type de message. Nous enregistrons notre type de message en insérant le code suivant dans notre Type de poste une fonction:
register_post_type (__ ('portfolio'), $ args); Nous avons maintenant créé notre type de message personnalisé. Formons la sortie pour pouvoir obtenir des messages conviviaux. Commencez par créer une autre fonction dans notre portfolio-post-type.php fichier.
// function: portfolio_messages BEGIN fonction portfolio_messages ($ messages) $ messages [__ ('portfolio')] = tableau (0 => ", 1 => sprintf (('Portfolio mis à jour. Voir le portefeuille'), esc_url (get_permalink ( $ post_ID))), 2 => __ ('Champ personnalisé mis à jour'), 3 => __ ('Champ personnalisé supprimé.'), 4 => __ ('Portefeuille mis à jour.'), 5 => isset ($ _GET ['revision'])? Sprintf (__ ('Portefeuille restauré dans une révision à partir de% s'), wp_post_revision_title ((int) $ _GET ['révision'], false)): false, 6 => sprintf (__ (' Portfolio publié. Afficher le portfolio '), esc_url (get_permalink ($ post_ID))), 7 => __ (' Portfolio Saved. '), 8 => sprintf (__ (' Portfolio Soumis. Aperçu Portfolio '), esc_url (add_query_arg ( 'preview', 'true', get_permalink ($ post_ID)))), 9 => sprintf (__ ('Portfolio prévu pour: % 1 $ s. Preview Portfolio '), date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ (' Portfolio Projet mis à jour. Aperçu du portefeuille '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID)))),); renvoyer $ messages; // fonction: portfolio_messages END Ce que nous venons de faire est de créer une fonction appelée portfolio_messages cela prend un argument appelé $ messages. Suite à cela, nous créons une variable qui stocke un tableau pour tous nos messages. Nous laissons "0" vide dans notre tableau car nous commençons notre indexation à 1 avec nos messages. Puis finalement, retourne notre tableau à notre fonction.
Enfin, nous devons créer notre taxonomie. Commencez par créer une autre fonction appelée portfolio_filter et entrez le code suivant:
// function: portfolio_filter BEGIN function portfolio_filter () register_taxonomy (__ ("filter"), array (__ ("portfolio")), array ("hierarchical" => true, "label" => __ ("Filter") , "singular_label" => __ ("Filtre"), "rewrite" => array ('slug' => 'filter', 'hierarchical' => true)); // fonction: portfolio_filter END Nous commençons par enregistrer notre taxonomie, puis en appliquant la taxonomie à notre type de message personnalisé. portefeuille. Ensuite, nous appliquons les derniers paramètres de la taxonomie et introduisons les étiquettes créées. La raison pour laquelle nous créons une taxonomie est que nous allons l'utiliser comme clé de référence lors du tri de notre portefeuille avec Quicksand..
Maintenant que tout notre type d'article personnalisé est complet, ainsi que le formatage correct et notre propre taxonomie, nous devons enfin initialiser tout notre code afin qu'il soit affiché dans l'administrateur. Commençons par ajouter le code suivant au bas de notre fichier:
add_action ('init', 'post_type'); add_action ('init', 'portfolio_filter', 0); add_filter ('post_updated_messages', 'portfolio_messages'); Une fois que nous avons entré ceci, nous devons alors ouvrir notre functions.php fichier et insérez la ligne de code suivante:
include ("portfolio / portfolio-post-types.php"); Nous devons inclure notre type de portefeuille personnalisé dans notre functions.php fichier pour le script à exécuter lorsque les fonctions de votre thème WordPress sont appelées. Maintenant, vous verrez dans votre panneau d’administration une section intitulée Portefeuille avec 3 éléments de sous-navigation appelés "Portfolio", "Ajouter un élément" et "Filtre".
Maintenant que tous les paramètres de notre portefeuille sont complets, nous devons générer les éléments de notre portefeuille. Nous commençons cela en créant un nouveau fichier PHP appelé portfolio.php. Tout d'abord, ajoutons quelques éléments essentiels à la création d'un modèle de page:
// nous ajouterons notre contenu plus tard
Maintenant, nous avons créé notre modèle de page fondamental, nous devons renseigner notre portefeuille. Nous devons d’abord créer une page qui servira de page de portefeuille, alors dirigez-vous vers le Pages -> Ajouter un nouveau dans notre tableau de bord. Sur le côté droit, vous verrez une boîte intitulée Attributs de page avec une liste déroulante de Modèle par défaut, sélectionnez le modèle que vous souhaitez utiliser dans notre cas portefeuille devrait être sélectionné, puis sélectionnez publier.
Revenons maintenant à l'édition de notre modèle de page Portfolio et commençons à insérer le filtre pour notre portfolio. Premièrement, nous commençons par envelopper le filtre dans une liste non ordonnée et chacune des catégories sera un élément de notre liste..
Ajoutons un peu de PHP à notre filtre pour générer automatiquement les catégories de filtres utilisées dans notre portefeuille..
0) foreach ($ terms as $ term) $ i ++; $ term_list. = '
Ce que nous faisons ici est d’abord d’initialiser la taxonomie que nous souhaitons obtenir, dans notre cas filtre. Deuxièmement, définissez un nombre avec nos catégories pour que nous puissions incrémenter chaque élément de notre filtre, puis appliquez une instruction conditionnelle pour vérifier si le nombre que nous avons défini est inférieur à 0; ce qui signifie que si le filtre ne contient aucune catégorie ou qu'aucune catégorie n'est affectée à un élément du portefeuille, rien ne sera généré. S'il y a des catégories dans notre filtre, alors nous voulons modifier la sortie pour chaque élément.
Nous faisons cela par la ligne suivante dans notre segment de code:
$ term_list. = '
Nous créons un élément de liste qui convient à notre liste non ordonnée, puis définissons le "href" sur une cible vide, car Quicksand se chargera de l'organisation du contenu, puis nous attribuerons le nom de classe au slug de l'élément de portefeuille pour un référencement cohérent. et finalement sortir le nom de la catégorie dans nos filtres.
Génial, nous avons maintenant un filtre dynamique implémenté. Nous allons maintenant sortir les éléments de notre portefeuille. Commençons par interroger notre base de données afin d'obtenir toutes les publications pour le type de publication du portefeuille et configurer notre boucle WordPress. Nous commençons par configurer un nouvel objet WP_Query et lui passons les paramètres corrects..
'portfolio', 'posts_per_page' => '- 1')); ?>
Nous affectons notre objet WP_Query à une variable afin de pouvoir référencer notre requête lorsque nous initialisons notre boucle. Nous définissons notre type de message à portefeuille donc nous interrogeons seulement notre type de message personnalisé que nous avons créé plus tôt et définissons enfin la posts_per_page à -1. Nous utilisons -1 afin qu'il n'y ait pas de limite fixe au nombre de messages par page, donc afficher tous les éléments du portefeuille, si nous le souhaitions, nous pouvons également entrer un nombre quelconque et afficher uniquement le nombre d'éléments du portefeuille qui a été entré ici..
Maintenant que nous avons un objet de requête que nous pouvons référencer, configurons notre boucle pour générer les éléments de notre portefeuille. Nous commençons par insérer le code suivant:
have_posts ()): while ($ wpbp-> have_posts ()): $ wpbp-> the_post (); ?>
Avant de commencer à entrer du contenu dans notre boucle, nous allons configurer nos images en vedette. Ouvrez votre functions.php fichier et nous ajouterons des tailles d’image personnalisées à afficher pour chaque élément du portefeuille.
Vérifions d’abord si la version actuelle de WordPress gère le l'image sélectionnée fonctionnalité, puis configurez certains paramètres généraux pour qu’elle fonctionne correctement. Nous ajoutons un support pour le post-vignettes et définir une taille par défaut de 56px par 56px.
if (function_exists ('add_theme_support'))) add_theme_support ('post-vignettes'); set_post_thumbnail_size (56, 56, vrai); Ensuite, nous voulons ajouter notre propre taille de vignette personnalisée. Insérez le code suivant sur une ligne ci-dessous: set_post_thumbnail_size
add_image_size ('portfolio', 295, 150, true); Cette méthode vous permet de créer votre propre taille de vignette en définissant d’abord le nom de référence de la vignette, puis la largeur et la hauteur, et enfin si la vignette doit rogner l’image à la taille spécifiée. Vous pouvez modifier la taille de votre image en fonction de votre mise en page. dans le but de ce tutoriel, j'ai une disposition de grille de 3 colonnes.
Maintenant que notre image en vedette est configurée, nous allons revenir à notre modèle de page de portefeuille et sortir l'image de portefeuille en vedette..
Dans la mesure où l'organisation de chaque élément du portefeuille est mieux gérée par une liste non ordonnée, nous en créerons d'abord un, puis nous afficherons l'image sélectionnée que nous venons de configurer. Insérez le code suivant dans votre boucle WordPress:
">
Nous vérifions d’abord si le thème supporte la la vignette une fonction. Si le thème prend en charge cette fonctionnalité, il affichera l'image de la fonctionnalité sur la vignette dédiée que nous avons spécifiée précédemment. Après la sortie de l'image sélectionnée, nous affichons le titre de l'élément Portfolio directement sous l'image..
Nous devons ajuster les différents éléments de chaque élément de la liste de portefeuilles afin de nous assurer que le référencement de chaque portefeuille correspond aux catégories auxquelles l'élément est affecté. Pour cela, nous devons d’abord obtenir les catégories de notre taxonomie. Insérez le code suivant dans votre boucle:
Ensuite, nous allons ajouter quelques attributs à notre élément de liste (li). Nous commençons par ajouter un ID de données à notre élément de liste, pour donner une identité unique à chacun des éléments du portefeuille. Nous allons aussi ajouter un Type de données; cela agira comme notre référence à notre filtre. Remplaçons notre élément de liste d'ouverture (li) avec le code suivant:
Nous appliquons un compte à notre ID de données, et lors de la lecture en boucle de chaque élément, le nombre augmente (nous ajouterons le nombre sous peu). Nous parcourons ensuite chaque catégorie de notre taxonomie et appliquons une expression régulière pour rechercher les espaces. Nous la remplaçons par un "-" correspondant au slug de la catégorie. Nous mettons ensuite un espace vide à la fin afin de pouvoir appliquer plus d'une catégorie à un élément de portefeuille.
Enfin, nous allons nous assurer que nous augmentons notre nombre et fournissons une référence unique à chacun des éléments de notre portefeuille. Nous devons ajouter le code suivant juste avant de terminer la boucle:
">
Nous progressons maintenant, mais avant de continuer, nous devons télécharger des scripts jQuery. Nous devons télécharger les scripts suivants:
Nous devons également créer un fichier JavaScript pour gérer l’ensemble de notre jQuery personnalisé que nous écrirons sous peu. Créons donc un fichier JavaScript vierge appelé jquery.custom.js. Maintenant que nous avons tous nos scripts essentiels, ouvrons notre functions.php et créer une fonction vierge appelée register_js. Une fois que nous avons notre fonction vide, nous allons insérer nos scripts en utilisant les méthodes wp_register_script et wp_enqueue_script. Tout d'abord, nous devons vérifier que nous ne sommes pas dans l'administrateur pour nous assurer que les scripts ne sont chargés que sur le serveur frontal. Insérez le code suivant dans notre fonction:
// Enregistrez nos scripts function register_js () if (! Is_admin ()) wp_register_script ('quicksand', get_template_directory_uri (). '/Js/jquery.quicksand.js', 'jquery'); wp_register_script ('easing', get_template_directory_uri (). '/js/jquery.easing.1.3.js', 'jquery'); wp_register_script ('custom', get_template_directory_uri (). '/js/jquery.custom.js', 'jquery', '1.0', true); wp_enqueue_script ('jquery'); wp_enqueue_script ('quicksand'); wp_enqueue_script ('easing'); wp_enqueue_script ('custom'); D'abord avec wp_register_script nous spécifions un descripteur comme premier argument de référence lors de la mise en file d'attente des scripts, puis ajoutons le lien source au script comme deuxième argument (cela s'applique à chaque enregistrement d'un script). Nous spécifions aussi jquery comme dépendance pour charger la version incluse de jQuery dans WordPress lorsque nous mettons en file d'attente le script.
Une fois tous nos scripts enregistrés, nous les mettons en file d'attente en utilisant wp_enqueue_script. Nous transmettons tous les descripteurs que nous avons utilisés lors de l'inscription en tant que référence pour mettre en file d'attente nos scripts. Enfin, nous devons initialiser notre fonction en ajoutant le code suivant dans notre functions.php fichier:
add_action ('init', 'register_js'); Maintenant que tous nos scripts sont en place, nous pouvons commencer à écrire notre script personnalisé jQuery pour la gestion de Quicksand. Ouvrons notre jquery.custom.js script et configurons l’environnement en insérant le code suivant:
jQuery (document) .ready (function () // Nous allons insérer notre script de sables mouvants ici); // FIN DU DOCUMENT
Maintenant, nous avons notre structure de script, nous allons créer une fonction appelée portfolio_quicksand et n'exécutez que si le plugin Quicksand existe.
function portfolio_quicksand () // Toutes nos manipulations de sables rapides se produiront dans cette fonction if (jQuery (). quicksand) portfolio_quicksand ();
Je décomposerai les éléments suivants en étapes plus petites pour vous permettre de comprendre tout ce qui se passe lors de la création d’un portefeuille de Quicksand. Commençons par configurer nos variables. Insérez le code suivant dans notre portfolio_quicksand une fonction:
var $ filter; var $ conteneur; var $ conteneurClone; var $ filterLink; var $ filtréItems;
Nous utiliserons ces variables plus fréquemment, c'est donc toujours un bon moyen de disposer d'une base solide pour la configuration des variables. Ensuite, nous allons assigner nos variables:
$ filter = $ ('. filter li.active a'). attr ('classe'); $ filterLink = $ ('. filter li a'); $ conteneur = $ ('ul.filterable-grid'); $ conteneurClone = $ conteneur.clone (); Nous avons d’abord configuré notre filtre sur la classe de liste non ordonnée à partir de notre modèle de page de portefeuille. Deuxièmement, nous avons mis en place un filterLink; cela agira comme notre élément cliqué dans notre filtre. Ensuite, nous devons affecter notre conteneur de nos éléments de portefeuille et, enfin, nous avons besoin d’une version clonée de notre conteneur pour manipuler les données avec Quicksand..
Ensuite, nous allons écrire notre fonction click. Ainsi, lorsqu'un utilisateur sélectionne une catégorie, le conteneur doit être manipulé et la sortie du contenu affichée. Commençons par appeler une fonction de clic sur notre filterLink:
$ filterLink.click (function (e) // Nous allons ajouter le contenu de cette fonction maintenant…);
Gérons maintenant l'état actif de l'élément de liste. Nous commençons d'abord par supprimer toute classe ayant un état actif en cours, puis en recherchant dans le filtre et en le scindant en éléments séparés, puis en appliquant une classe active à l'élément cliqué (catégorie):
$ ('. filter li'). removeClass ('active'); $ filter = $ (this) .attr ('classe'). split ("); $ (this) .parent (). addClass ('active'); Cela vous aidera lors du style de votre filtre, car vous pourrez fournir actif états pour quand un utilisateur a sélectionné une catégorie.
Ensuite, nous allons gérer une condition pour le filtrage de nos données. Nous commençons par vérifier d'abord si tout a été sélectionné. Si tout a été sélectionné, puis affiche tous les éléments de notre conteneur, sinon affiche les éléments du conteneur sélectionnés par le filtre..
Auparavant, lorsque nous créions notre modèle de page de portefeuille et que nous attribuions un Type de données à chacun des éléments de notre portefeuille, c’est là que nous allons l’utiliser comme clé de référence pour trouver nos données sélectionnées.
if ($ filter == 'all') $ filtréItems = $ conteneurClone.find ('li'); else $ filterItems = $ conteneurClone.find ('li [type de données ~ =' + $ filtre + ']'); Enfin, nous appelons la méthode Quicksand et passons notre éléments filtrés et toutes nos options d'animation:
$ container.quicksand ($ FilterItems, durée: 750, atténuation: 'aisanceSurCirc', ajustement de la hauteur: 'dynamique');
function portfolio_quicksand () // Configuration de nos variables var $ filter; var $ conteneur; var $ conteneurClone; var $ filterLink; var $ filterItems // Définit notre filtre $ filter = $ ('. filter li.active a'). attr ('classe'); // Définit notre lien de filtre $ filterLink = $ ('. Filter li a'); // Définit notre conteneur $ conteneur = $ ('ul.filterable-grid'); // Cloner notre conteneur $ conteneurClone = $ conteneur.clone (); // Applique notre Quicksand pour travailler sur une fonction de clic // pour chacun des éléments de lien des liens de filtre $ filterLink.click (function (e) // Supprime la classe active $ ('. Filter li'). RemoveClass ('active '); // Fractionner chacun des éléments filtrants et remplacer notre filtre $ filter = $ (this) .attr (' classe '). Split ("); // applique la classe' active 'au lien cliqué $ (this ) .parent (). addClass ('active'); // Si 'all' est sélectionné, affiche tous les éléments // sinon affiche tous les éléments référencés par le type de données if ($ filter == 'all') $ filtréItems = $ containerClone.find ('li'); else $ filterItems = $ containerClone.find ('li [type de données ~ =' + $ filtre + ']'); // Appelez finalement la fonction Quicksand $ container .quicksand ($ filterItems, // La durée de l'animation: 750, // L'effet d'accélération lors de l'animation d'accélération: 'easInOutCirc', // Réglage de la hauteur défini sur dynamique adjustHeight: 'dynamic'); Incroyablement bien, vous devriez maintenant avoir un portefeuille Quicksand entièrement fonctionnel, mais ne nous arrêtons pas là. Je vais mettre un extra supplémentaire, c'est totalement optionnel mais cela pourrait devenir une fonctionnalité favorite, et c'est Lightbox. Nous allons utiliser le plugin jQuery appelé PrettyPhoto pour notre intégration Lightbox.
La première chose à faire est de télécharger le plugin PrettyPhoto.
Une fois que nous avons téléchargé nos fichiers PrettyPhoto, nous copierons d’abord les images PrettyPhoto, qui seront dans le dossier. images dossier, puis vous devez copier le dossier intitulé Jolie photo dans notre thème. Nous devons également copier le fichier JavaScript CSS et PrettyPhoto, copions-le dans les dossiers appropriés de notre thème..
Maintenant que tous nos fichiers sont en place, nous devons les initialiser dans notre thème. Au sein de notre functions.php fichier, nous allons créer une autre fonction pour gérer nos styles et nous appellerons cette fonction register_css. Ensuite, nous allons enregistrer nos styles et les mettre en file d'attente, insérant ainsi le code suivant dans votre functions.php fichier:
// Enregistre nos styles function register_css () if (! Is_admin ()) wp_register_style ('prettyPhoto', get_template_directory_uri (). '/Css/prettyPhoto.css'); wp_enqueue_style ('prettyPhoto'); add_action ('init', 'register_css'); Nous avons tous nos fichiers en place et ils sont initialisés par notre thème. Nous devons maintenant en tirer parti et implémenter Lightbox dans notre thème. Ouvrons notre portfolio.php (modèle de page de portfolio) et ajouter du code à notre image en vedette.
Premièrement, nous devons obtenir une grande image de l’image sélectionnée qui a été définie. Cela agira ensuite comme une image en pleine taille lorsque l'utilisateur clique sur l'image et charge PrettyPhoto. Dans notre boucle WordPress, nous devons insérer le code suivant:
Le code que nous avons inséré trouvera la publication actuelle dans la boucle et trouvera la source originale de l'image, puis le taille réelle version de l'image. Une fois que nous avons renvoyé notre image en taille réelle, nous forcerons l’image à être stockée dans l’index de tableau de 0. Cette option est utilisée pour ne pas remplacer ni dupliquer l’image en taille réelle.
Une fois que notre image en taille réelle est accessible, nous allons maintenant initialiser PrettyPhoto sur notre image sélectionnée. Le code suivant liera le taille réelle image à l'élément en vedette de l'élément de portefeuille et passez la référence à PrettyPhoto, remplacez le code où vous avez créé votre image en vedette par ce qui suit:
">
Génial, nous avons tous nos fichiers et scripts en place, nous avons l’image en taille réelle pour notre image sélectionnée et nous avons référencé notre l'image sélectionnée à notre image en taille réelle avec PrettyPhoto. Ensuite, nous devons écrire notre code JavaScript pour que la Lightbox apparaisse et fonctionne..
Revenons à notre jquery.custom.js fichier et créer une autre fonction vierge pour gérer notre PrettyPhoto:
function lightbox () // Le fonctionnement de notre Lightbox sera ajouté maintenant… if (jQuery (). prettyPhoto) lightbox ();
Maintenant que nous avons notre fonction, nous allons initialiser PrettyPhoto. Nous faisons cela en ajoutant le code suivant dans notre Boite à lumière une fonction:
jQuery ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (animationSpeed: 'fast', diaporama: 5000, thème: 'pp_default', show_title: false, overlay_gallery: false, social_tools: false); Vous pouvez lire la documentation complète de tous les paramètres que PrettyPhoto acceptera lors de l’utilisation du plug-in à l’adresse: PrettyPhoto jQuery Lightbox Clone
Alors tout est fini! Mise en œuvre Lightbox dans votre thème WordPress, mais attendez, laissez-moi deviner lorsque vous cliquez sur le filtre et utilisez Quicksand; la visionneuse ne fonctionne plus. En effet, nous devons modifier notre script Quicksand et transmettre un petit morceau de code supplémentaire pour nous assurer que Lightbox fonctionne même lorsque nous filtrons dans notre portefeuille..
Alors corrigeons ce petit problème en ajoutant le script suivant à notre portfolio_quicksand fonctionner au sein de notre jquery.custom.js fichier:
$ container.quicksand ($ FilterItems, function () lightbox (););
Nous appelons ici le plugin Quicksand une fois de pl
