{"id":227,"date":"2018-03-18T19:01:49","date_gmt":"2018-03-18T18:01:49","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=227"},"modified":"2018-04-05T19:59:53","modified_gmt":"2018-04-05T17:59:53","slug":"split-image-slider","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/","title":{"rendered":"Split Image Slider"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Anleitung\" >Anleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Anpassungen\" >Anpassungen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Groesse\" >Gr\u00f6\u00dfe<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Slider_Element\" >Slider Element<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ekiwi.de\/index.php\/227\/split-image-slider\/#Download\" >Download<\/a><\/li><\/ul><\/nav><\/div>\n<p>Vorher Nacher Bild erstellen, Split Comparison Slider, in diesem Tutorial soll es darum gehen einen Image Slider zu erstellen. Dieser stellt zwei Bilder \u00fcbereinander dar. Der Benutzer kann mittels eines Sliders zwischen beiden Bildern hin und her wechseln.<\/p>\n<p><!--more--><\/p>\n<p>Ein Beispiel sagt in diesem Fall mehr als tausend Worte:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_image_slider.gif\" alt=\"\" width=\"300\" height=\"220\" class=\"alignnone size-full wp-image-228\" \/><\/p>\n<p>Da wir das Rad nicht komplett neu erfinden wollen, verwenden wir eine fertige Komponente. In diesem Fall vom Github-Projekt <a href=\"https:\/\/github.com\/jotform\/before-after.js\" target=\"_blank\">https:\/\/github.com\/jotform\/before-after.js<\/a>. Die Komponente ist vollst\u00e4ndig responsiv und l\u00e4sst sich leicht in eine Webseite integrieren.<\/p>\n<p>Am Ende gibt es den kompletten Download des Beispiels.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/wsqr3O9j2nc\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitung\"><\/span>Anleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Schauen wir uns zuerst die Dateien des Scriptes an:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_image_1.png\" alt=\"\" width=\"479\" height=\"149\" class=\"alignnone size-full wp-image-229\" srcset=\"\/wp-content\/uploads\/2018\/03\/split_image_1.png 479w, \/wp-content\/uploads\/2018\/03\/split_image_1-300x93.png 300w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/p>\n<p>Wir haben zwei Bilddateien, eine CSS-Datei und eine Java-Script-Datei. Die beiden Bilder sollten die gleiche Gr\u00f6\u00dfe haben, da diese ja beide \u00fcberlagert werden. Diese m\u00fcssen allerdings nicht speziell angepasst werden, da unser Code darauf automatisch R\u00fccksicht nimmt und die Gr\u00f6\u00dfe im Browser responsiv anpasst. Nat\u00fcrlich sollte man auch keine 12 MB gro\u00dfen Original-Bilder direkt von der Digicam verwenden. \ud83d\ude42<\/p>\n<p>In unsere HTML-Datei f\u00fcgen wir nun den Code f\u00fcr die Bilder ein:<\/p>\n<pre>\r\n&lt;div class=&quot;ba-slider&quot;&gt;\r\n   &lt;img src=&quot;1.jpg&quot;&gt;\r\n   &lt;div class=&quot;resize&quot;&gt;\r\n       &lt;img src=&quot;2.jpg&quot;&gt;\r\n   &lt;\/div&gt;\r\n   &lt;span class=&quot;handle&quot;&gt;&lt;\/span&gt;\r\n&lt;\/div&gt;\t\t<\/pre>\n<p>Hier muss man nur die beiden URLs zu den Bildern ab\u00e4ndern. Die Formatierung \u00fcbernimmt der CSS-Code, diesen f\u00fcgen wir ebenfalls ein (Head-Bereich):<\/p>\n<pre>&lt;link type=&quot;text\/css&quot; href=&quot;before-after.css&quot; rel=&quot;stylesheet&quot;&gt;\r\n<\/pre>\n<p>Damit der Slider nun noch loslegt und funktioniert, kommt Java-Script ins Spiel:<\/p>\n<pre>\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/code.jquery.com\/jquery-2.1.3.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;before-after.js&quot;&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n  $('.ba-slider').beforeAfter();\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Die erste Zeile bindet <code>jQuery<\/code> ein. Darauf kann man verzichten, sofern man dieses bereits verwendet. Es folgt die Java-Script-Datei f\u00fcr die Slider-Funktion.<\/p>\n<p>Zuletzt wenden wir den Slider auf unser oben definiertes DIV-Element an. Will man mehrere Slide-Bilder auf einer Seite verwenden, muss man die ID anpassen. Diese ist in unserem Beispiel <code>ba-slider<\/code>. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anpassungen\"><\/span>Anpassungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Groesse\"><\/span>Gr\u00f6\u00dfe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der Slider schnappt sich standardm\u00e4\u00dfig den zur Verf\u00fcgung stehenden Raum. D.h. stehen dem Bild die komplette Breite zur Verf\u00fcgung, verwendet er diese auch:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_xl.jpg\" alt=\"\" width=\"650\" height=\"560\" class=\"alignnone size-full wp-image-232\" srcset=\"\/wp-content\/uploads\/2018\/03\/split_xl.jpg 650w, \/wp-content\/uploads\/2018\/03\/split_xl-300x258.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>Dies k\u00f6nnen wir ab\u00e4ndern, indem wir den Slider von einem begrenzenden DIV-Element umgeben:<\/p>\n<pre>\r\n&lt;div style=&quot;width:600px;&quot;&gt;\t\t\t\t\r\n\t&lt;div class=&quot;ba-slider&quot;&gt;\r\n\t   &lt;img src=&quot;1.jpg&quot;&gt;\r\n\t   &lt;div class=&quot;resize&quot;&gt;\r\n\t       &lt;img src=&quot;2.jpg&quot;&gt;\r\n\t   &lt;\/div&gt;\r\n\t   &lt;span class=&quot;handle&quot;&gt;&lt;\/span&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>In diesem Fall hat das \u00e4u\u00dfere DIV-Element eine Breite von 600 Px. Das Ergebnis sieht so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_image_split.jpg\" alt=\"\" width=\"650\" height=\"476\" class=\"alignnone size-full wp-image-233\" srcset=\"\/wp-content\/uploads\/2018\/03\/split_image_split.jpg 650w, \/wp-content\/uploads\/2018\/03\/split_image_split-300x220.jpg 300w, \/wp-content\/uploads\/2018\/03\/split_image_split-90x65.jpg 90w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>Die H\u00f6he passt sich automatisch an.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Slider_Element\"><\/span>Slider Element<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In der Mitte des Sliders ist ein sehr sichtbarer Knopf:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_image_2.png\" alt=\"\" width=\"91\" height=\"90\" class=\"alignnone size-full wp-image-230\" \/><\/p>\n<p>Die Darstellung wird \u00fcber den CSS-Code gesteuert. In der CSS-Datei wird dieser \u00fcber den folgenden Code gesteuert:<\/p>\n<pre>\r\n.ba-slider .handle:after {  \/* Big orange knob  *\/\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 64px;\r\n    height: 64px;\r\n    margin: -32px 0 0 -32px;\r\n \r\n    content:'\\21d4';\r\n    color:white;\r\n    font-weight:bold;\r\n    font-size:36px;\r\n    text-align:center;\r\n    line-height:64px;\r\n \r\n    background: #ffb800; \/* @orange *\/\r\n    border:1px solid #e6a600; \/* darken(@orange, 5%) *\/\r\n    border-radius: 50%;\r\n    transition:all 0.3s ease;\r\n    box-shadow:\r\n      0 2px 6px rgba(0,0,0,.3), \r\n      inset 0 2px 0 rgba(255,255,255,.5),\r\n      inset 0 60px 50px -30px #ffd466; \/* lighten(@orange, 20%)*\/ \r\n}\r\n\r\n.ba-slider .handle.ba-draggable:after {\r\n    width: 48px;\r\n    height: 48px;\r\n    margin: -24px 0 0 -24px;\r\n    line-height:50px;\r\n    font-size:28px;\r\n}\t\r\n<\/pre>\n<p>Man kann diesen Code z.B. komplett entfernen. Dann wird nur der Balken dargestellt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/split_image_3.png\" alt=\"\" width=\"350\" height=\"262\" class=\"alignnone size-full wp-image-231\" srcset=\"\/wp-content\/uploads\/2018\/03\/split_image_3.png 350w, \/wp-content\/uploads\/2018\/03\/split_image_3-300x225.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n<p>Die Position des Knopfes kann \u00fcber die Eigenschaft <code>top: 50%;<\/code> gesteuert werden. 50% ist genau die Mitte. 80% verschiebt ihn zum unteren Rand hin.<\/p>\n<p>Die Eigenschaften:<\/p>\n<pre>\r\nwidth: 64px;\r\nheight: 64px;\r\nmargin: -32px 0 0 -32px;\r\n<\/pre>\n<p>Legen die Gr\u00f6\u00dfe fest. Man sieht im oberen Code, dass es Einstellungen f\u00fcr den Normalzustand und den Zustand des Ziehens gibt. F\u00fcr beide Zust\u00e4nde lassen sich hier die Eigenschaften festlegen. Hier kann man etwas herumspielen, bis die optimale Darstellung gefunden ist.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download\"><\/span>Download<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"\/wp-content\/uploads\/2018\/03\/beispiel_split_image.zip\">Download des Beispiels<\/a><\/p>\n<p>In diesem Sinne, viel Spa\u00df beim Herumprobieren.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vorher Nacher Bild erstellen, Split Comparison Slider, in diesem Tutorial soll es darum gehen einen Image Slider zu erstellen. Dieser<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[44,47],"class_list":["post-227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}