Fancybox pour Wordpress – de belles images et du contenu fonctionnel en un seul clic. Conception de sites Web et optimisation des moteurs de recherche

Salut tout le monde! Aujourd'hui, nous allons vous parler d'un outil aussi puissant et utile que la bibliothèque FancyBox. Ce plugin jQuery offre la possibilité d'ajouter un système de fenêtres pop-up, également appelées lightbox, fenêtres modales, pop-ups, aux pages de votre site Web. Le format de fenêtre contextuelle est très populaire dans le développement Web et est utilisé à diverses fins. La bibliothèque vous permet de : ouvrir du code html et des fichiers txt, des formulaires et des messages d'information, du contenu provenant d'autres sources à l'aide de requêtes Ajax dans des popups, d'exécuter des scripts, de lire des vidéos de YouTube, des services vimeo et des vidéos flash.

Et la manière la plus courante d'utiliser FancyBox sur un blog WordPress consiste à agrandir des images, à la fois simples et combinées dans une galerie. Des exemples de mise en œuvre de toutes les options ci-dessus peuvent être trouvés sur le site officiel du plugin - fancybox.net. Et dans cet article, nous verrons comment intégrer facilement la bibliothèque dans notre blog à l'aide des plugins FancyBox For WordPress et Easy FancyBox et effectuer leurs réglages de base. Nous apprendrons également comment connecter FancyBox à WordPress sans plugin.

FancyBox For WordPress : affichez magnifiquement des images et des galeries

Si vous avez déjà travaillé avec des images dans WordPress et les avez placées dans des articles et des pages, vous avez remarqué que le modèle réduit les images avec une grande extension. Et parfois, cela affecte l'affichage correct des informations que vous souhaitez transmettre, car tout ne peut pas être analysé. Vous pouvez lutter contre cela en ajoutant un lien vers vous-même sur le fichier multimédia. Mais dans ce cas, lorsque vous cliquez sur l'image, selon les paramètres, elle s'ouvrira soit dans la même fenêtre qu'une page entière, soit dans un nouvel onglet. D'accord, les deux options ne sont pas les plus pratiques et nécessitent des actions et du temps supplémentaires de la part de l'utilisateur de manière totalement déraisonnable.

Pour éliminer cet inconvénient et améliorer le processus d'affichage des images sur un blog WordPress, un plugin spécial, FancyBox For WordPress, a été développé. Il permet au visiteur de cliquer sur l'image et de l'ouvrir au-dessus d'autres fenêtres. Comme ça:

Installons le plugin pour notre site à partir du référentiel WordPress.

Nous activons FancyBox pour WP et il commence immédiatement à fonctionner, en appliquant son Paramètres de base. Nous pouvons le vérifier en allant sur notre blog, en l'actualisant et en cliquant sur l'une des images disponibles.

Dans ce cas, l'image est mise à l'échelle grandes tailles et est placé dans une fenêtre contextuelle au-dessus du reste du contenu, qui est légèrement assombrie. Pour fermer la fenêtre modale, vous pouvez cliquer soit sur la croix dans le coin supérieur droit, soit n'importe où sur la page en dehors de l'image.

Si FancyBox For WordPress ne fonctionne pas, ou plutôt si les images ne sont pas cliquables, vérifiez si les paramètres d'affichage des fichiers sont correctement définis lors de la sélection d'une image à télécharger dans l'éditeur. Le champ Lien doit être défini sur Média.

En plus des options prédéfinies, FancyBox For WordPress propose également des paramètres plus flexibles. Nous pouvons les trouver dans la console VI, dans l'élément de menu « Paramètres » - « FancyBox for WP ». En cliquant sur le lien, on voit un grand nombre de onglets chargés de modifier certains paramètres. Ils sont principalement associés à la modification de l’apparence des images. Malheureusement, le plugin est entièrement en anglais. Mais maintenant, nous examinerons tous les points les plus intéressants dont vous pourriez avoir besoin si les paramètres par défaut ne répondent pas à vos besoins.

L'onglet de départ est « Info ». Voici des liens vers des informations sur les développeurs et le produit dans son ensemble. Les créateurs du plugin disent que si vous ne souhaitez pas approfondir tous les paramètres proposés, alors même sans cela, la version de base des paramètres donne un résultat assez attractif. Ils vous demandent également de faire attention au fait que si après l'édition vous ne remarquez pas immédiatement les changements, cela ne signifie souvent pas que FancyBox For WordPress ne fonctionne pas. Si un plugin de mise en cache est installé, par exemple, vous devez vider le cache après avoir enregistré les modifications ou désactiver le plugin pendant que vous travaillez avec les paramètres.

L'onglet suivant est "Apparence". Il s'agit d'une page où nous pouvons personnaliser les options de base responsables de apparence des pop-ups. Si la case est cochée, la fonction est activée ; sinon, elle est désactivée :

"Bordure" - choisissez si un cadre sera affiché autour de la fenêtre modale. La valeur par défaut est non. Si nous sélectionnons l'option « oui », un champ supplémentaire apparaît pour sélectionner la couleur de la bordure, au format hexadécimal (#000000). Il n'existe aucun moyen d'ajuster la largeur du cadre ;
"Bouton de fermeture" - nous déterminons si la lightbox aura un bouton pour fermer la fenêtre (une croix) et où il sera situé (Gauche (gauche) / Droite (droite) / Bas (en bas) / Haut (en haut)). Valeur de départ – en haut à droite ;
"Padding" - cet élément est responsable de la définition dans FancyBox For WordPress de la couleur et de la largeur du remplissage depuis le bord de la fenêtre contextuelle jusqu'à l'image qui y est placée. La valeur par défaut est le blanc, 10 pixels ;
« Options de superposition » - définissez les caractéristiques de l'arrière-plan assombrissant qui apparaît sous l'image contextuelle, couvrant le contenu de la page entière. Initialement défini : comme couleur – gris, comme transparence (opacité) – 0,3. La propriété de transparence mesure entre 0,0 et 1,0, et plus la valeur est faible, plus l'arrière-plan sera transparent. Ainsi, si vous souhaitez masquer complètement le contenu restant derrière la fenêtre modale, vous pouvez sélectionner l'opacité : 1 ;
"Titre" - nous attribuons si la légende de l'image (c'est-à-dire la valeur de l'attribut titre de l'image) sera affichée et comment. Ici, vous pouvez configurer l'emplacement du titre par rapport au remplissage de la fenêtre pop-up (Inside/Outside/Over) et sa couleur. Avec les valeurs « Inside » et « Outside », le texte sera placé respectivement dans la marge inférieure de la fenêtre modale et en dessous. Et lorsque vous sélectionnez l'option « Au-dessus », le titre sera situé au-dessus du retrait inférieur, au-dessus de l'image elle-même sur un fond translucide sombre ;
"Flèches de navigation" - choisissez d'afficher ou non les flèches de navigation. Ils apparaissent lorsque vous survolez une image.

Allez dans l'onglet "Animations". Ici, nous allons configurer les fonctions chargées de contrôler l'animation des fenêtres pop-up :

Veuillez noter que ces paramètres ne peuvent être appliqués qu'aux fenêtres modales d'ouverture/fermeture dont le paramètre « Type de transition » est défini sur élastique.

Après les champs avec les paramètres d'assouplissement directement, les auteurs de FancyBox For WP nous invitent à suivre les liens et à voir comment fonctionnent les options de la fonction d'assouplissement qu'ils proposent. (Le premier lien n'est actuellement pas disponible.)

L'onglet suivant est « Paramètres de comportement ». Il est responsable de la définition du comportement de la fenêtre contextuelle et est doté du statut « moyen ». À cet égard, les développeurs de FancyBox For WordPress nous préviennent qu'il vaut mieux tout laisser tel quel sur cette page, à moins que l'on sache vraiment comment travailler avec les paramètres situés ici. Nous n’entrerons donc pas dans le détail de toutes les options. Ce dont chacun d’eux est responsable ressort clairement de la capture d’écran :

Le cinquième onglet est « Galeries ». Il s'agit d'un niveau avancé de paramètres concernant les galeries d'images :

« Créer une galerie pour toutes les images de la page (par défaut) » : créez une galerie pour toutes les images de la page (par défaut). Autrement dit, s'il y a plusieurs images sur la page, elles seront par défaut combinées dans une galerie par le plugin. De ce fait, en ouvrant l'un d'eux dans une fenêtre modale, on peut visualiser tous les autres en faisant défiler les images ;
"Ne regroupez pas automatiquement les images dans la galerie (utilisez ceci si vous souhaitez créer des galeries manuellement avec le rapport attribut)" - ne fusionne pas automatiquement les images dans la galerie (utilisez cette option si vous souhaitez créer une galerie manuellement à l'aide de l'attribut rel). Je vous propose d'apprendre plus en détail comment utiliser cette option FancyBox For WordPress en pratique.

Disons que votre page contient du matériel classiquement divisé en plusieurs blocs sémantiques. Par exemple : dans l'un d'eux, vous placez des images à titre d'illustration, et dans le suivant, des exemples des pages de vente les plus réussies. Et vous souhaitez que ces deux groupes d'images ne soient pas mélangés dans une seule fenêtre modale, mais soient affichés dans des lightbox différentes. Pour mettre en œuvre votre plan, sélectionnez d’abord l’option du plugin « Ne pas regrouper automatiquement les images dans la galerie ».

Ouvrez maintenant la publication souhaitée dans l'éditeur et passez dans le mode « Texte », c'est-à-dire celui où est affiché le code html. Retrouvez le premier groupe d'images et tous les liens (tag un), dans lequel chacune des images est enveloppée (tag img), attribuez un attribut avec une valeur identique pour tout le monde. Par exemple : rel = "gal1".

Pour le deuxième groupe de fichiers multimédia, répétez les mêmes étapes, mais avec une valeur rel différente, par exemple : rel = "gal2";

"Créez une galerie pour chaque publication (ne fonctionnera que si votre thème utilise classe = « poste» sur chaque publication, ce qui est courant dans WordPress) » - créez une galerie pour chaque publication (ne fonctionnera que si votre thème utilise la classe « post » pour chaque publication, ce qui est typique de WordPress) ;
« Utilisez une expression personnalisée pour appliquer FancyBox » - appliquez une expression jQuery personnalisée pour configurer FancyBox For WordPress au cas où les options proposées par le plugin ne vous conviennent pas et que vous avez besoin de paramètres individuels plus flexibles. Il vaut mieux ne pas utiliser cette option.

Il est également préférable de ne pas modifier les onglets suivants : ils ne seront compréhensibles et utiles que pour les utilisateurs avancés.

Je suis sûr que toutes les instructions ci-dessus vous suffiront pour intégrer avec succès FancyBox For WordPress dans votre blog afin d'afficher efficacement les images dans une fenêtre contextuelle.

Mais on ne peut s’empêcher de prêter attention au fait que des plaintes d’utilisateurs apparaissent périodiquement sur Internet concernant la vulnérabilité du plugin, ce qui conduit à l’infection de sites par des virus même sans accès à la zone d’administration et à l’hébergement de WordPress. Si vous êtes confronté à un problème de piratage de votre ressource Web, il est important de le résoudre le plus rapidement possible. Je souhaite vous proposer une option alternative pour afficher des images dans des lightbox. Et puis nous ferons connaissance avec le plugin qui est le principal concurrent de FancyBox for VP. C'est ce qui est utilisé sur les pages de mon blog.

Easy FancyBox : principales fonctionnalités du plugin

Comme le plugin précédent, Easy FancyBox pour WordPress commence à fonctionner immédiatement après l'installation standard sur le CMS pour toutes les images. Si vous souhaitez personnaliser les paramètres « pour vous-même », alors sur la page à l'adresse dans la console « Paramètres » - « Fichiers multimédias », vous trouverez des options presque identiques aux options FancyBox pour WordPress.

Ses différences caractéristiques sont :

Ou, dans les paramètres du plugin, dans le bloc « Galerie », dans le champ « Autogallery », sélectionnez « All in one gallery » ;

Il n'y a eu aucune lacune significative dans le fonctionnement du plugin. Mais si votre modèle de VI intègre une lightbox « native », il existe une forte probabilité de conflit et il se peut qu'Easy FancyBox pour WordPress ne fonctionne pas. Dans ce cas, il est judicieux de contacter le support.

Intégrer la bibliothèque FancyBox dans WordPress sans plugins

Si vous êtes sensible à la question, alors vous êtes probablement préoccupé par la vitesse de votre blog. Et nous savons qu’un grand nombre de plugins peuvent ralentir le processus de chargement des pages. Par conséquent, nous examinerons ensuite la possibilité d'implémenter le script jQuery FancyBox sur WordPress sans plugin. Cette méthode Il est recommandé de l'utiliser si vous connaissez et avez de l'expérience avec le code. Au cours du processus, des conflits avec d'autres scripts de thème peuvent survenir en raison de l'inclusion de certaines options. La solution à ce problème dans chaque cas individuel sera individuelle, il est donc difficile de prévoir toutes les options à l'avance.

Pour installer la bibliothèque, les fichiers FancyBox peuvent être trouvés et téléchargés sur fancyapps.com/fancybox/. Ouvrez le dossier dans le répertoire décompressé source et copie jquery.fancybox.css Et jquery.fancybox.js, mets-les dans un dossier , qu’il faut d’abord créer à la racine du thème.

Ouvrir dans éditeur de texte déposer les fonctions.php, recherchez la fonction de connexion des scripts et insérez le code suivant :

1 2 3 4 5

// Feuille de style Fancybox. wp_enqueue_style( "fancybox-style" , get_template_directory_uri() . "/fancybox/jquery.fancybox.css" , array() , " " ) ; // Script Fancybox. wp_enqueue_script( "fancybox-script" , get_template_directory_uri() . "/fancybox/jquery.fancybox.js" , array ( "jquery" ) , " " ) ;

// Feuille de style Fancybox. wp_enqueue_style("fancybox-style", get_template_directory_uri() . "/fancybox/jquery.fancybox.css", array(), " "); // Script Fancybox. wp_enqueue_script("fancybox-script", get_template_directory_uri() . "/fancybox/jquery.fancybox.js", array("jquery"), " ");

Ensuite, ouvrez le fichier de thème pour le modifier en-tête.php et en tête passez un appel à la fonction FancyBox :

1 2 3 4 5

$(document).ready(function())( $(".fancybox").fancybox(); ));

Voici une vidéo sur la configuration et l'utilisation de Fancybox :

Aujourd'hui, nous avons découvert un script largement utilisé sur les sites Web pour afficher magnifiquement des images dans des lightbox. Pour faciliter l'intégration dans un blog, de nombreux plugins spéciaux ont été développés. Nous avons examiné certains des plus populaires : Easy FancyBox et FancyBox For WordPress, découvert comment ils fonctionnent et quelles sont leurs différences. Ils ont été testés empiriquement et fonctionnent de manière fiable. Pour comprendre quel outil convient le mieux à vos fonctionnalités, déterminez les principales tâches qu'il doit effectuer. Cela ne sert à rien de choisir un plugin lourd pour n’utiliser qu’une ou deux de ses options à l’avenir.

Voyons comment Fancybox fonctionne dans JQuery et apprenons à le configurer.

C'est un plugin intéressant avec lequel, lorsque vous cliquez sur les photos, elles s'ouvrent en plein écran. Capacité illimitée à créer des projets faciles, mignons et faciles à utiliser. De plus, un tel plugin a installation facile et connexion rapide. Pour ce faire, téléchargez Fancybox JQuery et connectez-le comme indiqué ci-dessous.

Comment afficher une image

Ce plugin possède plusieurs paramètres qui peuvent être utilisés pour afficher certains éléments de la page. Voyons comment configurer l'affichage de l'image. Pour ce faire, écrivez le code suivant :

Le plugin lui-même entre désormais en vigueur. Pour afficher l’image, nous écrirons ce qui suit.

Dans l'attribut href, vous devez spécifier le chemin d'accès à l'image, et dans la balise un aperçu est écrit.

Comment implémenter une galerie et afficher un groupe d'images

Pour résoudre ce problème, vous devez effectuer une étape simple : ajouter à la balise attribut spécial, où l'une ou l'autre valeur (nécessairement unique) sera indiquée pour un groupe d'images distinct.

Il est également nécessaire de spécifier les paramètres d'affichage de l'image dans la balise.

Ainsi, vous pouvez compter le nombre d'images dans un certain groupe et également afficher le numéro et le titre de l'image. Cela nécessite cependant sa présence dans le titre de la balise ci-dessus .

Comment afficher le contenu

Le plugin que nous examinons dans cet article peut également être utilisé pour afficher du contenu dans une fenêtre modale. Regardons un exemple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibule imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam.

La valeur par défaut est display:none, ce qui signifie que le contenu est masqué. Cependant, lorsque vous cliquez sur le lien, le plugin affiche le contenu div avec l'ID spécifié dans le href. Faites également attention.

Nous espérons que vous aurez une idée générale. Nous parlerons des autres fonctionnalités du plugin plus tard.

En savoir plus sur les options de FancyBox

Paramètre Paramètre par défaut Description

rembourrage	10	Espace entre le contenu et Fancybox
marge	20	Espace entre Fancybox et les autres contenus
opacité	FAUX	Activer ou désactiver la transparence pendant les transitions
cyclique	FAUX	Lorsqu'elle est définie sur true, la galerie deviendra une boucle, avec des transitions avant-arrière infinies
défilement	"auto"	Possibilité de masquer ou d'afficher la barre de défilement, propriété de débordement CSS
largeur	560	La largeur d'un type de contenu "IFRAME" ou "SWF" est également appliquée au paramètre "autoDimensions" si ce dernier est défini sur "false".
hauteur	340	La hauteur d'un type de contenu "IFRAME" ou "SWF" est également appliquée au paramètre "autoDimensions" si ce dernier est défini sur "false".
échelle automatique	vrai	Si c'est vrai, la FancyBox est mise à l'échelle dans la fenêtre
centre sur défilement	FAUX	Si c'est vrai, FancyBox sera au milieu lors du défilement de la page
hideOnOverlayClick	vrai	Sélectionnez pour que lorsque vous cliquez sur le calque « Overlay », la FancyBox se ferme
cacherOnContentClick	FAUX	Sélectionnez si vous souhaitez que la FancyBox se ferme lorsque vous cliquez sur le contenu
superpositionAfficher	vrai	Activer/désactiver le calque « Superposition »
superpositionOpacité	0.3	Transparence des calques (de 0 à 1)
superpositionCouleur	"#555"	Couleur du calque de superposition
titreAfficher	vrai	S'il faut afficher le "titre"
titrePosition	"dehors"	Position du titre « Derrière », « à l'intérieur » ou « au-dessus » (« à l'extérieur » « à l'intérieur » « au-dessus »)
titreFormat	nul	Vous pouvez utiliser du HTML pour le thème
transitionIn, transitionOut	"disparaître"	Vous pouvez définir l'effet entre les transitions ou désactiver "élastique", "fondu" ou "aucun".
vitesse d'entrée, vitesse de sortie	300	Vitesse des effets de transition en millisecondes
changerVitesse	300	Vitesse d'effet
changementFade	"rapide"	Taux de disparition du contenu lors de la modification des éléments de la galerie
assouplissementIn, assouplissementOut	"balançoire"	Utiliser pour une animation "élastique"
showCloseButton	vrai	Afficher le bouton de fermeture
showNavArrows	vrai	Afficher les flèches pour la navigation
activerEscapeButton	vrai	Utilisez le bouton « ESC » pour fermer FancyBox
au démarrage	nul	Sera appelé en premier avant le chargement du contenu
surAnnuler	nul	Sera appelé après l'annulation du chargement.
surComplet	nul	Sera appelé après l'affichage du contenu
surNettoyage	nul	Sera appelé avant la fermeture
leFermé	nul	Sera appelé après la fermeture de FancyBox

Il existe un bon concurrent de Fancybox - c'est le plugin Lightbox, il est assez beau, vous pouvez en prendre connaissance dans l'article -

Bonjour les amis. Chaque site dispose de fichiers multimédias pour mieux présenter les informations aux visiteurs. déjà discuté sur les pages du blog. Grâce aux plugins WordPress, vous pouvez agrandir une image sans accéder à une page séparée. Il est possible de lier des images dans une seule galerie ou de les afficher une par une. Jetons un coup d'œil à l'un de ces plugins, l'un des meilleurs du genre. Cela prend un peu de temps, mais cela vaut la peine d'y consacrer du temps pour terminer la tâche.

Fancybox pour le plugin d'agrandissement d'image WordPress et la gestion de galerie

En plaçant des images sur le site, ils ont plutôt fait attention au fait que le modèle installé compresse les images « surdimensionnées », ce qui entraîne une perte de qualité. Les petits caractères et les détails ne sont pas toujours lisibles. Dans les paramètres d'affichage, vous pouvez préciser l'affichage de l'image dans un onglet séparé, ou sur la même page du site. Cela peut conduire à des doublons et n'est pas tout à fait pratique pour l'utilisateur. Fancybox pour WordPress ouvre l'image de cette page au-dessus du reste du contenu.

Vous devez installer et activer Fancybox pour WordPress de la manière standard. Si vous avez oublié comment, lisez l'article. Pour que Fancybox soit appliqué à une image, cela doit être fait lors du téléchargement ou sur un fichier déjà téléchargé dans Paramètres d'affichage fichier au point Lien indiquer ⇒ Fichier multimédia.

Après activation, une section apparaîtra - Fancybox pour WordPress.

Après avoir accédé à la section, une fenêtre s'ouvrira avec des onglets permettant d'éditer divers paramètres.

Le plugin n'est pas russifié, en anglais, mais presque tout est clair tel quel. Je vais maintenant fournir une traduction de tous les paramètres.

Info. Onglet Informations sur le développeur. Les auteurs précisent que la configuration de base installée du plugin est assez attractive. Les notes indiquent que pour que les modifications prennent effet, vous devez vider le cache.
Apparence. Personnalisation de l'apparence des fenêtres pop-up.
- Bordure : affiche un cadre autour de la fenêtre contextuelle, oui/non. Si oui, précisez la couleur au format HTML.
- Bouton Fermer - bouton fermer. Sélectionnez la position de la croix.
- Rembourrage - ajustez l'épaisseur et la couleur du rembourrage de la fenêtre modale à l'illustration.
- Options de superposition - transparence de l'arrière-plan. Le coefficient va de 0 à 1. Lorsqu'il est défini sur 1, le contenu en arrière-plan ne sera pas affiché du tout.
- Titre : le nom du fichier multimédia. Lorsque la case est cochée, le nom sera affiché à la position sélectionnée. À l'intérieur ⇒ à l'intérieur, À l'extérieur ⇒ à l'extérieur, Au-dessus ⇒ au-dessus.
- Flèches de navigation - flèches de navigation. Se retirer ou pas.

Assurez-vous de sauvegarder vos modifications.

Les deux sections suivantes sont destinées aux utilisateurs avancés.

Divers - autres paramètres. Dimensionnement automatique, fonctionne uniquement avec Ajax.
Appels supplémentaires - appels FancyBox supplémentaires. Ici, vous pouvez ajouter de nombreux appels FancyBox supplémentaires avec des paramètres différents. Par exemple, si vous souhaitez utiliser FancyBox avec des frames ou AJAX sur un lien spécifique, vous pouvez configurer ces appels ici sans affecter les options d'image.
Dépannage - dépannage. Les développeurs notent que des modifications dans cette section ne doivent être apportées qu'en cas de problèmes liés au fonctionnement de Fancybox pour wordpress.
Les auteurs recommandent de vérifier la compatibilité avec d'autres extensions telles que Lightbox, Slimbox et similaires en les désactivant une à la fois et en vérifiant. Vous devez également vider le cache pour vérifier les modifications de paramètres.
Assistance - service d'assistance. Fournit des liens vers les pages FAQ, le groupe Fancybox Google, le forum d'assistance et des réponses aux questions posées par d'autres utilisateurs.
Désinstaller - suppression. Comme d'autres extensions, Fancybox pour WordPress stocke ses paramètres dans une table de base de données WordPress. Pour supprimer complètement un plugin, cochez la case, puis enregistrez les modifications, et après désactivation, tous ses paramètres seront supprimés de la base de données.

J'espère qu'après une analyse détaillée de Fancybox pour WordPress, la configuration du plugin ne posera aucune difficulté. Les personnes intéressées le mettront en œuvre avec succès et rendront efficace l'affichage des images dans la fenêtre contextuelle, et le site plaira aux yeux de l'auteur et des visiteurs.

Alors bon après-midi, le moment est venu pour moi de vous raconter comment j'ai installé un plugin pour afficher une image dans une nouvelle fenêtre et plus encore. Voyons maintenant de plus près comment l'installer et le configurer.

Le plugin s'appelle Easy Fancybox, il est très simple à installer et ne nécessite initialement aucun réglage, il fonctionne immédiatement après l'activation. Après avoir activé le plugin, tous les liens vers les images JPG, GIF et PNG s'ouvrent automatiquement dans une fenêtre séparée.

Fancybox prend en charge :

Galeries WordPress
Fichiers PDF
Images JPG, GIF, PNG, etc., ainsi que des images cartographiques
Vidéos provenant de sites tels que YouTube, Vimeo et Dailmotion
Cadres (conçus pour diviser la fenêtre du navigateur en parties, chacune affichant des informations provenant de différentes sources.)

Pour obtenir encore plus d'options supplémentaires, vous pouvez installer l'extension PRO.

Voyons à quoi ressemblent les images après l'installation de ce plugin. Par exemple, nous regardons n'importe quel article sur les plugins WP sur le site, il contient des images, mais nous les voyons en petite taille et ne lisons pas le texte dessus. Cliquez dessus et une fenêtre séparée avec une image en taille réelle s'ouvre. En bas de la fenêtre se trouve également le nom de l'image elle-même, lors du téléchargement sur le site, vous pouvez le modifier ou le supprimer complètement pour ne pas interférer.

Passons en fait au processus d'installation lui-même.

Tout d'abord, nous téléchargeons le plugin dont nous avons besoin. Vous pouvez le télécharger depuis wordpress.org ou installer le plugin en utilisant la base de données de plugins WordPress standard. J'ai choisi la deuxième méthode (en utilisant la base de données de plugins standard), c'est la plus rapide et la plus simple, je vais donc décrire cet exemple. Pour installer le plugin en utilisant cette méthode, vous n'aurez pas besoin de le télécharger sur votre PC. Il vous suffit de vous rendre dans la section « Plugins », puis de cliquer sur « Ajouter un nouveau ».

Une page s'ouvre où vous devez saisir un nom aussi complet que possible pour le plugin et cliquer sur « rechercher ». Entrez le nom complet du plugin « Easy FancyBox » et cliquez sur « rechercher ». Après cela, une page s'ouvre avec un tas de plugins sur demande, trouvez celui dont vous avez besoin et cliquez sur « Installer ». Après une installation réussie, activez-le. Vous pouvez l'activer immédiatement après l'installation, ou plus tard, dans la liste de tous les plugins installés. Ça y est, le plugin est désormais installé et prêt à être utilisé.

Maintenant, pour que cela fonctionne, vous devez vous assurer que lors du chargement d'une image, "Fichier multimédia" a été spécifié dans ses propriétés dans l'élément "Lien", sinon le plugin ne fonctionnera pas (parfois ceci est activé par défaut, mais dans ce n’est pas le cas dans la plupart des cas). Là, vous pouvez également modifier le titre, qui sera affiché en bas de la fenêtre lorsque vous ouvrirez l'image. Après ces manipulations, le plugin fonctionnera de manière fiable.

Le plugin est installé et fonctionne. Maintenant, je vais vous parler un peu de sa configuration.

Nous allons à la page principale de travail avec le site, cliquons sur l'élément « Plugins », recherchons celui dont vous avez besoin appelé Easy FancyBox et cliquez sur « Paramètres ». Une fenêtre apparaît avec des paramètres pouvant être modifiés.

Le paramètre Overlay définit l'arrière-plan lors de l'ouverture de l'image ; vous pouvez modifier la couleur et la transparence. Par exemple, la couleur noire (#000000 – entrez dans l'élément « Couleur ») et changez la transparence de 0 à 1 dans l'élément « Opacité », respectivement, plus la valeur est élevée, moins l'arrière-plan devient transparent ; lors du réglage de la valeur à 1, le fond est complètement opaque.

Paramètre Window, on modifie ici la fenêtre elle-même dans laquelle les images s'ouvrent. Couleur de fond – couleur de fond

Opacité - transparence

Bordure – cadre.

Vous pouvez également modifier la largeur, la hauteur et le cadre lui-même, mais les valeurs par défaut sont 560x340x10 (l'ordre est conservé).

Comportement - comportement, pour ainsi dire. Ici, je ne recommanderais pas de changer quoi que ce soit, à l'exception de la vitesse d'ouverture et de fermeture de la fenêtre (Vitesse d'ouverture et Vitesse de fermeture), la valeur par défaut est 300.

Paramètre d'image. Détection automatique – les formats d'image qui fonctionneront avec le plugin sont répertoriés, vous pouvez ajouter les vôtres.

Je ne recommanderais pas de modifier l'élément Comportement, tout est configuré au mieux.

Afficher le titre est la légende de l'image ; elle peut être supprimée ou laissée.

C'est tout, merci à tous d'avoir lu l'article. Abonnez-vous à la newsletter et recommandez mon site à vos amis en cliquant sur les boutons sociaux ci-dessous.

A bientôt, bonne chance ! Edouard Tikhonov

brainteam.ru

Options pour intégrer un lien avec un formulaire :

1. Intégrez directement dans le modèle :

Retour

2. Intégrez-le dans une page ou une publication

Retour

3. Intégrez-le dans un widget de la barre latérale

*vous devez activer la prise en charge des shortcodes dans le fichier function.php (tous les modèles ne prennent pas en charge les shortcodes dans les widgets de la barre latérale). Pour cela, ajoutez la ligne au fichier function.php :
add_filter("widget_text", "do_shortcode");
Désormais, n'importe quel shortcode fonctionnera dans le widget « Texte ».
Insérez le code* dans le widget « Texte » :

Retour

4. Appel du formulaire retour en cliquant sur l'image :

Vous pouvez voir un exemple de ce formulaire sur le site Web de notre client : plafonds suspendus à Kiev

5. Pour appeler plusieurs formulaires sur une même page, vous devez utiliser différents identifiants pour appeler le formulaire.
Un exemple d'appel de deux formulaires de commentaires dans une fenêtre contextuelle :

Appeler le formulaire 1

Formulaire d'appel 2

Dans ce cas, pour appeler plusieurs formulaires, faites attention à ces parties du code :

6. Sortie du formulaire d'abonnement Feedburner

Vous pouvez utiliser ce code pour votre formulaire d'abonnement en modifiant uniquement l'adresse du flux https://feedburner.google.com/fb/a/mailverify?uri=Cms-info par la vôtre.

Ajoutez le code suivant si vous utilisez un plugin avec Fancybox, tel que Easy Fancybox :
on_sent_ok : $.fancybox.close();
dans la section Paramètres supplémentaires de votre formulaire.

S'il donne une erreur : Le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard

Cette erreur est peut-être présente dernières versions Moteur WordPress, il est recommandé de changer la classe dans le lien :
Retour
changer pour :
Retour

Nous avons remplacé Fancybox par Fancybox-inline .

Problèmes et solutions rencontrés :

2. Si vous avez une galerie connectée (par exemple NextGEN Gallery) ou un thème sur lequel un effet « lightbox » est déjà installé, voici ce qui se produit : les photos s'ouvrent avec la lightbox intégrée et également avec une lightbox d'EasyFancy Box, qui c'est-à-dire que vous devez ensuite les fermer deux fois.
Pour éviter cela, dans les paramètres d'EasyFancy Box, décochez la case Images et en haut du code du formulaire contextuel, remplacez la classe Fancybox par Fancybox-inline . Votre code ressemblera à ceci :.

Retour

C'est tout, si vous souhaitez « remercier » notre communauté informatique, vous avez cette opportunité : à droite se trouvent les options de dons pour le développement du portail. Ou partagez l'article sur vos réseaux sociaux en utilisant les services ci-dessous.

it-media.kiev.ua

Fonctionnalités d’Easy Fancybox dans WordPress

en plus des graphiques de base, les formats Webp et SVG sont disponibles ;
Vous pouvez afficher des vidéos de Vimeo, Youtube, Dailmotion dans la fenêtre pop-up ;
prend en charge les fichiers PDF et Flash ;
peut travailler avec du code HTML standard et le contenu de pages externes ;
Compatible avec la galerie WordPress de base, ainsi qu'avec NextGEN ;
vous n'aurez aucun problème avec Imagemaps, le défilement sans fin de Jetpack et lors de la configuration d'une lightbox pour les éléments de menu ;
le traitement automatique des images a déjà été évoqué plus haut ;
Les fonctionnalités supplémentaires incluent le déclenchement automatique d'une fenêtre contextuelle lors du chargement des pages d'une ressource Web ;
peut être utilisé comme fenêtre modale pour Contact Form 7 - une alternative à Easy Modal (instructions dans la description dans le référentiel) ;
Dans les paramètres, vous pouvez sélectionner les effets d'ouverture, la superposition de couleur et transparente et certains autres paramètres visuels.

Le plugin Fancybox propose une version premium pour 12 dollars + un abonnement ultérieur de 4 dollars par an. Parmi les fonctionnalités qui ressortent figurent : des options de design supplémentaires et le déclenchement automatique du popup, des effets de diaporama, l'affichage du titre au survol, etc. Si vous souhaitez étendre les fonctions de base, lisez-le plus en détail. Pour moi personnellement version gratuite Assez avec ta tête.

Également sur la page officielle du module, il existe quelques options pour lesquelles Fancybox ne fonctionne pas dans WordPress, celles-ci pourraient être :

conflits avec des solutions similaires similaires ;
manque de wp_footer() dans le pied de page ;
quelques problèmes avec les plugins : All in One SEO Pack, jQuery Updater, ainsi que Google Analytics sur WordPress et quelques autres ;
conflits avec les modèles - souvent les modèles premium ont leur propre script pour un effet similaire (je discuterai de cette situation ci-dessous) ;

De plus, le référentiel sur wordpress.org propose une liste de contrôle sur la façon de vérifier erreurs potentielles et quelles mesures doivent être prises pour les corriger. C'est l'une des rares extensions où autant de temps est consacré problèmes possibles et les raisons du mauvais fonctionnement. Si quelque chose de similaire vous arrive, je vous conseille de le lire.

Installation et configuration d'Easy Fancybox

Le processus d'installation est standard - téléchargez-le manuellement à partir d'ici ou activez-le via le panneau d'administration. La lightbox se connectera immédiatement aux images et galeries disponibles sur le site (les liens d'ouverture des images doivent être définis en tant que fichiers multimédias).

Tous les paramètres disponibles pour l'édition se trouvent dans la section « Paramètres » - « Fichiers multimédias » sous le contenu principal.

Il y a plusieurs sous-points ici :

Média : sélectionnez les types de fichiers avec lesquels le module fonctionnera.
Superposition - couleur/transparence et sortie de superposition (assombrissant l'arrière-plan).
Fenêtre : options de cadre, de titre, de bouton de fermeture et de comportement de la fenêtre.
Divers (divers) - options d'accès automatique et de compatibilité avec les thèmes/plugins.
Images - définit les extensions d'image à déclencher, certaines fonctionnalités de conception et des galeries.

En général, je vous conseille de parcourir brièvement toutes les options afin de savoir ce qu'il y a. Pour être honnête, dans la plupart des cas, je ne change rien ici - tout fonctionne bien par défaut. À côté de certains éléments se trouvent des liens tels que « Plus d'options », indiquant les fonctionnalités supplémentaires existantes dans la version premium.

Vous trouverez beaucoup de choses intéressantes dans la description officielle du plugin Easy Fancybox - faites défiler jusqu'à la section FAQ. Il s'agit d'appeler un PDF, d'ouvrir un formulaire de contact, une fenêtre modale classique, vidéo Youtube et ainsi de suite.

Désactiver le script sur la page

L'un des modèles premium avec lesquels j'ai travaillé avait un mécanisme de lightbox interne, donc afin d'éviter les conflits, il était nécessaire que Fancybox ne se charge qu'à un certain endroit du site.

Ceci est implémenté via le code suivant dans le fichier de fonctions du thème (functions.php) :

Ceci vérifie!is_page_template('page-menu.php') avec un modèle de page séparé, mais vous pouvez utiliser n'importe quel autre opérateur conditionnel - is_single, is_home, is_category, etc. Définir la variable sur False désactive le module.

Total. J'utilise presque toujours le plugin Fancybox dans WordPress lorsque j'ai besoin d'ajouter une simple lightbox aux images et aux galeries. En règle générale, il fonctionne immédiatement après l'installation, n'entre pas en conflit avec d'autres scripts, comporte quelques paramètres et est mis à jour régulièrement. En principe, on n’a besoin de rien de plus.

D'ailleurs, si vous utilisez d'autres solutions à ce problème, écrivez, il serait intéressant d'essayer autre chose.

wordpressinside.ru

Introduction

L'installation prête à l'emploi de WordPress dispose d'excellents outils pour travailler avec des photos, placer des photos et d'autres fichiers multimédias dans les documents du site. Avec le développement de WordPress, l’affichage des photos et galeries sur le site s’améliore également. Il existe presque toutes les options pour afficher les photos : création de galeries avec redimensionnement automatique des vignettes, affichage des photos sur une nouvelle page et dans un nouvel onglet, modification de la taille des photos, etc. Il y a de tout, mais il n'y a pas d'affichage des photos dans les fenêtres modales - des fenêtres qui apparaissent dans une fenêtre séparée en haut de l'article.

Plugin de fenêtre modale Easy FancyBox pour les fichiers multimédias du site WordPress

WordPress n'est pas dépourvu de plugins qui améliorent l'affichage des photos et autres fichiers multimédias dans les articles du site. Malheureusement, tous les plugins ne sont pas mis à jour à temps et ne s'adaptent pas aux mises à jour du système. En conséquence, les fenêtres modales cessent de fonctionner et le plugin doit être réinstallé.

Dans l'article « 14 plugins pour l'effet Lightbox sur un site WordPress », j'ai écrit sur les plugins popup. J'ai installé et réinstallé la plupart d'entre eux jusqu'à ce que j'essaye le plugin Easy FancyBox. Nous en reparlerons plus loin.

Téléchargez et installez le plugin

On installe le plugin depuis le panneau d'administration du site, sur l'onglet Plugin → Ajouter nouveau. Si une telle installation n'est pas possible, téléchargez le plugin depuis la page officielle du plugin : https://wordpress.org/plugins/easy-fancybox/, décompressez et téléchargez dans le répertoire /plugins.

Après avoir activé le plugin, il n'apparaît pas dans la console sous forme de ligne distincte. Vous pouvez saisir ses paramètres depuis l'onglet Plugins → Easy FancyBox → Paramètres ou Fichiers multimédias.

Intégration organique des paramètres d'Easy FancyBox dans Réglages généraux Les fichiers multimédias WordPress captivent et augmentent la confiance dans le plugin.

Après avoir ouvert la page des paramètres, nous voyons que tous les paramètres minimaux nécessaires sont définis. Il existe de nombreux paramètres, mais lorsque vous les utilisez, vous devez vous rappeler que certains d'entre eux augmenteront le chargement des pages côté client.

Après avoir activé le plugin, toutes les photos (jpeg, png, gif) insérées dans les articles seront affichées dans des fenêtres modales en haut de l'article si :

Lors de l'insertion d'une photo, un lien est fourni vers le fichier multimédia, et non vers la page de pièce jointe ;
La taille de la photo a été réduite par rapport à l'original.

Peut être configuré :

Choix de trois effets pour ouvrir/fermer une fenêtre modale ;
Possibilité de sélectionner une fenêtre en mode superposition ;
Affichage d'une galerie miniature sur les pages du site Internet ;
Visualisez la galerie en faisant défiler la molette de la souris.

Paramètres faciles du plugin FancyBox

En conclusion, il convient de noter que dans les paramètres du plugin Easy FancyBox, il y a l'inclusion de fenêtres modales pour les vidéos de YouTube, Dailymotion, Vimeo, Documents PDF, SWF, SVG. Vous pouvez créer un iFrame pour une autre ressource. Cependant, ces options ne sont que versions professionnelles pour 10 $ pour un domaine.

©www.wordpress-abc.ru

www.wordpress-abc.ru

Souvent, vous avez besoin de créer un formulaire de contact pop-up efficace, il peut s'agir d'une application, ou de votre élément préféré dans l'en-tête du site « Commander un rappel »
Cela peut être fait avec seulement deux plugins,
et formulaire de contact

Tout est recherché et installé comme d'habitude à partir du référentiel officiel WordPress - il n'y a pas de secrets.
Passons aux paramètres,
Nous allons d’abord configurer le plugin
allez dans Paramètres - Fichiers multimédia et cochez la case dans Contenu en ligne (je vous conseille de décocher la case dans Images, car la plupart des thèmes ont déjà leurs propres fenêtres pop-up et leurs propres styles, et afin d'éviter les conflits nous les supprimons)
» data-lazy-original=»http://wpwh.ru/wp-content/uploads/2015/04/fansybox-300×171.jpg» alt=»fansybox» largeur=»300″ hauteur=»171″ / >

C'est tout avec ce plugin. Passons à la création du formulaire lui-même. Accédez au plugin Formulaire de contact Créer nouvel uniforme et ajoutez les champs dont vous avez besoin. En principe, le plugin lui-même génère un formulaire de test, ce qui est largement suffisant pour certains.

Nous avons tous terminé la configuration du plugin. Nous allons créer le bouton lui-même.
pour le tester, allez sur n'importe quel message et collez ce code

Si directement dans le code du modèle, utilisez ce code

pour rendre le bouton beau, vous pouvez ajouter styles.button1 Ce code à titre d'exemple, vous pouvez écrire votre propre style, il doit être copié et collé dans le fichier style.css de votre thème

Le code complet ressemblera à ceci

Un exemple de la façon dont tout cela fonctionne peut être vu sur le site Web http://antiseptik.tv/. Il y a un bouton vert dans l'en-tête.

Pour ceux qui obtiennent l’erreur « Le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard » (cela arrive sur les dernières versions du moteur WordPress), il est recommandé de changer la classe dans le lien :

changer pour :

wpwh.ru

Installation et réglages

L'installation est standard et le plugin lui-même peut être téléchargé à partir du référentiel gratuit Plugins WordPress. Eh bien, ou installez directement à partir du panneau d'administration comme je l'ai décrit dans cet article. Après l'installation et l'activation, le plugin fonctionnera sans aucun paramètre supplémentaire, ce que l'on appelle « prêt à l'emploi ». Tous les fans de « bricolage et peaufinage » devraient se rendre dans leur section Paramètres - Fichiers multimédias. C'est ici qu'Easy FancyBox crée son paramètres additionnels. Tous sont divisés en plusieurs sections principales :

Médias— liste de tous les formats et types de fichiers pris en charge. Par défaut, seules les images sont incluses, mais vous pouvez inclure des PDF, YouTube, Vimeo, iFrames et autres.

Recouvrir— paramètres d'arrière-plan de la page lors de l'affichage des images. Vous pouvez le supprimer complètement ou définir votre propre couleur et transparence. Désactivez la fermeture de l'image en cliquant sur l'arrière-plan.

Fenêtre- tout ce qui concerne les paramètres de la fenêtre avec l'image elle-même. Couleur, dimensions, transparence, cadre, etc.

Images- définissez toutes les extensions de format d'image dont vous avez besoin. Dans la sous-section Comportement personnaliser l'animation de sortie. Configurez l'affichage du curseur de la souris lors du survol d'une image. Déterminez si vous devez afficher un titre et prendre en charge les galeries WordPress standard ? Si vous utilisez des galeries tierces, il est préférable de désactiver la prise en charge pour éviter la sortie d'images en double.

Si, en plus des images dans la première section, vous spécifiez, par exemple, d'autres types de fichiers, des paramètres supplémentaires pour ceux-ci apparaîtront dans les paramètres. Par exemple, pour une vidéo YouTube, vous pouvez spécifier les dimensions de la fenêtre.

Et enfin, si les possibilités ici semblent peu nombreuses, l'auteur suggère d'acheter une extension premium pour le plugin pour 10 euros, qui ajoutera encore plus de fonctionnalités.

wpnice.ru

FancyBox For WordPress : affichez magnifiquement des images et des galeries

Installons le plugin pour notre site à partir du référentiel WordPress.

Nous activons FancyBox pour WP et il commence immédiatement à fonctionner, en appliquant ses paramètres de base aux images. Nous pouvons le vérifier en allant sur notre blog, en l'actualisant et en cliquant sur l'une des images disponibles.

Dans ce cas, l'image est redimensionnée à une grande taille et placée dans une fenêtre contextuelle au-dessus du reste du contenu, qui est légèrement assombrie. Pour fermer la fenêtre modale, vous pouvez cliquer soit sur la croix dans le coin supérieur droit, soit n'importe où sur la page en dehors de l'image.

En plus des options prédéfinies, FancyBox For WordPress propose également des paramètres plus flexibles. Nous pouvons les trouver dans la console VI, dans l'élément de menu « Paramètres » - « FancyBox for WP ». En cliquant sur le lien, on voit un grand nombre d'onglets chargés d'éditer certains paramètres. Ils sont principalement associés à la modification de l’apparence des images. Malheureusement, le plugin est entièrement en anglais. Mais maintenant, nous examinerons tous les points les plus intéressants dont vous pourriez avoir besoin si les paramètres par défaut ne répondent pas à vos besoins.

L'onglet de départ est « Info ». Voici des liens vers des informations sur les développeurs et le produit dans son ensemble. Les créateurs du plugin disent que si vous ne souhaitez pas approfondir tous les paramètres proposés, alors même sans cela, la version de base des paramètres donne un résultat assez attractif. Ils vous demandent également de faire attention au fait que si après l'édition vous ne remarquez pas immédiatement les changements, cela ne signifie souvent pas que FancyBox For WordPress ne fonctionne pas. Si un plugin de mise en cache est installé, tel qu'Hyper Cache, vous devez vider le cache après avoir enregistré les modifications ou désactiver le plugin pendant que vous travaillez avec les paramètres.

L'onglet suivant est "Apparence". Il s'agit d'une page où nous pouvons personnaliser les options de base pour l'apparence des fenêtres pop-up. Si la case est cochée, la fonction est activée ; sinon, elle est désactivée :

"Bordure" - choisissez si un cadre sera affiché autour de la fenêtre modale. La valeur par défaut est non. Si nous sélectionnons l'option « oui », un champ supplémentaire apparaît pour sélectionner la couleur de la bordure, au format hexadécimal (#000000). Il n'existe aucun moyen d'ajuster la largeur du cadre ;
"Bouton de fermeture" - nous déterminons si la lightbox aura un bouton pour fermer la fenêtre (une croix) et où il sera situé (Gauche (gauche) / Droite (droite) / Bas (en bas) / Haut (en haut)). Valeur de départ – en haut à droite ;
"Padding" - cet élément est responsable de la définition dans FancyBox For WordPress de la couleur et de la largeur du remplissage depuis le bord de la fenêtre contextuelle jusqu'à l'image qui y est placée. La valeur par défaut est le blanc, 10 pixels ;
« Options de superposition » - définissez les caractéristiques de l'arrière-plan assombrissant qui apparaît sous l'image contextuelle, couvrant le contenu de la page entière. Initialement défini : comme couleur – gris, comme transparence (opacité) – 0,3. La propriété de transparence mesure entre 0,0 et 1,0, et plus la valeur est faible, plus l'arrière-plan sera transparent. Ainsi, si vous souhaitez masquer complètement le contenu restant derrière la fenêtre modale, vous pouvez sélectionner l'opacité : 1 ;
"Titre" - nous attribuons si la légende de l'image (c'est-à-dire la valeur de l'attribut titre de l'image) sera affichée et comment. Ici, vous pouvez configurer l'emplacement du titre par rapport au remplissage de la fenêtre pop-up (Inside/Outside/Over) et sa couleur. Avec les valeurs « Inside » et « Outside », le texte sera placé respectivement dans la marge inférieure de la fenêtre modale et en dessous. Et lorsque vous sélectionnez l'option « Au-dessus », le titre sera situé au-dessus du retrait inférieur, au-dessus de l'image elle-même sur un fond translucide sombre ;
"Flèches de navigation" - choisissez d'afficher ou non les flèches de navigation. Ils apparaissent lorsque vous survolez une image.

Allez dans l'onglet "Animations". Ici, nous allons configurer les fonctions chargées de contrôler l'animation des fenêtres pop-up :

Veuillez noter que ces paramètres ne peuvent être appliqués qu'aux fenêtres modales d'ouverture/fermeture dont le paramètre « Type de transition » est défini sur élastique.

Le cinquième onglet est « Galeries ». Il s'agit d'un niveau avancé de paramètres concernant les galeries d'images :

« Créer une galerie pour toutes les images de la page (par défaut) » : créez une galerie pour toutes les images de la page (par défaut). Autrement dit, s'il y a plusieurs images sur la page, elles seront par défaut combinées dans une galerie par le plugin. De ce fait, en ouvrant l'un d'eux dans une fenêtre modale, on peut visualiser tous les autres en faisant défiler les images ;
"Ne regroupez pas automatiquement les images dans la galerie (utilisez ceci si vous souhaitez créer des galeries manuellement avec le rapport attribut)" - ne fusionne pas automatiquement les images dans la galerie (utilisez cette option si vous souhaitez créer une galerie manuellement à l'aide de l'attribut rel). Je vous propose d'apprendre plus en détail comment utiliser cette option FancyBox For WordPress en pratique.

Disons que votre page contient du matériel classiquement divisé en plusieurs blocs sémantiques. Par exemple : dans l'un d'eux, vous placez des images pour illustrer le processus de création Page de destination sur WP, et dans ce qui suit - des exemples des pages de vente les plus réussies. Et vous souhaitez que ces deux groupes d'images ne soient pas mélangés dans une seule fenêtre modale, mais soient affichés dans des lightbox différentes. Pour mettre en œuvre votre plan, sélectionnez d’abord l’option du plugin « Ne pas regrouper automatiquement les images dans la galerie ».

Pour le deuxième groupe de fichiers multimédia, répétez les mêmes étapes, mais avec une valeur rel différente, par exemple : rel = "gal2";

"Créez une galerie pour chaque publication (ne fonctionnera que si votre thème utilise classe = « poste» sur chaque publication, ce qui est courant dans WordPress) » - créez une galerie pour chaque publication (ne fonctionnera que si votre thème utilise la classe « post » pour chaque publication, ce qui est typique de WordPress) ;
« Utilisez une expression personnalisée pour appliquer FancyBox » - appliquez une expression jQuery personnalisée pour configurer FancyBox For WordPress au cas où les options proposées par le plugin ne vous conviennent pas et que vous avez besoin de paramètres individuels plus flexibles. Il vaut mieux ne pas utiliser cette option.

Il est également préférable de ne pas modifier les onglets suivants : ils ne seront compréhensibles et utiles que pour les utilisateurs avancés.

Mais on ne peut s’empêcher de prêter attention au fait que des plaintes d’utilisateurs apparaissent périodiquement sur Internet concernant la vulnérabilité du plugin, ce qui conduit à l’infection de sites par des virus même sans accès à la zone d’administration et à l’hébergement de WordPress. Si vous êtes confronté au problème du piratage de votre ressource Web, il est important de vérifier et de nettoyer les virus du site le plus rapidement possible. Je souhaite vous proposer une option alternative pour afficher des images dans des lightbox. Et puis nous ferons connaissance avec le plugin qui est le principal concurrent de FancyBox for VP. C'est ce qui est utilisé sur les pages de mon blog.

Easy FancyBox : principales fonctionnalités du plugin

Ses différences caractéristiques sont :

Ou, dans les paramètres du plugin, dans le bloc « Galerie », dans le champ « Autogallery », sélectionnez « All in one gallery » ;

pro-wordpress.ru

Bonjour les amis! Aujourd'hui, nous allons parler de la façon de créer une magnifique galerie de photos à l'aide d'un plugin qui concevra magnifiquement des photos, des vidéos et d'autres fichiers multimédias en quelques minutes.

A partir de cet article vous apprendrez comment installer le plugin Easy FancyBox, le configurer correctement sur un site sous WordPress, et découvrirez également d'autres solutions intéressantes dans un autre article - Galerie de photos sur Wordpress - quoi de plus simple ?!

D’ailleurs, je suis désolé de ne pas avoir écrit depuis longtemps, je n’ai pas du tout eu le temps de bloguer ! J'ai obtenu mon permis de travail, je l'appelle - un jour de honte par an. Maintenant, vous pouvez vous détendre et continuer à travailler !

Ma fille nouveau-née, Yana, a constamment mal au ventre. Alors ma femme et moi souffrons, on se balance toute la nuit, et le matin on se couche, c'est des coliques, on dit que l'estomac s'y habitue – si seulement il revenait vite à la normale ! Eh bien, nous survivrons à ça aussi...

J'ai également terminé le travail sur la mise en page adaptative d'un site Web client, ou plutôt d'une boutique en ligne - dans l'ensemble, cela s'est bien passé. De plus en plus de sites adaptatifs apparaissent sur Internet, ce qui me rend personnellement très heureux : la qualité des ressources s'améliore, c'est merveilleux !

J'écrirai plus en détail mon actualité dans un article séparé, j'attends également avec impatience un nouveau concours avec des prix sympas ! Abonnez-vous à mon blog pour rester toujours à jour. Revenons maintenant au sujet de la création d'une galerie...

Installation du plugin Easy FancyBox pour WordPress

La galerie photo est installée en standard, via le panneau d'administration. Allez dans la section « Plugins » et cliquez sur « Ajouter un nouveau ».
Copiez le nom des plugins dans la barre de recherche et cliquez sur « rechercher ». Sélectionnez notre plugin dans la liste et cliquez sur « Installer ».

Vous pouvez accéder directement à votre site et voir comment fonctionne le plugin. Génial, n'est-ce pas ?! Désormais, toutes les photos ont un design chic. Ce qui fait très plaisir !

Paramètres faciles du plugin FancyBox

En principe, tout est déjà configuré par défaut, mais vous pouvez jouer un peu et personnaliser le plugin à votre goût. Allons ici : Et allez à réglages fins Boîte fantaisie facile :
Ici, vous pouvez choisir pour quels types de fichiers activer la prise en charge des plugins, concevoir visuellement des fenêtres modales, ainsi que d'autres problèmes techniques.

De plus, vous pouvez personnaliser l'arrière-plan lors de l'affichage de l'image, ainsi que la couleur et la transparence. Vous pouvez supprimer la croix, qui remplit la fonction de fermeture de l'image, et la clé pour parcourir l'image. Après cela, l'utilisateur pourra faire défiler les images avec la molette de sa souris.

Comment créer une galerie de photos Easy FancyBox pour WordPress

Voyons maintenant comment créer une galerie de photos à l'aide de ce plugin. Pour ce faire, allez éditer la publication et cliquez sur « Ajouter un fichier multimédia ».

Ouvrez la bibliothèque de fichiers et cliquez sur le bouton « Créer une galerie ».
Ensuite, dans la bibliothèque de fichiers, sélectionnez les images que nous voulons voir dans la galerie. Cliquez sur l'image et une coche apparaîtra à côté d'elle. Si nécessaire, vous pouvez télécharger d'autres photos. Au bas de la page, vous pouvez voir le nombre total de fichiers sélectionnés.

Toutes les images sélectionnées seront partie intégrante galeries. Pour chaque image individuelle, vous pouvez proposer un titre, une légende et créer une description.

Après tous les réglages, cliquez sur « Créer une nouvelle galerie ». Dans la section qui apparaît, vous pouvez créer une numérotation distincte en déplaçant les images par endroits. Dans les paramètres de la galerie, vous pouvez sélectionner le nombre de colonnes. Eh bien, en principe, il n'y a rien de compliqué ici, je pense que vous comprendrez...

C'est tout! Nous venons d'installer la galerie de photos Easy FancyBox pour WordPress et maintenant nous devrions avoir tout beau. Je me demande si vous utilisez d'autres plugins similaires ? Partagez votre expérience !

Si vous avez des questions, écrivez-les dans les commentaires ! Je suis contente que tu lises mon blog - Respect et respect à toi

savme.ru

FancyBox est un plugin jQuery qui vous permet de créer des galeries de photos et d'afficher d'autres contenus dans de belles fenêtres modales. Si vous prévoyez une galerie de photos sur votre site Web et placez du contenu dans des fenêtres modales, faites attention à ce script.

Nous connectons les plugins jquery, jquery.easing et jquery.fancybox, feuille de style jquery.fancybox.css

Nous créons une galerie de photos.
Tout d’abord, nous devons appeler Fancybox et spécifier les objets sur lesquels nous allons l’accrocher. Entre les balises head nous ajoutons :

$(document).ready(function() (
$("une.gallery").fancybox();
});

FancyBox - Galerie de photos
Image unique

Groupe de photos (galerie d'images)

Il faut juste faire attention au fait que les photos appartiennent à la même galerie ; elles doivent toutes avoir la même classe (dans l'exemple class="gallery") et l'attribut rel (dans l'exemple rel="group"). Dans l’exemple, la première photo n’a pas d’attribut rel. L'attribut title est facultatif, mais s'il est présent, il servira de légende à la photo.

Examinons maintenant les options que nous pouvons définir lors de l'appel de Fancybox et qui affectent l'apparence et le comportement de la galerie de photos. Pour notre expérience, nous allons créer un code HTML similaire (je ne donnerai pas d'exemple, il est absolument identique à celui donné ci-dessus) à la seule différence que toutes les balises Attribuons la classe gallery2 et écrivons la fonction suivante (que nous placerons également avec les balises head) :

$("a.gallery2").fancybox(
{
"rembourrage" : 20,
"imageScale" : faux,
"zoomOpacity" : faux,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,
"largeur du cadre" : 700,
"Hauteur du cadre" : 600,
"overlayShow" : vrai,
"overlayOpacity" : 0.8,
"hideOnContentClick" : faux,
"centerOnScroll" : faux

Qu'est-ce que tout cela veut dire:
rembourrage - indentation du contenu (photos) à partir des bords de la fenêtre. Dans la démo, je l'ai réglé sur 20px, ce qui, bien sûr, est un peu trop, mais c'est clair ;
imageScale - prend la valeur true - le contenu (images) est mis à l'échelle pour s'adapter à la fenêtre, ou false - la fenêtre est étirée pour s'adapter au contenu. Par défaut - vrai ;
zoomOpacity - change la transparence du contenu pendant l'animation (false par défaut). N'oubliez pas que la transparence est définie entre 0 et 1 ;
zoomSpeedIn - vitesse d'animation en ms lors d'un zoom sur une photo (0 par défaut) ;
zoomSpeedOut - vitesse d'animation en ms lors d'un zoom arrière sur une photo (0 par défaut) ;
zoomSpeedChange - vitesse d'animation en ms lors du changement de photo (par défaut 0) ;
frameWidth - largeur de la fenêtre, px (425px - par défaut) ;
frameHeight - hauteur de la fenêtre, px(355px - par défaut) ;
overlayShow - (true par défaut) si vrai, la page sous la fenêtre contextuelle sera masquée. La couleur est définie dans jquery.fancybox.css - div#fancy_overlay
overlayOpacity - Opacité de l'ombrage (0,3 par défaut) ;
hideOnContentClick - Si vrai, ferme la fenêtre lorsque vous cliquez sur n'importe quel point (sauf pour les éléments de navigation). Vrai par défaut ;
centerOnScroll - Si vrai, la fenêtre est centrée sur l'écran lorsque l'utilisateur fait défiler la page.
Comme nous le voyons, nous avons entre nos mains un outil très flexible pour créer des galeries de photos et plus encore...

Mais ce merveilleux plugin ne concerne pas seulement les galeries. Grâce à Fancybox, nous pouvons facilement afficher non seulement des photos dans de belles fenêtres, mais également d'autres contenus.
Vidéo de Youtube (rutube, video.mail, etc.)

Vidéo de youtube.com dans une fenêtre modale

Tout est très simple. Nous sommes dans le tag spécifié la classe de galerie, avec l'identifiant #testube dans l'attribut href. Le code de la vidéo YouTube a été placé dans le conteneur div#testube.

On va le chercher sur Google ?

C'est vrai qu'il y a un « mais ». La classe doit être nommée iframe. En conséquence, nous devons attacher Fancybox à cette classe

$("a.iframe").fancybox(
{
"frameWidth" : 800, // largeur de la fenêtre, px (425px - par défaut)
"frameHeight" : 600 // hauteur de la fenêtre, px(355px - par défaut)
});

Fenêtres modales avec leur propre contenu :

Implémenté de la même manière que l'exemple précédent :

Pleurer

Le fichier content.html contient du code htm, qui sera affiché dans la fenêtre modale. Veuillez noter que le fichier content.html lui-même ne contient aucun style CSS ni lien vers ceux-ci. Sur la page de démonstration, entre les balises head, j'ai créé un class.green et du texte dans une fenêtre modale (enfermée dans

) s'est avéré vert.

Nous pouvons également spécifier php dans l'attribut href. Mettons en œuvre cela. Pour ce faire, créons un simple fichier php content2.php :

Vous avez ouvert la fenêtre n°

Et sur la page avec nos exemples nous écrirons :

Votre contenu dans la fenêtre modale option 2.
Première fenêtre

Deuxième fenêtre

On voit que les liens ont un paramètre GET, et selon le numéro de ce paramètre, content2.php peut effectuer n'importe quelle action. Ainsi, le contenu de la base de données peut être affiché dans une fenêtre modale, un formulaire de feedback peut être implémenté, etc. . et ainsi de suite.

Parlons maintenant d'une grande nuance concernant l'affichage de votre contenu dans les fenêtres modales.
Parce que les moteurs de recherche ne comprennent pas JavaScript, pour eux nos fenêtres modales ne sont que nouvelle page. Nous devons nous assurer qu'aucun moteur de recherche ne donne à quiconque un lien direct vers une telle page, mais en même temps, le contenu des fenêtres modales peut être correctement indexé.
Tu peux le faire:

Votre contenu dans la fenêtre modale option 2 avec duplication.
Première fenêtre

Deuxième fenêtre

Où for_spider.php est une page de site normale, avec des styles et des scripts joints. Sur cette page, nous afficherons le même contenu que dans la fenêtre modale. Laissez-le être indexé par les moteurs de recherche et laissez-le être visité par des visiteurs inadéquats avec javascript désactivé. . Et pour les gens normaux, nous ferons une substitution. AVEC utiliser jquery nous remplacerons for_spider.php par content2.php. Entre les balises head, après "$(document).ready(function() (" nous écrirons le code suivant :

Url = $("a.modalbox").attr("href").replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"largeur du cadre" : 400,
"Hauteur du cadre" : 400

Que faisons-nous ici? Aux balises nous « retirons » le lien, remplaçons « for_spider » par « content2 » et l'ajoutons à la variable url. Ensuite, nous remplaçons l'attribut href des mêmes balises par un nouveau (la valeur de la variable url). Eh bien, nous sommes déjà familiers avec le lancement du plugin Fancybox. Dès qu'un visiteur visite notre site, tous les liens vers for_spider.php sont convertis en content2.php - vers nos fenêtres modales.

C'est tout pour aujourd'hui, c'était une longue leçon, mais je pense que c'était utile. Merci de votre attention et bon week-end !