{"id":23905,"date":"2021-05-08T15:42:00","date_gmt":"2021-05-08T12:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23905"},"modified":"2021-10-18T02:20:30","modified_gmt":"2021-10-17T23:20:30","slug":"comment-ajouter-un-effet-d-image-de-zoom-sur-les-images-de-votre-site-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-effet-d-image-de-zoom-sur-les-images-de-votre-site-web\/","title":{"rendered":"Comment ajouter un effet d&rsquo;image de zoom sur les images de votre site Web"},"content":{"rendered":"<p>Voulez-vous ajouter un effet d&rsquo;image zoom sur votre site Web\u00a0? L&rsquo;ajout d&rsquo;un effet de zoom sur l&rsquo;image est un comportement courant de nos jours, en particulier pour les sites Web de vente de produits de mode. Dans cet article, nous vous montrons comment ajouter facilement un effet d&rsquo;image zoom.<\/p>\n<p>Cet effet est \u00e9galement appel\u00e9 agrandisseur d&rsquo;image ou images agrandies. En utilisant cet effet, vos visiteurs peuvent voir une grande partie de votre image en survol.<\/p>\n<p>Apr\u00e8s avoir suivi ce tutoriel, vous obtiendrez le r\u00e9sultat final comme suit\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20697-60821c0895ee4.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20697-60821c0895ee4.png\" alt=\"Comment ajouter un effet d&#039;image de zoom sur les images de votre site Web\" ><\/a><\/p>\n<h3>Commencer<\/h3>\n<p>Pour ce tutoriel, nous utiliserons ce <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plugin xZoom<\/a> jQuery Zoom Gallery. Un utilisateur peut installer ce plugin via npm, bower ou CDN. Nous utiliserions le CDN pour inclure les fichiers du plugin.<\/p>\n<p>Cr\u00e9ez un fichier <code>index.html<\/code>et ajoutez les fichiers JS et CSS du plugin.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/unpkg.com\/xzoom\/dist\/xzoom.css\" media=\"all\" \/&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/xzoom\/dist\/xzoom.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>Ajouter un effet d&rsquo;image zoom<\/h3>\n<p>Pour ajouter l&rsquo;effet de zoom, vous avez besoin de deux versions de votre image &#8211; aper\u00e7u et original. Vous trouverez ci-dessous les liens pour des exemples d&rsquo;images.<\/p>\n<ul>\n<li><a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/images\/gallery\/preview\/01_b_car.jpg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Aper\u00e7u de l&rsquo;image<\/a><\/li>\n<li><a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/images\/gallery\/original\/01_b_car.jpg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image originale<\/a><\/li>\n<\/ul>\n<p>Une fois que vous \u00eates pr\u00eat avec vos images dans les deux versions, vous devez \u00e9crire votre <code>img<\/code>balise comme suit\u00a0:<\/p>\n<pre><code>&lt;img class=\"xzoom\" src=\"img\/01_b_car.jpg\" xoriginal=\"img\/original\/01_b_car.jpg\" \/&gt;<\/code><\/pre>\n<p>Apr\u00e8s avoir ajout\u00e9 le code ci-dessus, appelez la m\u00e9thode zoom sur l&rsquo;image comme suit\u00a0:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Ici, nous mettons la position \u00e0 droite. Il peut \u00eatre en haut, \u00e0 gauche, \u00e0 l&rsquo;int\u00e9rieur, en bas, etc. Vous pouvez lire toutes les options fournies par ce plugin sur leur <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentation<\/a>.<\/p>\n<p><strong>Code final\u00a0:<\/strong><\/p>\n<pre><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/unpkg.com\/xzoom\/dist\/xzoom.css\" media=\"all\" \/&gt;\n\u00a0\n&lt;img class=\"xzoom\" src=\"img\/01_b_car.jpg\" xoriginal=\"img\/original\/01_b_car.jpg\" \/&gt;\n\u00a0\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/xzoom\/dist\/xzoom.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0});\n&lt;\/script&gt;<\/code><\/pre>\n<p>Nous pouvons \u00e9galement ajouter la galerie d&rsquo;images avec l&rsquo;effet de zoom en utilisant ce plugin. Vous obtiendrez l&rsquo;exemple de code pour ajouter une galerie \u00e0 partir de <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la<\/a> page <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">officielle<\/a>. Consultez \u00e9galement les <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">exemples<\/a> de <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d\u00e9monstration<\/a> de ce plugin.<\/p>\n<h4>Articles Li\u00e9s<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-implementer-jquery-datepicker-avec-timepicker\/\" title=\"Comment impl\u00e9menter jQuery Datepicker avec Timepicker\">Comment impl\u00e9menter jQuery Datepicker avec Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-telecharger-recadrer-et-redimensionner-une-image-a-l-aide-de-jquery-et-php\/\" title=\"Comment t\u00e9l\u00e9charger, recadrer et redimensionner une image \u00e0 l&#039;aide de jQuery et PHP\">Comment t\u00e9l\u00e9charger, recadrer et redimensionner une image \u00e0 l&rsquo;aide de jQuery et PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voulez-vous ajouter un effet d&rsquo;image zoom sur votre site Web\u00a0? L&rsquo;ajout d&rsquo;un effet de zoom sur l&rsquo;image est un comportement courant de nos jours, en particulier pour la mode, produit en ligne<\/p>\n","protected":false},"author":1,"featured_media":22117,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[255],"tags":[844],"class_list":["post-23905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/23905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=23905"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/23905\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=23905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=23905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=23905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}