https:\/\/github.com\/Matthias-Thiele\/HTML-Image-Slider<\/a><\/p>\n\n\n\nDer Grundgedanke beruht wie bei vielen Slidern darauf, dass die Bilder \u00fcbereinander gestapelt werden und immer nur ein Bild angezeigt wird. Das kann man \u00fcber CSS leicht mit „display: none;“ steuern. Der Image Bereich ist bei mir zum Start leer, er wird beim Aufruf der Seite aus der Parameterliste heraus gef\u00fcllt.<\/p>\n\n\n\n
<div id=\"imagelist\">\n <\/div>\n<\/pre>\n\n\n\nDer JavaScript Code dazu ist \u00fcberschaubar. Die Bilder k\u00f6nnen entweder durchnummeriert kommen oder mit einem beschreibenden Namen. Es wird ein IMG Element erzeugt, der Pfad zum Bild eingef\u00fcgt und das Element in die imagelist eingehangen.<\/p>\n\n\n\n
for (var i = imgStart; i <= imgEnd; i++) {\n var img = document.createElement(\"img\");\n var imgSrc;\n\n if (descriptionName) {\n imgSrc = this.startPath + imgName + this.description[i] + \".\" + imgExt;\n } else {\n var num = (i < 10) ? (pendingZero + i) : i;\n imgSrc = this.startPath + imgName + num + \".\" + imgExt;\n }\n\n img.src = imgSrc;\n if (i === imgStart) {\n img.className = \"active\";\n }\n listRoot.appendChild(img);\n this.items.push(img);\n }\n<\/pre>\n\n\n\nDie Statuszeile \u00fcberlagert halb-transparent den unteren Bildteil. Vielleicht erweitere ich es sp\u00e4ter mal so, dass man sie auch ausblenden kann. In den meisten F\u00e4llen wird sie aber nicht st\u00f6ren.<\/p>\n\n\n\n
<nav class=\"slider-nav\">\n <button class=\"previous\" data-key=\"true\" style=\"width:52%; text-align: right\">\n <span>\n <i><<\/i>\n <\/span>\n <\/button>\n <button class=\"next\" data-key=\"false\" style=\"text-align: left\">\n <span>\n <i>><\/i>\n <\/span>\n <\/button>\n <span id=\"counter\" style=\"float:right; width: 100pt; padding: 2pt;\">1\/6<\/span>\n <\/nav>\n <\/div>\n<\/pre>\n\n\n\nDie Bild-Weiterschaltung l\u00e4uft im Kreis. Wenn man am letzten Bild angekommen wird, wird als n\u00e4chstes das erste Bild angezeigt und umgekehrt. Damit man die Orientierung nicht verliert und X-mal im Kreis l\u00e4uft, wird in der Statuszeile angezeigt, wie viele Bilder es gibt und auf welchem Bild man gerade steht.<\/p>\n\n\n\n
Slider.prototype.advance = function(leftRight) {\n this.items[this.count].classList.remove('active');\n this.count += (leftRight) ? -1 : 1;\n \n if (this.count < 0) {\n this.count = this.items.length -1;\n } else if (this.count >= this.items.length) {\n this.count = 0;\n }\n \n this.items[this.count].classList.add('active');\n this.updateView();\n };\n \n Slider.prototype.updateView = function() { \n var status = document.getElementById(\"counter\");\n status.innerText = \" \" + (this.count + 1) + \" \/ \" + this.items.length; \n \n var desc = document.getElementById(\"description\");\n if (this.count >= this.description.lengt || !this.description[this.count]) {\n desc.style = \"display: none\";\n } else {\n desc.innerText = this.description[this.count];\n desc.style = \"display: inline-block\";\n }\n };\n\n<\/pre>\n\n\n\nDie Tastatursteuerung ist einfach. Es gibt nur zwei Kommandos – vorw\u00e4rts und zur\u00fcck. Diese k\u00f6nnen \u00fcber Pfeil links\/ rechts und \u00fcber Bild hoch\/ runter ausgel\u00f6st werden.<\/p>\n\n\n\n
Slider.prototype.keyPress = function(event) {\n event = event || window.event;\n var slider = document.querySelector('.next').slider;\n var keyCode = event.keyCode;\n \n if (keyCode === 33 || keyCode === 37) {\n slider.advance(true);\n } else if (keyCode === 34 || keyCode === 39) {\n slider.advance(false);\n }\n };\n<\/pre>\n\n\n\nDie HTML Datei enth\u00e4lt keine Informationen zu den Bildern. Diese wird beim Aufruf der Seite \u00fcber Parameter mitgegeben. Somit kann man die Seite irgendwo hinterlegen und aus beliebigen Anwendungen heraus aufrufen. Innerhalb der Web Seite kann man optional den Start des Pfades der Quelle hinterlegen. Damit kann man erzwingen, dass ein bestimmter Bereich nicht einfach verlassen werden kann und zus\u00e4tzlich ist dann der Parametersatz etwas k\u00fcrzer, da dieser Teil nicht jedes mal mit angegeben werden muss.<\/p>\n\n\n\n
var slider = new Slider(\"imagelist\", \"https:\/\/mmth.de\/wp-content\/uploads\/\");\n<\/pre>\n\n\n\nDer erste Parameter gibt die id des DIV Elements an welches die Imageliste enthalten soll und der zweite Parameter den Start der URL jedes Bildes. Man kann diesen auch auf einen Leerstring setzen (nicht einfach weglassen).<\/p>\n\n\n\n
http:\/\/localhost:8080\/SliderTest\/slider.html?name=2023\/09\/&ext=jpg&desc=Mainau1~Mainau2~Mainau3~Mainau5<\/pre>\n\n\n\nFolgende Parameter gibt es:<\/p>\n\n\n\nname<\/td> Enth\u00e4lt den festen Namensanteil des Bildes. Bei durchnummerierten Bildern wird die Nummer am Ende automatisch angef\u00fcgt. Falls der Startpfad aus der html Datei noch um Unterverzeichnisse erg\u00e4nzt werden muss, kommen diese hier vor den Namen. Bei Bildern deren Name aus der Beschreibung generiert wird, kann man hier den Verzeichnispfad hinterlegen.<\/td> name=Mainau start<\/td> Bei durchnummerierten Bilder wird hier die Nummer des ersten Bilds angegeben. Im Normalfall wird das 1 sein, das muss aber nicht zwingend so sein. Wenn man nur eine Teilsequenz anzeigen m\u00f6chte, kann man hier auch eine h\u00f6here Zahl angeben. start=1<\/td><\/tr> end<\/td> Hier wird die Nummer des letzten Bildes eingetragen<\/td> end=5<\/td><\/tr> ext<\/td> Alle Bilddateien m\u00fcssen vom gleichen Typ sein, da man nur eine Extension (ohne Punkt) angeben kann. Der Name setzt sich dann aus Startpfad + Name + Nummer + Punkt + Extension zusammen.<\/td> ext=jpg<\/td><\/tr> desc<\/td> Bei durchnummerierten Bildern ist der Beschreibungsteil optional. Wenn er vorhanden ist, wird die Beschreibung zu jedem Bild oben links eingeblendet. Bei Bilddateinamen aus der Beschreibung muss dieser Parameter eine Liste aller Namen der Bilddateien enthalten.<\/td> desc=Haus~Auto~Boot<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"Da ich auf meiner Hauptseite viele Bilder in Galerieform habe, bin ich mit dem Standard-Slider unzufrieden. Er ist nicht einfach zu bedienen und zeigt die Bilder nicht leicht durchbl\u00e4tterbar und in voller Bildschirmgr\u00f6\u00dfe an. Ich habe mir deshalb mal einige Slider aus dem Internet angesehen und habe nicht das richtige gefunden. Zum einen arbeiten einige […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-260","post","type-post","status-publish","format-standard","hentry","category-software"],"_links":{"self":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=260"}],"version-history":[{"count":2,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":262,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions\/262"}],"wp:attachment":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}