WebSite X5Help Center

 
Matthias S.
Matthias S.
User

Hmtl code einbinden ( Slide show)  de

Auteur : Matthias S.
Visité 648, Followers 2, Partagé 0  

ich habe mir mit Imageslidemaker eine Slideshow erstellt (Zip).

Es ist eine Readme mit dabei, aber irgendwie habe ich trotzdem kein Plan. wie ich das in Website X5 Evo einbinden kann. Kann mir da bitte jemand helfen, bzw gibt´s da ein manual.

Ich weiß halt das man auf HTLM Code einfügen gehen muß und dann, wo geb ich den head bzw. Bodx ein usw.

Ich bedanke mich schon mal

Gr.Mathew

Posté le
9 RéPONSES
Matthias S.
Matthias S.
User
Auteur

natürlich meinte ich HTML . . . 

Lire plus
Posté le de Matthias S.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Kleine Anleitung:

A) Code aus der Datei example.html bei Website X5 einfügen unter ...

1 Einstellungen > Statistiken und Code / Code

Benutzerdefinierte Code:

Vor dem </HEAD>-Tag

<style> body { background-color: #fff; color: #000; padding: 0; margin: 0; } .container { width: 900px; margin: auto; padding-top: 1em; } .container .ism-slider { margin-left: auto; margin-right: auto; } </style> <linkrel="stylesheet" href="ism/css/my-slider.css"/> <scriptsrc="ism/js/ism-2.2.min.js"></script>

B) Code aus der Datei example.html bei Website X5 einfügen unter ...

4 Seiten

... auf der gewünschten Seite in einem HTML-Objekt:

<div class="ism-slider" id="my-slider">
<ol>
<li>
<img src="ism/image/slides/_u/1699912423392_630464.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/_u/1699912423446_876862.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/_u/1699912423053_979350.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/architecture-22039_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
</ol>
</div>

C) Mit einem FTP-Programm (z.B. FileZilla) den Ordner ism (inkl. Unterordner und Dateien) auf der Festplattenseite markierenden und auf den Webspace laden, da wo auch die index.html der eigenen Webseite liegt.

Alternative zum FTP-Programm:

Man könnte auch das FTP-Fenster von WebSite X5 verwenden, aber dann müsste man erst jeden Ordner und darin die Unterordner erst anlegen und danach die jeweiligen Dateien in die verschiedenen Ordner und Unterordner hochladen. Aber das ist zu umständlich, einfacher geht es mit einem FTP-Prgramm.

Anzusehen auf meiner Testseite

>> http://finde-links.de/test123evo/slider-demo.html

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Achtung: 

Den Code aus der Datei example.html kopieren, denn mit dem geposteten Code hier in der Community gibt es sehr wahrscheinlich Probleme wegen fehlendem Leerzeichen, das zu einem Fehler führt.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Nachtrag zum Code bei B) - hier muss am Anfang noch das ...

<divclass='container'>

... und am Ende noch das ...

</div>

... hinzugefügt werden.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Nachtrag zu Code bei A) - hier für mobile Geräte die Breite des Container statt in px in % angeben, damit der Slider sich an die Breite von Smartphones anpasst.

Code-Ausschnitt mit anzupassender Stelle (fett):

.container { width: 90%;

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Smartphone-Simulation in Firefox.

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

Zum Abschluß - neue Testseite und neue Anleitung.

Ich habe jetzt selber mal testweise mit Imageslidemaker eine kleine Bilder-Slideshow erstellt.

Die Anleitung habe ich korrigiert und mit auf meine neue Testseite gestellt, siehe

>> http://finde-links.de/test123evo/imageslider.html (Testseite mit Evo Version erstellt)

PS.: Die andere Testseite werden ich evtl. später löschen.

----- Testseite als Smartphone-Simulation auf Firefox -----

Lire plus
Posté le de Daniel W.
Matthias S.
Matthias S.
User
Auteur

Wow, vielen Dank für die schnelle Antwort !!!!

werde ich  gleich heute Abend testen.

Lire plus
Posté le de Matthias S.
Matthias S.
Matthias S.
User
Auteur

Danke für die Hilfe, hat wunderbar funktioniert. embarassed

Lire plus
Posté le de Matthias S.