{"id":23990,"date":"2021-05-08T15:52:00","date_gmt":"2021-05-08T12:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23990"},"modified":"2021-10-18T03:17:40","modified_gmt":"2021-10-18T00:17:40","slug":"come-aggiungere-l-effetto-immagine-zoom-alle-immagini-del-tuo-sito-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-aggiungere-l-effetto-immagine-zoom-alle-immagini-del-tuo-sito-web\/","title":{"rendered":"Come aggiungere l&#8217;effetto immagine zoom alle immagini del tuo sito web"},"content":{"rendered":"<p>Vuoi aggiungere l&#8217;effetto zoom dell&#8217;immagine sul tuo sito web? L&#8217;aggiunta dell&#8217;effetto zoom sull&#8217;immagine \u00e8 un comportamento comune al giorno d&#8217;oggi soprattutto per i siti di vendita di prodotti online di moda. In questo articolo, ti mostriamo come aggiungere facilmente l&#8217;effetto zoom all&#8217;immagine.<\/p>\n<p>Questo effetto \u00e8 anche chiamato ingranditore dell&#8217;immagine o immagini ingrandite. Usando questo effetto, i tuoi visitatori possono vedere una grande porzione della tua immagine al passaggio del mouse.<\/p>\n<p>Dopo aver seguito questo tutorial, otterrai l&#8217;output finale come segue:<\/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=\"Come aggiungere l&#039;effetto immagine zoom alle immagini del tuo sito web\" ><\/a><\/p>\n<h3>Iniziare<\/h3>\n<p>Per questo tutorial, useremo questo <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery Plugin. Un utente pu\u00f2 installare questo plugin tramite npm, bower o CDN. Useremmo il CDN per includere i file del plugin.<\/p>\n<p>Crea un file <code>index.html<\/code>e aggiungi i file JS e CSS del 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>Aggiungi effetto zoom immagine<\/h3>\n<p>Per aggiungere l&#8217;effetto zoom, sono necessarie due versioni dell&#8217;immagine: anteprima e originale. Di seguito sono riportati i collegamenti per le immagini di esempio.<\/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\">Anteprima immagine<\/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\">Immagine originale<\/a><\/li>\n<\/ul>\n<p>Una volta che sei pronto con le tue immagini in entrambe le versioni, devi scrivere il tuo <code>img<\/code>tag come:<\/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>Dopo aver aggiunto il codice sopra, chiama il metodo zoom sull&#8217;immagine come segue:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Qui impostiamo la posizione a destra. Pu\u00f2 essere in alto, a sinistra, all&#8217;interno, in basso, ecc. Puoi leggere tutte le opzioni fornite da questo plugin nella loro <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentazione<\/a>.<\/p>\n<p><strong>Codice finale:<\/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>Possiamo anche aggiungere la galleria di immagini con l&#8217;effetto zoom usando questo plugin. Otterrai il codice di esempio per l&#8217;aggiunta della galleria dalla pagina <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ufficiale<\/a>. Dai un&#8217;occhiata anche agli <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">esempi demo<\/a> di questo plugin.<\/p>\n<h4>articoli Correlati<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/it\/come-implementare-jquery-datepicker-con-timepicker\/\" title=\"Come implementare jQuery Datepicker con Timepicker\">Come implementare jQuery Datepicker con Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/it\/come-caricare-ritagliare-e-ridimensionare-l-immagine-utilizzando-jquery-e-php\/\" title=\"Come caricare, ritagliare e ridimensionare l&#039;immagine utilizzando jQuery e PHP\">Come caricare, ritagliare e ridimensionare l&#8217;immagine utilizzando jQuery e PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuoi aggiungere l&#8217;effetto zoom dell&#8217;immagine sul tuo sito web? L&#8217;aggiunta dell&#8217;effetto zoom sull&#8217;immagine \u00e8 un comportamento comune al giorno d&#8217;oggi soprattutto per la moda, prodotto 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":[258],"tags":[846],"class_list":["post-23990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-7","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/23990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=23990"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/23990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=23990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=23990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=23990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}