JavaScript-Slider auf Website einbinden

Marvin_G schrieb am 11.06.2015 um 18:39 Uhr

Hallo zusammen,
ich habe ein Problem und zwar wollte ich schon länger mal einen Fotoslider auf meine Website einbinden. Nach längeren suchen bin ich jetzt fündig geworden (siehe link am Ende).

Jedoch habe ich es nach längeren herumprobieren leider noch nicht geschafft diesen Slider einzubinden.

Ich bin immer wie folgt vorgegangen:

Den JavaScript-Code der auf der Seite steht in Notepad++ kopiert und als slider.js in den index_htm_files Ordner dieser Seite abgespeichert.
Ein Rechteck mit dem Rechtecks-Werkzeug in den Abmaßen 960x350 erstellt.
Rechtsklick (auf das Rechteck)>Webeigenschaften>Platzhalter>Mit html Code ersetzen aktivieren>HTML Code (body)

Dort habe ich das eigefügt:

{div id="owl-demo" class="owl-carousel owl-theme"}

<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>

{/div}

Statt den geschweiften Klammern habe ich die größer und kleiner-Zeichen verwendet.

Aber anstatt dem Slider finde ich auf meiner Seite in der Vorschau nur 3 durchkreuzte Quadrate.

Fotoslider: http://owlgraphic.com/owlcarousel/demos/progressBar.html

Technische Details:
Software: Magix Web Designer 11 Premium
Betriebssytem: Windows 8.1

Danke im Voraus.

Kommentare

BeRo schrieb am 11.06.2015 um 23:51 Uhr

Damit das "owl carousel" in einer eigenen HTML Seite funktioniert, muss zunächst die JQuery Bibliothek aktiviert werden und es müssen 5 Steuerdateien (CSS/JS) installiert werden.

Das Einbinden der Bilder kannst Du dann mit dem gezeigten HTML Code machen. Der Start (die Anzeige) passiert dann mit einem einfachen JS Funktionsaufruf.

Da die Codes sehr tief in die Struktur der Seite eingreifen, ist es nicht möglich, die Slideshow direkt in die Seite einzubinden. Dann gibt es Kollisionen zwischen den JS Funktionen, die der WD erzeugt und den Funktionen die die owl-carousel Scripte erzeugen.

Abhilfe:

Erstelle mit einem einfachen Texteditor eine separate HTML Seite, in der Du alle Codes ablegst, die (sinngemäß) hier empfohlen werden.
Speicher die Seite z. B. als "demo.htm".
Lade Dir hier das ZIP Archiv mit allen benötigten Scriptlets und Dateien herunter
Erstelle ein Verzeichnis "owl-carousel", in dem Du alle CSS/JS Dateien- und die JQ Bibliothek ablegst, die im Code referenziert werden.
Ändere im HTML Code der DIV Boxen evtl. fehlerhafte Pfade so, dass sie auf das Verzeichnis "owl-carousel" zeigen.
Kontrolliere, die ID und die Klassenzuweisung im HTML Code der DIV Boxen, die sind von Haus aus nicht korrekt.
So muss es für die einfache Demo aussehen:
<div id="owl-demo" class="owlCarousel">
Erstelle im WD Editor einen Platzhalter in der für die Slideshow gewünschten Größe und lege im HTML Body einen iframe Code an, mit dem du die erstellte HTML Seite "demo.htm" einfügst.
Der kann z. B. so aussehen:
<iframe src="./demo.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>
Wenn Du das zusätzliche Verzeichnis im gleichen Verzeichnis angelegt hast, in dem Dein Projekt exportiert wird, dann kann das Ergebnis in der Vorschau so aussehen:
Das war's

Was bleibt, ist die Frage: Warum Du den recht erheblichen Aufwand treiben willst, um eine "normale" Slideshow einzubinden.

Der WD bietet ja schon einige Alternativen, die durchaus vergleichbar sind...

Aber wie auch immer, gerne viel Erfolg beim Nachbau.

Marvin_G schrieb am 12.06.2015 um 14:59 Uhr

Danke für die Anleitung :)

Bei mir werden jedoch die Bilder untereinander (+am schluss noch etwas java code) angezeigt.
Ich glaube das ich in der demo.htm einen Fehler habe. Ich weiß aber nicht welchen.

Die Pfade habe ich bereits geprüft.

BeRo schrieb am 12.06.2015 um 15:28 Uhr

[...] Ich glaube das ich in der demo.htm einen Fehler habe [...]

Richtig.

Du hast die ID noch nicht korrigiert und Du hast ein JavaScript in eine HTML Seite eingefügt, ohne dem Browser zu "sagen" dass er JavaScript interpretieren soll...

So sollte es sinngemäß aussehen:

Die ID sollte im HTML Code identisch sein mit der Angabe im JS Code (oben gelb markiert)

Das JavaScript muss "eingerahmt" werden zwischen

<script type="text/javascript">
und
</script>

Oben grün markiert.

Versuch's nochmal...

Viel Erfolg

Marvin_G schrieb am 12.06.2015 um 15:58 Uhr

Das hat jetzt funktioniert.

Aber jetzt habe ich jedoch die "Normale" Version ich wollte jedoch die "ProgressBar" Version.
Weil wie du schon erwähnt hast könnte man ja einen solchen Slider auch mit dem integriertem Tool erstellen.

Normalerweise müsste ich jetzt nur JavaCode in der Demo.htm ändern aber wenn ich diesen Code einfüge bekomme ich den gleichen Fehler wie vorhin.

Marvin_G schrieb am 12.06.2015 um 16:17 Uhr

Ich hatte glaube ich nicht das ganze kopiert jedenfalls habe ich jetzt keinen Fehler mehr.
Die "ProgressBar" fehlt dennoch.

BeRo schrieb am 12.06.2015 um 16:26 Uhr

[...] wenn ich diesen Code einfüge bekomme ich den gleichen Fehler wie vorhin. [...]

Vermutlich hast Du übersehen, dass für die Progress Bar noch ein CSS Code in die "demo.htm" gehört...

Wenn Du den u. a. CSS Code einbaust, wird es funktionieren.

----------------------------
<style type="text/css">
#owl-demo .item img{
      display: block;
      width: 100%;
      height: auto;
    }
    #bar{
      width: 0%;
      max-width: 100%;
      height: 4px;
      background: #7fc242;
    }
    #progressBar{
      width: 100%;
      background: #EDEDED;
    }
</style>
----------------------------

So kann es auf der Website aussehen:

Viel Erfolg

Marvin_G schrieb am 12.06.2015 um 16:31 Uhr

Cool
Jetzt fünktioniert es so wie ich es wollte.

Danke :)