Comparaison d'images Slider – Word Appuyez sur les instructions du plugin
Comparer deux images en utilisant un contrôle de curseur, ou superposer une image transparente sur une image de base
Image Comparer Slider est un plugin WordPress gratuit que nous avons créé qui vous permet de créer un slider pour comparer deux images l'une sur l'autre. En utilisant un contrôle de curseur, vous pouvez glisser à gauche pour voir la première image, à droite pour voir la seconde, et la transition en douceur entre eux. Vous pouvez télécharger ce plugin dans un fichier ZIP au bas de cette page.
Q. Pourquoi ce plugin n'est pas dans le dépôt WordPress ? Il s'agit d'un faff pour l'ajouter au dépôt même si le plugin est entièrement conforme (il a passé le test en utilisant le plugin « Check Plugin (PCP) »). Aussi, comme il est un plugin de niche dans une fonctionnalité similaire à d'autres plugins, je n'ai pas ennuyé. Cependant, je peux décider à l'avenir.
Comparaison d'images Slider instructions d'installation et d'utilisation du plugin
À partir de la section plugins WordPress, allez dans la section ‘ajouter plugin=" puis téléchargez le fichier ‘image-compare-slider.zip="
Activez le plugin. Sous l'option Médias dans la colonne de gauche, vous trouverez maintenant le panneau de contrôle du curseur d'image appelé ‘Image sliders'
Créez les deux images que vous souhaitez utiliser et téléchargez-les dans votre bibliothèque WordPress. Les images doivent avoir les mêmes dimensions (par exemple 1600px par 800px). Ils peuvent être JPG ou PNG
Ouvrez le panneau de commande Image Sliders. Pour créer un nouveau curseur :
Donnez un nom à votre curseur. ce won-t l'affecte mais vous aidera à savoir quel slider est qui
Cliquez sur la première « bibliothèque multimédia ouverte » pour sélectionner votre première image – l'image précédente
Cliquez sur la deuxième « bibliothèque multimédia ouverte » pour sélectionner votre deuxième image – l'image « après »
la section «rapport d'observation» aurait dû être remplie automatiquement en utilisant les dimensions de vos images. Si cela ne s'est pas produit, mettez simplement dans les dimensions de votre image comme un nombre, par exemple si votre image est 1600x800px, mettez ‘1600= dans la boîte de largeur et ‘800= dans la boîte de hauteur
Vous allez maintenant voir un aperçu de votre curseur
Cliquez sur ‘Enregistrer le curseur' bouton
Vous allez maintenant voir votre nouveau curseur dans la section «Sliders enregistrés». Copiez le shortcode dans votre presse-papiers
Ouvrez la page où vous souhaitez ajouter le curseur. Utiliser le bloc de shortcode Guttenberg pour ajouter le shortcode à votre page. Si vous utilisez l'éditeur WordPress classique, il suffit de visualiser le code de page et de coller le shortcode dans la page
Exemple de curseurs
Extérieur au curseur intérieur – voir à travers les murs
Cet exemple de curseur compare deux vues d'une maison Tudor : la photo aérienne extérieure et la visite virtuelle de Matterport que nous avons créée. Faites glisser le curseur à la transition de la vue extérieure à l'intérieur, révélant l'intérieur détaillé que nous avons capturé.
Transition du plan d'étage 2D au plan d'étage 3D
Cet exemple de slider compare deux types de plans de plancher : un schéma traditionnel et un design 3D. Faites glisser le curseur pour voir la différence et découvrez combien plus immersif et engageant le plan d'étage 3D est.
Ajouter des étiquettes à un plan d'étage photographique 2D
Ce slider présente un plan d'étage photographique 2D créé à partir d'une visite virtuelle de Matterport. Lorsque vous déplacez le curseur, des étiquettes de pièce apparaissent, identifiant chaque espace dans le bâtiment
