Karusell Slidshow auf Jimdo adaptieren
Hallo HeLy,
wie Du das einbinden kannst, steht eigentlich alles auf diesen Seiten:
http://malsup.com/jquery/cycle2/demo/basic.php/
http://malsup.com/jquery/cycle2/download/
http://malsup.com/jquery/cycle2/download/advanced.php/
Zitat
The following plugins and features are optional and are not included in the main distribution file linked above. To use these features simply download the desired plugin file and include it on your page immediately after the script tag for cycle2. For example, to use the carousel slideshow effect you would declare the following script tags:
Du musst also den folgenden Code bei dir im Head-Bereich einsetzen:
2
3
4
5
6
7
8
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="path/to/your/copy/of/jquery.cycle2.js"></script>
<!-- include one or more optional Cycle2 plugins -->
<script src="path/to/your/copy/of/jquery.cycle2.carousel.js"></script>
...wobei "path/to/your/copy/of/" Dein Pfad zu der entsprechenden js-Datei ist. um den zu bekommen, musst Du Dir die Dateien zuerst herunterladen (von der Download-Seite), dann lädst Du sie auf Deiner Jimdo-Page hoch (versteckte Seite), und von dort holst Du Dir den Download-link.
Das html für Deine Slideshow bekommst Du dann hier:
http://malsup.com/jquery/cycle2/demo/basic.php
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hmm, das habe ich schon versucht, wobei ich die js Dateine vorerst mal nicht heruntergeladen haben sondern auf den Pfad verwiesen habe wie er auch im Seitenquelltext zu finden ist. Zum Ausprobieren geht das schon mal, lokal speichere ich das dann erst, wenn mir die Seite läuft.
Es hat aber im Quelltext so einiges, welches ich nicht richtig zuordnen kann, ich bin ja kein Profi:
...
Ist mir nicht klar, wo das hingehört, und das ist auch nicht beschrieben.
Sorry, ich mache halt Learning by doing (and asking...)
HG Heinz
PS: Bin erst am Morgen kurz wieder online!
...kein Problem, so hab ich das auch gelernt.
Den meisten Code, den Du da drin hast, brauchst Du wirklich nicht. Das einfachste wird sein, wirklich step for step vorzugehen, wie es auf den Hilfe-Seiten steht.
LG, az
PS: ich hab den ganzen Quelltext aus Deinen Postings gelöscht. Links sind OK, Quelltext kann u.U. geschützt sein. Ich nehme das noch in meinen Pretext auf...
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hi there,
habt ihr schon mal von Slick gehört? Wenn nicht, schau mal hier: http://t3n.de/news/slick-das-carousel-skript-548131/
und hier: http://kenwheeler.github.io/slick/
kostnix.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo Heinz,
...das ist gar nicht so schwer. Du brauchst ein Beispiel. Nehmen wir einmal einen anderen Slider, bei dem das schön übersichtlich ist. Schau mal hier: http://www.redesign-berlin.de/jimdo-tuto...ider-slideshow/
1. Du findest auf der Seite ein CSS-Script (flexslider.css) und ein JS-Script (flexslider-js.txt).
Den Inhalt dieser beiden Dateien schreibst Du in den Head-Berich Deiner Webseite. Dazu benutzt Du "Einstellungen>Head bearbeiten". Einfach die Dateien mit Textedit oder dem Windows-Editor öffnen, und den Inhalt bei "Head bearbeiten" einsetzen.
2. Auf der Seite, auf der der Slider erscheinen soll, setzt Du ein html-Widget Element ein. Hier hinein kopierst Du den Code für den Slider:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="flexslider">
<ul class="slides">
<li>
<img src="URL(Bild1)" alt="" />
</li>
<li>
<img src="URL(Bild2)" alt="" />
</p>
</li>
<li>
<img src="URL(Bild3)" alt="" />
</li>
<li>
<img src="URL (Bild4)" alt="" />
</li>
</ul>
</div>
3. Jetzt müssen nur noch die Pfade für die Bilder geändert werden: statt "URL(Bild1)" schreibst Du (z.B. für dasLogo auf meiner Webseite)
"url('http://u.jimdo.com/www32/o/s69854fd48482...0/std/image.png')"
Diese URL ist die Adresse, unter der Das Bild im Internet zu finden ist. Alle Bilder im Slider müssen nämlich online sein. Wenn Du ein Bild auf Deiner Webseite hochgeladen hast, klickst Du mit der rechten Maustaste (RMT) auf das Bild und wählst dann "Adresse kopieren" oder "Bild-URL kopieren"
4. Jetzt erscheint das Bild bereits im Slider. Das machst Du auch noch für die übrigen Bilder, und der Slider ist fertig.
LG, az
PS: im Prinzip funzen die Slick-Slider genauso...
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
