{"id":27145,"date":"2021-05-08T15:52:00","date_gmt":"2021-05-08T12:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27145"},"modified":"2021-10-18T04:16:12","modified_gmt":"2021-10-18T01:16:12","slug":"como-adicionar-efeito-de-imagem-de-zoom-as-imagens-do-seu-site","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-efeito-de-imagem-de-zoom-as-imagens-do-seu-site\/","title":{"rendered":"Como adicionar efeito de imagem de zoom \u00e0s imagens do seu site"},"content":{"rendered":"<p>Quer adicionar efeito de imagem de zoom ao seu site? Adicionar efeito de zoom \u00e0 imagem \u00e9 um comportamento comum hoje em dia, especialmente para sites de moda, de venda de produtos online. Neste artigo, mostramos como podemos adicionar facilmente o efeito de zoom da imagem.<\/p>\n<p>Este efeito tamb\u00e9m \u00e9 denominado ampliador de imagem ou imagens ampliadas. Usando este efeito, seus visitantes podem ver uma grande parte de sua imagem ao passar o mouse.<\/p>\n<p>Depois de seguir este tutorial, voc\u00ea obter\u00e1 o resultado final da seguinte forma:<\/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=\"Como adicionar efeito de imagem de zoom \u00e0s imagens do seu site\" ><\/a><\/p>\n<h3>Come\u00e7ando<\/h3>\n<p>Para este tutorial, usaremos este <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plug-<\/a> in <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery. Um usu\u00e1rio pode instalar este plugin atrav\u00e9s do npm, bower ou CDN. Usar\u00edamos o CDN para incluir os arquivos de plug-in.<\/p>\n<p>Crie um arquivo <code>index.html<\/code>e adicione os arquivos JS e CSS do 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>Adicionar efeito de imagem de zoom<\/h3>\n<p>Para adicionar o efeito de zoom, voc\u00ea precisa de duas vers\u00f5es de sua imagem &#8211; visualiza\u00e7\u00e3o e original. Abaixo est\u00e3o os links para imagens de exemplo.<\/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\">Imagem de visualiza\u00e7\u00e3o<\/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\">Imagem original<\/a><\/li>\n<\/ul>\n<p>Quando estiver pronto com suas imagens em ambas as vers\u00f5es, voc\u00ea precisa escrever sua <code>img<\/code>tag como:<\/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>Depois de adicionar o c\u00f3digo acima, chame o m\u00e9todo de zoom na imagem da seguinte maneira:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Aqui, definimos a posi\u00e7\u00e3o \u00e0 direita. Pode ser superior, esquerdo, interno, inferior, etc. Voc\u00ea pode ler sobre todas as op\u00e7\u00f5es fornecidas por este plugin em sua <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documenta\u00e7\u00e3o<\/a>.<\/p>\n<p><strong>C\u00f3digo Final:<\/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>Tamb\u00e9m podemos adicionar a galeria de imagens com o efeito de zoom usando este plugin. Voc\u00ea obter\u00e1 o c\u00f3digo de amostra para adicionar galeria na p\u00e1gina <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">oficial<\/a>. Verifique tamb\u00e9m os <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">exemplos<\/a> de <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">demonstra\u00e7\u00e3o<\/a> deste plugin.<\/p>\n<h4>Artigos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-implementar-jquery-datepicker-com-timepicker\/\" title=\"Como implementar jQuery Datepicker com Timepicker\">Como implementar jQuery Datepicker com Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-fazer-upload-recortar-e-redimensionar-imagens-usando-jquery-e-php\/\" title=\"Como fazer upload, cortar e redimensionar imagens usando jQuery e PHP\">Como fazer upload, cortar e redimensionar imagens usando jQuery e PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer adicionar efeito de imagem de zoom ao seu site? Adicionar efeito de zoom na imagem \u00e9 um comportamento comum hoje em dia, especialmente para Moda, produto online<\/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":[260],"tags":[848],"class_list":["post-27145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-9","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/27145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=27145"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/27145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=27145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=27145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=27145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}