Tutorial "Image Slider"

santscho · Post by **santscho** » Sat 21. Nov 2009, 02:39

Hier die simple Variante meines Sliders. Beispiel: http://www.asiandiver.com

Das Packet kann hier runtergeladen werden: http://www.mediasolution.com.sg/downloa ... ersion.zip
[EDIT]: Das Packet kann hier runtergeladen werden: http://yaml.phpwcms.org/cp-bilder-spezial.phtml[/EDIT]

1. Java-Scripts auf den Webserver kopieren
(root -> template -> js)
Anmerkung: Die Java-Scripts sind so modifiziert, dass sie nicht mit den Standard-Javascripts in phpwcms kollidieren.
[EDIT]: In den neueren phpwcms-Versionen kann man jQuery als Standard JS-Bibliothek auswählen (im Template). In diesem Fall könnte man auch nicht modifizierte Java Scripts verwenden.[/EDIT]

2. Slider-Templates auf den Webserver kopieren
(root -> template -> inc_cntpart -> imagespecial

3. Slider-CSS auf Webserver kopieren
(root -> template -> inc_css)

4. Transparentes GIF hochladen
(root -> template -> inc_css -> screen -> images)
- Falls "transparent.gif" woanders gespeichert wird, muss der Pfad im "Slider_Slides.tmpl" angepasst werden

5. Die Links zu den Java-Scripts im Template integrieren:
(phpwcms -> ADMIN -> templates -> mein_template -> html head: <head>)

<script type="text/javascript" src="template/js/jquery-1.3.2.min.js"></script>
[EDIT]: In den neueren phpwcms-Versionen kann man jQuery als Standard JS-Bibliothek auswählen. In diesem Fall muss "jquery-1.3.2.min.js" nicht integriert werden[/EDIT]
<script type="text/javascript" src="template/js/jquery.cycle.js"></script>
<script type="text/javascript" src="template/js/slideshow.js"></script>

6. CSS-Datei im Template integrieren
(phpwcms -> ADMIN -> templates -> mein_template)

7. Slider-Contentpart erstellen (Images special)
- Slider_Slides.tmpl auswählen
- Die Bilder müssen auf die Endgrösse proportional skalierbar sein, damit die Slides nahtlos aufeinander folgen.
- "Caption" muss eine eindeutige ID erhalten
- URL mit entsprechenden Zielen ergänzen (_self/_blank)

8.Thumbnail-Contentpart erstellen (Images special)
- Slider_Thumbs.tmpl auswählen
- Thumbnail-Bilder in der gleichen Reihenfolge wie die Slides einlesen
- Die Caption-ID entsprechend den Slides vergeben

XING · Post by **markus s** » Sat 21. Nov 2009, 18:42

downloadlink ist nicht korrekt ?
[EDIT]now it works - perfekt - thx sancho

zuker · Post by **zuker** » Sat 21. Nov 2009, 20:55

That’s Great tutorial. Thanks Santscho for sharing it.

Image slider works perfect. ( I have tested

)

bicicletaire · Post by **bicicletaire** » Sat 9. Jan 2010, 13:30

Hi Santscho,

I'm triying to follow the tutorial you have posted, but I have problems when downloading the files. When I try to unzip them, it says that several files within the package have the same name and they can not be saved.

Aparentlly, it did work for Zuker...I may be doing something wrong, but as a "Newbee", I have no idea what it is...
Markus was writing:

downloadlink ist nicht korrekt ?
[EDIT]now it works - perfekt - thx sancho

...but I don't see any correction...can any one help me on that?

...and thanks anyway for your great tutorials. It is not the first time I'm following one of your tutorials, and they are always great! I'm learning a lot!

Olga

santscho · Post by **santscho** » Sat 9. Jan 2010, 16:50

I've downloaded the zip on windows and mac and both can open the zip.

Try this link:
http://www.mediasolution.com.sg/slides.zip

I hope it works for you.

G-Punkt · Post by **G-Punkt** » Sat 9. Jan 2010, 23:38

Das muß ich doch gleich einmal ausprobieren...
Thx4sharing

bicicletaire · Post by **bicicletaire** » Thu 14. Jan 2010, 11:07

Hallo!
Danke, hat geklappt! Etwas war falsch mit meinem computer!
Vielen Dank!
Olga

hausmeister · Post by **hausmeister** » Tue 6. Jul 2010, 09:26

danke für das tutorial. hat super geklappt. ich habe eine frage dazu. den effekt: fx: 'scrollLeft' kann man den auch durch einen fader ersetzen?

der hausmeister

santscho · Post by **santscho** » Wed 7. Jul 2010, 11:25

Du fragst mich was

Glaub nicht, dass das geht. Aber natürlich kannst Du Dir Deinen eigenen Image Fader basteln. Suche in einer js bibliothek (z.B. jQuery) nach Deinem Wunsch-Modul und funktioniere es in ein Images (Special) Template um. So hab ich es auch gemacht. Ist nicht so schwierig.

Ralph

phalancs · Post by **phalancs** » Mon 9. Aug 2010, 23:23

Ups, die Datei ist wieder down. Magst Du sie noch einmal online stellen? Das wäre super, danke

santscho · Post by **santscho** » Tue 10. Aug 2010, 06:43

Habe den Vertrag mit meinem Hoster nicht erneuert. Schlechter Service und zu teuer. Der Download ist aber wieder verfügbar: Siehe [EDITS] im ersten posting.

Post by **juergen** » Tue 10. Aug 2010, 21:48

http://yaml.phpwcms.org/?phpMyAdmin=tJk ... inez1mW1Sb

Ist auch nicht so das was man erwarten würde

santscho · Post by **santscho** » Wed 11. Aug 2010, 02:37

DF6IH wrote:http://yaml.phpwcms.org/?phpMyAdmin=tJk ... inez1mW1Sb

Ist auch nicht so das was man erwarten würde

Wenn Du sehen würdest, wie mein 19-Stunden-Tag bzw. meine 5-Stunden-Schlaf-Nacht aussieht, würdest Du verstehen, dass es für mich ein Ding der Unmöglichkeit ist, die YAML-Website auf dem neusten Stand zu bringen. Das Projekt habe ich gestartet, als ich noch keine Festanstellung in Singapur hatte.

1. Mit ein bisschen Verstand, lassen sich die Tutorials durchführen, auch wenn nicht auf neustem Stand.
2. Bisher habe ich jede Anfrage bezüglich der Tutorials beantwortet. In der Regel innrhalb 24 Stunden.
3. Wenn gewünscht (seitens User oder Oliver), werde ich die yaml.phpwcms.org Subdomain auflösen. Somit wäre dann das Projekt gestorben. – Siegeszug der YAML-Hasser unter den phpwcms-Benutzer.

So how?

eralf · Post by **eralf** » Tue 20. Aug 2013, 21:29

I use this slider an it works great !
But on one site: http://www.gbsderank.nl the option URL in the CP, works fine!!
But on the onther site it won't work

I have lookt everywere, but can not find the solution.
What does I do wrong ??

Old Boy · Post by **Old Boy** » Wed 21. Aug 2013, 01:35

prove the link of the Text "Vlinders"!!!

Tutorial "Image Slider"

Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"

Re: Tutorial "Image Slider"