{"id":27401,"date":"2021-05-08T16:30:00","date_gmt":"2021-05-08T13:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27401"},"modified":"2021-10-17T17:24:09","modified_gmt":"2021-10-17T14:24:09","slug":"como-agregar-un-efecto-de-imagen-de-zoom-en-las-imagenes-de-su-sitio-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-agregar-un-efecto-de-imagen-de-zoom-en-las-imagenes-de-su-sitio-web\/","title":{"rendered":"C\u00f3mo agregar un efecto de imagen de zoom en las im\u00e1genes de su sitio web"},"content":{"rendered":"<p>\u00bfQuieres agregar un efecto de imagen de zoom en tu sitio web? Agregar un efecto de zoom en la imagen es un comportamiento com\u00fan hoy en d\u00eda, especialmente para los sitios web de venta de productos en l\u00ednea de moda. En este art\u00edculo, le mostramos c\u00f3mo podemos agregar f\u00e1cilmente un efecto de imagen de zoom.<\/p>\n<p>Este efecto tambi\u00e9n se denomina ampliaci\u00f3n de imagen o im\u00e1genes ampliadas. Con este efecto, sus visitantes pueden ver una gran parte de su imagen al pasar el mouse.<\/p>\n<p>Despu\u00e9s de seguir este tutorial, obtendr\u00e1 el resultado final de la siguiente manera:<\/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=\"C\u00f3mo agregar un efecto de imagen de zoom en las im\u00e1genes de su sitio web\" ><\/a><\/p>\n<h3>Empezando<\/h3>\n<p>Para este tutorial, usaremos este <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery Plugin. Un usuario puede instalar este complemento a trav\u00e9s de npm, bower o CDN. Usar\u00edamos la CDN para incluir los archivos de complementos.<\/p>\n<p>Cree un archivo <code>index.html<\/code>y agregue los archivos JS y CSS del complemento.<\/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>Agregar efecto de imagen de zoom<\/h3>\n<p>Para agregar el efecto de zoom, necesita dos versiones de su imagen: vista previa y original. A continuaci\u00f3n se muestran los enlaces para im\u00e1genes de ejemplo.<\/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\">Imagen de vista previa<\/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\">Imagen original<\/a><\/li>\n<\/ul>\n<p>Una vez que est\u00e9 listo con sus im\u00e1genes en ambas versiones, debe escribir su <code>img<\/code>etiqueta 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>Despu\u00e9s de agregar el c\u00f3digo anterior, llame al m\u00e9todo de zoom en la imagen de la siguiente manera:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Aqu\u00ed ponemos la posici\u00f3n a la derecha. Puede ser superior, izquierda, interior, inferior, etc. Puede leer acerca de todas las opciones proporcionadas por este complemento en su <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentaci\u00f3n<\/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>Tambi\u00e9n podemos agregar la galer\u00eda de im\u00e1genes con el efecto de zoom usando este complemento. Obtendr\u00e1 el c\u00f3digo de muestra para agregar la galer\u00eda desde <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la<\/a> p\u00e1gina <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">oficial<\/a>. Consulte tambi\u00e9n los <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ejemplos<\/a> de <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">demostraci\u00f3n<\/a> de este complemento.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-implementar-jquery-datepicker-con-timepicker\/\" title=\"C\u00f3mo implementar jQuery Datepicker con Timepicker\">C\u00f3mo implementar jQuery Datepicker con Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-cargar-recortar-y-cambiar-el-tamano-de-una-imagen-usando-jquery-y-php\/\" title=\"C\u00f3mo cargar, recortar y cambiar el tama\u00f1o de una imagen usando jQuery y PHP\">C\u00f3mo cargar, recortar y cambiar el tama\u00f1o de una imagen usando jQuery y PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfDesea agregar un efecto de imagen de zoom en su sitio web? Agregar efecto de zoom en la imagen es un comportamiento com\u00fan hoy en d\u00eda, especialmente para productos de moda en l\u00ednea<\/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":[253],"tags":[849],"class_list":["post-27401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/27401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=27401"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/27401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=27401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=27401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=27401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}