{"id":27392,"date":"2021-05-08T16:12:00","date_gmt":"2021-05-08T13:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27392"},"modified":"2021-10-18T03:49:06","modified_gmt":"2021-10-18T00:49:06","slug":"jak-dodac-efekt-powiekszenia-do-obrazow-w-witrynie","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-dodac-efekt-powiekszenia-do-obrazow-w-witrynie\/","title":{"rendered":"Jak doda\u0107 efekt powi\u0119kszenia do obraz\u00f3w w witrynie?"},"content":{"rendered":"<p>Chcesz doda\u0107 efekt powi\u0119kszenia obrazu na swojej stronie? Dodawanie efektu powi\u0119kszenia do obrazu jest obecnie powszechnym zachowaniem, zw\u0142aszcza w przypadku witryn Fashion, sprzedaj\u0105cych produkty online. W tym artykule pokazujemy, jak w prosty spos\u00f3b mo\u017cemy doda\u0107 efekt powi\u0119kszenia obrazu.<\/p>\n<p>Ten efekt jest r\u00f3wnie\u017c nazywany powi\u0119kszaczem obrazu lub powi\u0119kszonymi obrazami. Korzystaj\u0105c z tego efektu, odwiedzaj\u0105cy mog\u0105 zobaczy\u0107 du\u017c\u0105 cz\u0119\u015b\u0107 Twojego obrazu po najechaniu mysz\u0105.<\/p>\n<p>Po wykonaniu tego samouczka otrzymasz ko\u0144cowy wynik w nast\u0119puj\u0105cy spos\u00f3b:<\/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=\"Jak doda\u0107 efekt powi\u0119kszenia do obraz\u00f3w w witrynie?\" ><\/a><\/p>\n<h3>Pierwsze kroki<\/h3>\n<p>W tym samouczku u\u017cyjemy wtyczki <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery. U\u017cytkownik mo\u017ce zainstalowa\u0107 t\u0119 wtyczk\u0119 przez npm, bower lub CDN. Do do\u0142\u0105czenia plik\u00f3w wtyczek u\u017cyjemy CDN.<\/p>\n<p>Utw\u00f3rz plik <code>index.html<\/code>i dodaj pliki JS i CSS wtyczki.<\/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>Dodaj efekt powi\u0119kszenia obrazu<\/h3>\n<p>Aby doda\u0107 efekt powi\u0119kszenia, potrzebujesz dw\u00f3ch wersji obrazu \u2013 podgl\u0105du i orygina\u0142u. Poni\u017cej znajduj\u0105 si\u0119 linki do przyk\u0142adowych zdj\u0119\u0107.<\/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\">Podgl\u0105d obrazu<\/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\">Oryginalny obraz<\/a><\/li>\n<\/ul>\n<p>Gdy b\u0119dziesz gotowy z obrazami w obu wersjach, musisz napisa\u0107 sw\u00f3j <code>img<\/code>tag jako:<\/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>Po dodaniu powy\u017cszego kodu wywo\u0142aj metod\u0119 powi\u0119kszenia na obrazku w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Tutaj ustawiamy pozycj\u0119 na prawo. Mo\u017ce by\u0107 g\u00f3rny, lewy, wewn\u0119trzny, dolny itd. O wszystkich opcjach dostarczanych przez t\u0119 wtyczk\u0119 mo\u017cesz przeczyta\u0107 w ich <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentacji<\/a>.<\/p>\n<p><strong>Kod ko\u0144cowy:<\/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>Za pomoc\u0105 tej wtyczki mo\u017cemy r\u00f3wnie\u017c doda\u0107 galeri\u0119 obraz\u00f3w z efektem powi\u0119kszenia. Otrzymasz przyk\u0142adowy kod do dodania galerii z <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">oficjalnej<\/a> strony. Sprawd\u017a r\u00f3wnie\u017c <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przyk\u0142ady demo<\/a> tej wtyczki.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-zaimplementowac-jquery-datepicker-z-timepicker\/\" title=\"Jak zaimplementowa\u0107 jQuery Datepicker z Timepicker?\">Jak zaimplementowa\u0107 jQuery Datepicker z Timepicker?<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-przeslac-przyciac-i-zmienic-rozmiar-obrazu-za-pomoca-jquery-i-php\/\" title=\"Jak przes\u0142a\u0107, przyci\u0105\u0107 i zmieni\u0107 rozmiar obrazu za pomoc\u0105 jQuery i PHP\">Jak przes\u0142a\u0107, przyci\u0105\u0107 i zmieni\u0107 rozmiar obrazu za pomoc\u0105 jQuery i PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chcesz doda\u0107 efekt powi\u0119kszenia obrazu na swojej stronie? Dodawanie efektu powi\u0119kszenia do obrazu jest obecnie powszechnym zachowaniem, szczeg\u00f3lnie w przypadku produktu Fashion, 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":[259],"tags":[847],"class_list":["post-27392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-8","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=27392"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27392\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=27392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=27392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=27392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}