{"id":23903,"date":"2021-05-08T16:24:00","date_gmt":"2021-05-08T13:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23903"},"modified":"2021-10-17T21:12:30","modified_gmt":"2021-10-17T18:12:30","slug":"kuinka-lisata-zoomauskuvaefekti-verkkosivustosi-kuviin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-zoomauskuvaefekti-verkkosivustosi-kuviin\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 zoomauskuvaefekti verkkosivustosi kuviin"},"content":{"rendered":"<p>Haluatko lis\u00e4t\u00e4 zoom-kuvatehosteen verkkosivustoosi? Zoomaustehosteen lis\u00e4\u00e4minen kuvaan on nyky\u00e4\u00e4n yleist\u00e4 k\u00e4ytt\u00e4ytymist\u00e4 etenkin muoti-, online-tuotteita myyville verkkosivustoille. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme sinulle, kuinka voimme helposti lis\u00e4t\u00e4 zoomauskuvaefektin.<\/p>\n<p>T\u00e4t\u00e4 vaikutusta kutsutaan my\u00f6s kuvan suurennus- tai suurennuskuviksi. T\u00e4m\u00e4n vaikutuksen avulla k\u00e4vij\u00e4t voivat n\u00e4hd\u00e4 suuren osan kuvastasi hiirell\u00e4.<\/p>\n<p>T\u00e4m\u00e4n opetusohjelman seuraamisen j\u00e4lkeen saat lopullisen tuotoksen seuraavasti:<\/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=\"Kuinka lis\u00e4t\u00e4 zoomauskuvaefekti verkkosivustosi kuviin\" ><\/a><\/p>\n<h3>P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n<p>T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yt\u00e4mme t\u00e4t\u00e4 <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery -laajennusta. K\u00e4ytt\u00e4j\u00e4 voi asentaa t\u00e4m\u00e4n laajennuksen kautta npm, bower tai CDN. Lis\u00e4osatiedostot sis\u00e4llytet\u00e4\u00e4n CDN: \u00e4\u00e4n.<\/p>\n<p>Luo tiedosto <code>index.html<\/code>ja lis\u00e4\u00e4 laajennuksen JS- ja CSS-tiedostot.<\/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>Lis\u00e4\u00e4 Zoom Image Effect<\/h3>\n<p>Zoom-tehosteen lis\u00e4\u00e4miseksi tarvitset kuvastasi kaksi versiota &#8211; esikatselun ja alkuper\u00e4isen. Alla on linkit esimerkiksi kuviin.<\/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\">Esikatsele kuvaa<\/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\">Alkuper\u00e4inen kuva<\/a><\/li>\n<\/ul>\n<p>Kun olet valmis kuviesi molempiin versioihin, sinun on kirjoitettava <code>img<\/code>tunniste seuraavasti:<\/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>Kun olet lis\u00e4nnyt yll\u00e4 olevan koodin, soita kuvan zoomausmenetelm\u00e4\u00e4n seuraavasti:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>T\u00e4ss\u00e4 asetamme aseman oikealle. Se voi olla yl\u00e4-, vasen-, sis\u00e4-, ala- jne. Voit lukea kaikista t\u00e4m\u00e4n laajennuksen tarjoamista vaihtoehdoista heid\u00e4n <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentaatiostaan<\/a>.<\/p>\n<p><strong>Lopullinen koodi:<\/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>Voimme my\u00f6s lis\u00e4t\u00e4 kuvagallerian zoomausefektill\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 laajennusta. Saat mallikoodin gallerian lis\u00e4\u00e4miseksi <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">viralliselta<\/a> sivulta. Katso my\u00f6s t\u00e4m\u00e4n laajennuksen <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">esittelyesimerkkej\u00e4<\/a>.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-toteuttaa-jquery-datepicker-timepickerilla\/\" title=\"Kuinka toteuttaa jQuery Datepicker Timepickerill\u00e4\">Kuinka toteuttaa jQuery Datepicker Timepickerill\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-rajata-ja-muuttaa-kuvan-kokoa-jqueryn-ja-php-n-avulla\/\" title=\"Kuinka ladata, rajata ja muuttaa kuvan kokoa jQueryn ja PHP: n avulla\">Kuinka ladata, rajata ja muuttaa kuvan kokoa jQueryn ja PHP: n avulla<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Haluatko lis\u00e4t\u00e4 zoom-kuvatehosteen verkkosivustoosi? Zoomaustehosteen lis\u00e4\u00e4minen kuvaan on nyky\u00e4\u00e4n yleist\u00e4 k\u00e4ytt\u00e4ytymist\u00e4 erityisesti muoti-verkkotuotteille<\/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":[257],"tags":[843],"class_list":["post-23903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=23903"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=23903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=23903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=23903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}