Diashow nur mit HTML und CSS
Gibt es eine Möglichkeit eine Slideshow nur mit HTML und CSS zu erstellen, die ganz ohne JavaScript auskommt?
4 Antworten
Dank CSS3 gibt es viele CSS-only Slider. "CSS Slider without JS" bringt viele fertige Skripte bei Google zum Vorschein. Eines davon wäre http://pepsized.com/how-to-create-a-responsive-css-only-slider/
Das Argument "Keinen Einfluß auf die Konfiguration" ist aber offen gestanden Käse. Heutzutage kann man sich nur noch selten das Deaktivieren (der einzige Einfluss von dem die Rede sein kann) von Javascript erlauben, da dies für viele Seiten von elementarer Bedeutung ist. Die tatsächliche Zahl der Browser ohne JS liegt in den meisten Fällen merklich unter 1%. Das ist kein Wert den man in einem kompletten Entwicklungspaket berücksichtigt, sofern es nicht um ein Millionen-Budget und größere zu beziffernde Verluste auf diesem Weg ginge. Wer sich darum ernsthafte Gedanken macht, optimiert auch noch immer verbissen bis ins letzte Detail für den IE6.
Auf jeden Fall besser als marquee soll das heissen.
Auf jeden Fall besser als marquee soll das heissen.
Und warum besser? Marquee ist genau für so etwas vorgesehen und fünktioniert in jedem modernen Browser.
Marquee lässt sich vom Besucher nicht steuern. Insbesondere nicht anhalten und schon gar nicht vor- und zurückblättern. Obwohl ich Marquee ziemlich toll finde, weil das technisch am wenigsten aufwändig wäre.
Naja, vielleicht mach ich es ja trotzdem mit Marquee. Bei der vom Vorposter vorgeschlagenen pepsized.com-Demo schien der Quelltext auf den ersten Blick ohne JS auszukommen, aber leider musste ich zwischenzeitlich feststellen, dass dort die eigentliche Slideshow mit einem iframe eingebunden wird, das seinerseits zu einer Url führt, in dem doch wieder mit JS gearbeitet wird.
Ich habe bis jetzt nicht gehört das Javascript veraltet ist. Ich arbeite selbst noch mit Javascript! Um einen Slider erstellen zu können wäre Javascript auch die einfachste Methode. Informier dich mal über Javascript im Zusammenhang mit jquery(Framework). Da solltest du allerhand was finden.
Danke. Du scheinst ja gute Erfahrungen mit JS gemacht zu haben. Aber genau darauf will ich verzichten. Nicht weil JS vermeintlich veraltet ist, sondern, weil es von der Konfiguration der Besucher abhängig ist, auf die ich nicht den geringsten Einfluss habe.
Da hast du teilweise Recht. Aber 90% der Besucher haben Javascript aktiviert und die anderen 10% werden benachrichtigt das Sie entweder ihr Javascript bitte einschalten sollen oder das gewünschte Bild oder so nicht sehen können. Das ist denn deren Problem. Das ist jetzt meine Meinung.
Wenn du nicht mit Javascript arbeiten willst bleibt dir wohl nur Flash übrig. Dafür wird aber so viel ich weis auch ein Player gebraucht, den aber auch nicht alle drauf haben werden. Mehr kann ich dir dazu aber nicht sagen, da ich von Flash keine Ahnung habe.
Mit PHP wird ein Slider eher nichts. Entweder es sieht überhaupt nicht toll aus oder du musst die Seite immer neu laden lassen. Und das ist auch blöd...
Neunzig Prozent der Facebookbesucher vielleicht. Aber Opa, dessen Computer irgendwann vor drei Jahren vom Enkel eingerichtet wurde, kann nicht angemessen auf eine Fehlermeldung reagieren, weil er einfach nicht weiss, was er da jetzt plötzlich einschalten soll und warum. Ausserdem weiß ich aus Erfahrung, dass auch ein eingeschaltetes JS nicht immer überall zum gleichen Resultat führt. Ich will nicht von der Qualität des JS-Interpreters auf dem Rechner meines Besuchers abhängig sein, auf dem ich meine Scripts natürlich nicht vorher austesten kann.
Und ich sehe es nicht als deren, sondern als mein Problem, wenn meine Inhalte sie nicht erreichen. Die Website, an der ich arbeite, dient einem Zweck, der darüber hinausgeht, den Besucherinnen und Besuchern meine technischen Checkerqualitäten zu demonstrieren.
Mit PHP habe ich solche Sachen schon gemacht, aber das ist wirklich unelegant und bei weitem nicht das, was mir diesmal vorschwebt. Lieber wäre mir eine CSS-Lösung, aber die erfordert sicher auch aktuelle Browser. Wahrscheinlich werde ich einfach Img-Tags in einen Marquee-Container setzen.
Wir können uns jetzt drüber Streiten ob Javascript gut ist oder nicht, wer es benutzt und wer nicht, ob es was bringt oder nicht. Es kommt auch sicherlich auf die Gruppe an, die man mit seiner Homepage ansprechen will. Ist ja auch egal, zurück zu deinem Anliegen:
Also mit CSS wird sowas eher nicht möglich sein. Jedenfals habe ich bisher nichts davon gehört oder mitbekommen das jemand einen Slider nur mit CSS Programmiert hat. CSS ist ja auch eher fürs Design zuständig und gibt ja keine Befehle aus. Also kann das eigentlich gar nicht gehen.
Wie gesagt, informier dich sonst mal über Flash oder was vielleicht auch klappen könnte wäre Ajax. Damit kenne ich mich aber auch nicht aus, sorry.
Ajax ist keine Programmiersprache, sondern eine Programmiertechnik, die mehrere Sprachen (HTML, PHP, JS) trickreich mischt. Das würde also bedeuten: doch wieder JS einzusetzen.
Flash ist zu umständlich. Das lässt sich nicht automatisiert generieren. Ich müsste jede Diashow von Hand neu mischen. Da kann ich auch gleich ein Trickfilmstudio eröffnen. CSS hat hier eben den Vorteil, dass der Code dafür ganz leicht mit PHP generiert werden kann.
CSS ermöglicht allerdings mehr als Du vielleicht glaubst. Hovereffekte (immerhin ereignisorientiert) gehen ja auch mit CSS und mit dem Before-Selektor und dem After-Selektor kann man sogar scheinbar dynamischen Content generieren. Aber ich denke, falls überhaupt möglich, würde eine CSS-Diashow aktuellste Browser voraussetzen.
Auch mit PHP geht sehr viel mehr als man vermutet. Mit den richtigen Bibliotheken kann ein PHP-Script immerhin GIFs, JPGs und SVGs generieren - warum nicht auch animierte GIFs? Ist mir aber zu viel Arbeit. Mit Marquee bin ich am besten beraten glaube ich. Ist einfach, sieht gut aus und den Lightbox-Effekt kann ich auch mit CSS und Opacity simulieren. Auf eine Steuerung muss ich halt verzichten.
Wie gesagt mit Ajax kenn ich mich nicht aus.
Klar gibt es diese möglichkeiten mit CSS. Jetzendlich kann man aber keine Diashow damit erstellen. Wenn du herausfindest wie, würde ich mich sehr drüber freuen wenn du es mir mitteilen könntest. Würde mir auch das ständige Javascript programmieren sparen :)
Klar PHP kann man auch benutzen. Nur das ist auch sehr kompliziert und hat wie schon gesagt den Nachteil mit dem neu Laden. Okay gut das könnte man noch umgehen. Dann fängt es aber mit der Zeitbegrenzung vom Ausführen des Scriptes an. Okay da kann man vielleicht sowas wie einen Stream Programmieren aber da kommen wir entweder schon wieder in Ajax, Javascript oder ans Ende von PHP. Ich hoffe du verstehst meinen Gedankengang.
Ich glaube man kommt um Javascript, Ajax oder Flash nicht drum herum. Aber wie gesagt, ich lass mich gerne eines besseren belehren und stehe in dieser hinsicht auch immer für Hilfe bereit.
Hab was gefunden und denke daran, das einzusetzen. Es enthält allerdings so viel CSS, dass mir die JS-Lösungen dann schon wieder verlockender erscheinen.
Demo:
Schlecht sieht es nicht aus. Nachteile:
Es läuft nicht automatisch. Um ein neues Bild sehen zu wollen, muss der Kunde sich selber bemühen und das nächste Bild anklicken. Es ist also eher sowas wie eine Galerie, als ein Slider.
Die Seite wird jedesmal neu geladen. Es ist also kein reiner CSS Slider(wie schon gesagt, das wird nicht gehen). Öffne mal ein Bild auf deiner Seite, und klicke so 4-5 mal auf weiter. Dann betätige die Zurück Taste von deinem Brwoser. Und siehe da, die Seite geht nicht auf die Bildauswahl zurück(wie es bei Javascript dann wäre) sondern springt jdesmal ein Bild zurück. Bis du halt zu der Seite angelangt bist mit der Auswahl. Ob das der Sinn der Sache ist? Und vorallem, ob es dem Kunden wohl gefallen wird?
Ja, ist mir auch schon aufgefallen, dass die Browser-History immer länger wird. Sieht gut aus, taugt aber nichts. Wenn man nach css-only lösungen sucht, kommen haufenweise Suchtreffer, aber keine davon erwies sich bei näherer Betrachtung als wirklich css-only. Ich bin kurz davor, meinen Widerstand gegen JavaScript aufzugeben.
Ohne Javascript ist sowas einfach nicht richtig zu realisieren. Alles was ohne Javascript in dieser hinsicht läuft ist mist. Was vielleicht hilfreich sein kann ist ein Javscript Befehl der sich
nennt. Ich habe ihn ehrlich gesagt noch nicht benutzt aber soweit ich weis, wird der Inhalt davon angezeigt wenn der Client Javascript deaktiviert hat. Wäre das vielleicht eine Lösung?
vielleicht. wie heisst der befehl denn?
ohh, sorry. Den hatte ich eigentlich oben schon eingefügt aber gutefrage hat es mal wieder nicht angezeigt-.-
< noscript>Das was angezeigt werden soll, wenn JS nicht aktiviert ist < /noscript>
Sonst: http://de.selfhtml.org/html/transit/scripts.htm#noscript
Schlecht.
Mit HTML5 sollte das aber möglich sein. Am besten löst man sowas a) mit Flash b) mit PHP
JavaScript ist veraltet, und zudem sehr unsicher, und wer Java nicht installiert hat, kann es nicht sehen. Am besten PHP, denn das kann jeder anschauen.
Danke. Nur, bei PHP würde für jedes einzelne Bild die ganze Seite neu geladen werden müssen. Das ist nur mäßig elegant. Wie funktionieren denn die Bildergallerien mit abgedunkeltem Hintergrund bei Facebook? Nur mit HTML5 oder ist da auch JavaScript dabei?
Facebook benutzt ASP/ ASPX /ASP.NET. Und PHP unterstützt auch Frames...
JavaScript ist veraltet, und zudem sehr unsicher, und wer Java nicht installiert hat, kann es nicht sehen.
Und das ist purer Unsinn. Java hat nicht das geringste mit Javascript zu tun.
Aha, dann sind also alle JavaScript Seiten enfach zufällig defekt? Mach mal Seiten auf wenn dein Browser kein JavaScript aktiviert hat. Und zur Sicherheit: Über JavaScript kann man Metasploits auf den PC einspeisen.
Muss man auch, denn z.b. der Tor-Browser unterstützt kein Java, aus Sicherheitsgründen, sinnvoller weise. Deshalb funktioniert auch keine Seite mit Javascript. Dein Browser muss ein Plugin für Javascript haben.(haben die meisten fest eingebaut, einige aber auch nicht) Wenn du mit Browsern wie Tor, SecureFirefox, SSTorch auf nen Javascript-Button klickst, passiert rein garnichts...
Okay, ich werde das Vorhaben jetzt einfach mit und realisieren. Der HML-Code wird mit PHP anhand der zur Laufzeit im Ordner vorhandenen JPG-Dateien generiert. Dann muss man sich die Arbeit nur einmal machen und kann die Bilder jederzeit austauschen und es ist in ca. 10 Minuten programmiert; somit spare ich mir stundenlange, frustrierende und ergebnislose Experimente mit query, js, aspx, flash und all dem überflüssigen Firlefanz.
Das Anzünden einer Zigarette geht also auch ohne Atombombe.
Das sollte heissen: "Okay, ich werde das Vorhaben jetzt einfach mit marquee und img realisieren."
Die Textvorschau hier ist auch stark verbesserungswürdig.
Vielen Dank. Das sieht sehr gut aus. Auf jeden Fall besser als .
Zu JavaScript kann ich nur sagen, dass ich früher viel damit experimentiert habe und ein Erlebnis hatte, das mir ziemlich eindrucksvoll vor Augen geführt hat, dass man die Kontrolle über das Endergebnis völlig abgibt, wenn man JS benutzt. Ich hatte ein (übrigens sehr einfaches) Script gebastelt, das in einem Browser so funktioniert hat, wie es sollte und in einem anderen (ich teste immer sehr gut) Browser jedesmal zu einer nicht nachvollziehbaren Endlosrekursion geführt hat.
Man weiss eben nie, wie die Qualität des Interpreters bei den Besuchern ist. Bis dahin war ich der Meinung, dass man Funktionen, die nicht lebenswichtig sind, auch mal JS überlassen kann. Aber seither mache ich einen großen Bogen um JS und realisiere alles mit PHP.
An die 1% Legende glaube ich übrigens nicht. Menschen, die an Umfragen überhaupt teilnehmen, die solche Sachen eruieren, sind meistens auf dem neuesten Stand.