Tutorial "Image Slider"
Posted: 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
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