{"id":24120,"date":"2021-05-08T15:39:00","date_gmt":"2021-05-08T12:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24120"},"modified":"2021-10-17T19:25:10","modified_gmt":"2021-10-17T16:25:10","slug":"kuidas-lisada-oma-veebisaidi-piltidele-suumi-pildiefekti","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-lisada-oma-veebisaidi-piltidele-suumi-pildiefekti\/","title":{"rendered":"Kuidas lisada oma veebisaidi piltidele suumi pildiefekti"},"content":{"rendered":"<p>Kas soovite oma veebisaidile lisada suumipildi efekti? Suumiefekti lisamine pildile on t\u00e4nap\u00e4eval tavaline k\u00e4itumine, eriti veebitoodete m\u00fc\u00fcgi veebilehtede Fashion jaoks. Selles artiklis n\u00e4itame teile, kuidas saaksime h\u00f5lpsalt suumipildi efekti lisada.<\/p>\n<p>Seda efekti nimetatakse ka pildi suurendajaks v\u00f5i suurendatud pildiks. Seda efekti kasutades n\u00e4evad k\u00fclastajad h\u00f5ljumisel suurt osa teie pildist.<\/p>\n<p>P\u00e4rast selle \u00f5petuse j\u00e4rgimist saate l\u00f5pliku v\u00e4ljundi j\u00e4rgmiselt:<\/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=\"Kuidas lisada oma veebisaidi piltidele suumi pildiefekti\" ><\/a><\/p>\n<h3>Alustamine<\/h3>\n<p>Selle \u00f5petuse jaoks kasutame seda <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom galerii pistikprogrammi. Kasutaja saab selle pistikprogrammi installida npm, boweri v\u00f5i CDN kaudu. Pistikprogrammi failide lisamiseks kasutaksime CDN-i.<\/p>\n<p>Looge fail <code>index.html<\/code>ja lisage pistikprogrammi JS- ja CSS-failid.<\/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>Lisa suumi pildiefekt<\/h3>\n<p>Suumiefekti lisamiseks vajate oma pildile kahte versiooni &#8211; eelvaade ja originaal. Allpool on lingid n\u00e4iteks piltidele.<\/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\">Pildi eelvaade<\/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\">Algne pilt<\/a><\/li>\n<\/ul>\n<p>Kui olete m\u00f5lema versiooni piltidega valmis, peate oma <code>img<\/code>sildi kirjutama j\u00e4rgmiselt:<\/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>P\u00e4rast \u00fclaltoodud koodi lisamist helistage pildi suumimeetodile j\u00e4rgmiselt:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Siin seadsime positsiooni paremale. See v\u00f5ib olla \u00fclemine, vasak, sisemine, alumine jne. K\u00f5igi selle pistikprogrammi pakutavate valikute kohta saate lugeda nende <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentatsioonist<\/a>.<\/p>\n<p><strong>L\u00f5plik kood:<\/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>Selle pistikprogrammi abil saame lisada ka suumiefektiga pildigalerii. Galerii lisamiseks saate n\u00e4idiskoodi <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ametlikult<\/a> lehelt. Samuti kassasse <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">demo n\u00e4ited<\/a> selle plugin.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/jquery-datepickeri-rakendamine-timepickeriga\/\" title=\"JQuery Datepickeri rakendamine Timepickeriga\">JQuery Datepickeri rakendamine Timepickeriga<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/pildi-uleslaadimine-karpimine-ja-suuruse-muutmine-jquery-ja-php-abil\/\" title=\"Pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine jQuery ja PHP abil\">Pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine jQuery ja PHP abil<\/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>Kas soovite oma veebisaidile lisada suumipildi efekti? Suumiefekti lisamine pildile on t\u00e4nap\u00e4eval tavaline k\u00e4itumine, eriti veebitoodete Fashion puhul<\/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":[256],"tags":[842],"class_list":["post-24120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=24120"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24120\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=24120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=24120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=24120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}