{"id":23922,"date":"2021-05-08T16:08:00","date_gmt":"2021-05-08T13:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23922"},"modified":"2021-10-18T02:45:59","modified_gmt":"2021-10-17T23:45:59","slug":"so-fuegen-sie-ihren-website-bildern-einen-zoom-effekt-hinzu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-ihren-website-bildern-einen-zoom-effekt-hinzu\/","title":{"rendered":"So f\u00fcgen Sie Ihren Website-Bildern einen Zoom-Effekt hinzu"},"content":{"rendered":"<p>M\u00f6chten Sie Ihrer Website einen Zoom-Bildeffekt hinzuf\u00fcgen? Das Hinzuf\u00fcgen eines Zoomeffekts zum Bild ist heutzutage ein \u00fcbliches Verhalten, insbesondere f\u00fcr Mode- und Online-Produktverkaufswebsites. In diesem Artikel zeigen wir Ihnen, wie wir ganz einfach einen Zoom-Bildeffekt hinzuf\u00fcgen k\u00f6nnen.<\/p>\n<p>Dieser Effekt wird auch als Bildvergr\u00f6\u00dferer oder vergr\u00f6\u00dferte Bilder bezeichnet. Mit diesem Effekt k\u00f6nnen Ihre Besucher einen gro\u00dfen Teil Ihres Bildes beim Schweben sehen.<\/p>\n<p>Nachdem Sie diesem Tutorial gefolgt sind, erhalten Sie die endg\u00fcltige Ausgabe wie folgt:<\/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=\"So f\u00fcgen Sie Ihren Website-Bildern einen Zoom-Effekt hinzu\" ><\/a><\/p>\n<h3>Einstieg<\/h3>\n<p>F\u00fcr dieses Tutorial verwenden wir dieses <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">xZoom<\/a> jQuery Zoom Gallery Plugin. Ein Benutzer kann dieses Plugin \u00fcber npm, bower oder CDN installieren. Wir w\u00fcrden das CDN verwenden, um die Plugin-Dateien einzubinden.<\/p>\n<p>Erstellen Sie eine Datei <code>index.html<\/code>und f\u00fcgen Sie die JS- und CSS-Dateien des Plugins hinzu.<\/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>Zoom-Bildeffekt hinzuf\u00fcgen<\/h3>\n<p>Um den Zoomeffekt hinzuzuf\u00fcgen, ben\u00f6tigen Sie zwei Versionen Ihres Bildes \u2013 Vorschau und Original. Unten sind die Links f\u00fcr Beispielbilder.<\/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\">Vorschaubild<\/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\">Original Bild<\/a><\/li>\n<\/ul>\n<p>Sobald Sie mit Ihren Bildern in beiden Versionen fertig sind, m\u00fcssen Sie Ihr <code>img<\/code>Tag wie folgt schreiben :<\/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>Rufen Sie nach dem Hinzuf\u00fcgen des obigen Codes die Zoom-Methode f\u00fcr das Bild wie folgt auf:<\/p>\n<pre><code>$(\".xzoom\").xzoom({\n\u00a0\u00a0\u00a0\u00a0position: 'right',\n\u00a0\u00a0\u00a0\u00a0Xoffset: 15\n});<\/code><\/pre>\n<p>Hier setzen wir Position nach rechts. Es kann oben, links, innen, unten usw. sein. Sie k\u00f6nnen alle Optionen dieses Plugins in der <a href=\"https:\/\/github.com\/payalord\/xZoom\/blob\/master\/doc\/manual.md\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dokumentation<\/a> nachlesen .<\/p>\n<p><strong>Endg\u00fcltiger Code:<\/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>Wir k\u00f6nnen mit diesem Plugin auch die Bildergalerie mit dem Zoom-Effekt hinzuf\u00fcgen. Sie erhalten den Beispielcode zum Hinzuf\u00fcgen einer Galerie von der <a href=\"https:\/\/github.com\/payalord\/xZoom\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">offiziellen<\/a> Seite. Sehen Sie sich auch die <a href=\"https:\/\/payalord.github.io\/xZoom\/examples\/index.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Demo-Beispiele<\/a> dieses Plugins an.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-implementieren-sie-jquery-datepicker-mit-timepicker\/\" title=\"So implementieren Sie jQuery Datepicker mit Timepicker\">So implementieren Sie jQuery Datepicker mit Timepicker<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/wie-man-ein-bild-mit-jquery-und-php-hochlaedt-zuschneidet-und-seine-groesse-aendert\/\" title=\"Wie man ein Bild mit jQuery und PHP hochl\u00e4dt, zuschneidet und die Gr\u00f6\u00dfe \u00e4ndert\">Wie man ein Bild mit jQuery und PHP hochl\u00e4dt, zuschneidet und die Gr\u00f6\u00dfe \u00e4ndert<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u00f6chten Sie Ihrer Website einen Zoom-Bildeffekt hinzuf\u00fcgen? Das Hinzuf\u00fcgen von Zoomeffekten zum Bild ist heutzutage ein \u00fcbliches Verhalten, insbesondere f\u00fcr Mode, Online-Produkte<\/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":[254],"tags":[845],"class_list":["post-23922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/23922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=23922"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/23922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/22117"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=23922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=23922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=23922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}