{"id":27518,"date":"2021-05-08T16:05:00","date_gmt":"2021-05-08T13:05:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27518"},"modified":"2021-10-17T05:09:31","modified_gmt":"2021-10-17T02:09:31","slug":"sa-har-lagger-du-till-zoombildeffekt-pa-dina-webbplatsbilder","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/sa-har-lagger-du-till-zoombildeffekt-pa-dina-webbplatsbilder\/","title":{"rendered":"S\u00e5 h\u00e4r l\u00e4gger du till zoombildeffekt p\u00e5 dina webbplatsbilder"},"content":{"rendered":"<p>Vill du l\u00e4gga till zoombildeffekt p\u00e5 din webbplats? Att l\u00e4gga till zoomeffekt p\u00e5 bilden \u00e4r ett vanligt beteende nuf\u00f6rtiden, s\u00e4rskilt f\u00f6r mode, online-produkts\u00e4ljande webbplatser. I den h\u00e4r artikeln visar vi dig hur vi enkelt kan l\u00e4gga till zoombildeffekt.<\/p>\n<p>Denna effekt kallas ocks\u00e5 bildf\u00f6rstorare eller f\u00f6rstorade bilder. Med den h\u00e4r effekten kan dina bes\u00f6kare se en stor del av din bild medan du sv\u00e4var.<\/p>\n<p>Efter att ha f\u00f6ljt denna handledning f\u00e5r du den slutliga utmatningen enligt f\u00f6ljande:<\/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=\"S\u00e5 h\u00e4r l\u00e4gger du till zoombildeffekt p\u00e5 dina webbplatsbilder\" ><\/a><\/p>\n<h3>Komma ig\u00e5ng<\/h3>\n<p>F\u00f6r denna handledning anv\u00e4nder vi detta <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery Plugin. En anv\u00e4ndare kan installera detta plugin via npm, bower eller CDN. Vi skulle anv\u00e4nda CDN f\u00f6r att inkludera plugin-filerna.<\/p>\n<p>Skapa en fil <code>index.html<\/code>och l\u00e4gg till JS- och CSS-filerna i 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>L\u00e4gg till zoombildeffekt<\/h3>\n<p>F\u00f6r att l\u00e4gga till zoomeffekten beh\u00f6ver du tv\u00e5 versioner av din bild &#8211; f\u00f6rhandsgranskning och original. Nedan \u00e4r l\u00e4nkarna till exempel bilder.<\/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\">F\u00f6rhandsgranska bilden<\/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\">Originalbild<\/a><\/li>\n<\/ul>\n<p>N\u00e4r du \u00e4r redo med dina bilder i b\u00e5da versionerna m\u00e5ste du skriva din <code>img<\/code>tagg som:<\/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>N\u00e4r du har lagt till ovanst\u00e5ende kod, ring zoommetoden p\u00e5 bilden enligt f\u00f6ljande:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>H\u00e4r s\u00e4tter vi position till h\u00f6ger. Det kan vara \u00f6verst, v\u00e4nster, insida, botten etc. Du kan l\u00e4sa om alla alternativ som tillhandah\u00e5lls av detta plugin i deras <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentation<\/a>.<\/p>\n<p><strong>Slutlig kod:<\/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>Vi kan ocks\u00e5 l\u00e4gga till bildgalleriet med zoomeffekten med detta plugin. Du f\u00e5r exempelkoden f\u00f6r att l\u00e4gga till galleri fr\u00e5n den <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">officiella<\/a> sidan. Kolla ocks\u00e5 <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">demo-exemplen<\/a> p\u00e5 detta plugin.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-implementerar-jquery-datepicker-med-timepicker\/\" title=\"Hur man implementerar jQuery Datepicker med Timepicker\">Hur man implementerar jQuery Datepicker med Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-laddar-upp-beskar-och-andrar-storlek-pa-bild-med-jquery-och-php\/\" title=\"Hur ladda upp, besk\u00e4ra och \u00e4ndra storlek p\u00e5 bild med jQuery och PHP\">Hur ladda upp, besk\u00e4ra och \u00e4ndra storlek p\u00e5 bild med jQuery och PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vill du l\u00e4gga till zoombildeffekt p\u00e5 din webbplats? Att l\u00e4gga till zoomeffekt p\u00e5 bilden \u00e4r ett vanligt beteende nuf\u00f6rtiden, s\u00e4rskilt f\u00f6r mode, online-produkt<\/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":[261],"tags":[850],"class_list":["post-27518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=27518"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27518\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=27518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=27518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=27518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}