NAVIGATION
This is an old revision of the document!
Umfangreicher Slider mit vielen Effekten (auch LightBox), der auf JS mit MooTools V1.2 basiert.
Ein brauchbares Fallback ohne JS ist vorhanden.
Beispiele und Basis: http://www.electricprism.com/aeron/slideshow/
Alle Funktionen sind eingebaut.
Google Projekt (Hilfen/FAQ/Beschreibung: http://code.google.com/p/slideshow/
Idee und Scripte: Aeron Glemann
Adaptiert nach phpwcms: Knut Heermann
Ich habe noch nicht entschieden, ob meine Variante des Script frei verfügbar ist (PHP core) → Anfragen möglich..
Update: Ich werde eine einfache Version bereitstellen ohne TAGs im CP. (Die gesamte Steuerung wird dann im Template oder der *.JS-Datei eingestellt).
Docu: –
Forum: –
Idee und Basis: Aeron Glemann
Adaptiert: K.Heermann (flip-flop) http://planmatrix.de 2009/11/13
CMS version: >= V1.4.4 r381
Version: V1.1
Update: –
Tag: Die Steuerung kann über TAGs im Notizfeld vorgenommen werden.
Dateiename: cp_trig_images_slideshow2.php
Verzeichnis: /template/inc_script/frontend_init/
Dateiename: slideshow2.tmpl
Verzeichnis: /template/inc_cntpart/images/
Dateiename: slideshow2_1.css
Dateiename: slideshow2_2.css
Verzeichnis: /template/inc_css/specific/mootools/
Dateinamen: *.js (spezielle JScripte)
Verzeichnis: template/inc_js/mootools/slideshow2!/js/
Dateinamen: *.gif *.png (Images für Steuerung und Hintergrund)
Verzeichnis: template/inc_js/mootools/slideshow2!/css/
Bedingung: → /config/phpwcms/conf.inc.php * $phpwcms['allow_cntPHP_rt'] = 1;
Neue Tags im template:
Mit diesen TAGs im Notizfeld des CP wird die Darstellung gesteuert
Beispiel: http://www.electricprism.com/aeron/slideshow/index.html.
TAG Options: http://code.google.com/p/slideshow/wiki/Slideshow
→ {aktiviert} {#deaktiviert}
1. Installation:
2. Im Gebrauch:
<note important>
</note>
Datei: /template/inc_css/specific/mootools/slideshow2_1.css
/** Stylesheet: Slideshow.css CSS for Slideshow. License: MIT-style license. Copyright: Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/). HTML: <div class="slideshow"> <div class="slideshow-images" /> <div class="slideshow-captions" /> <div class="slideshow-controller" /> <div class="slideshow-loader" /> <div class="slideshow-thumbnails" /> </div> Notes: These next four rules are set by the Slideshow script. You can override any of them with the !important keyword but the slideshow probably will not work as intended. */ .slideshow { display: block; position: relative; z-index: 0; } .slideshow-images { display: block; overflow: hidden; position: relative; } .slideshow-images img { display: block; position: absolute; z-index: 1; } .slideshow-thumbnails { overflow: hidden; } /** HTML: <div class="slideshow-images"> <img /> <img /> </div> Notes: The images div is where the slides are shown. Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc. */ .slideshow-images { height: 400px; /* KH changed */ width: 500px; /* KH changed */ } .slideshow-images-visible { opacity: 1; } .slideshow-images-prev { opacity: 0; } .slideshow-images-next { opacity: 0; } .slideshow-images img { float: left; left: 0; top: 0; } /** Notes: These are examples of user-defined styles. Customize these classes to your usage of Slideshow. */ .slideshow { height: 400px; /* KH changed */ margin: 0 auto; width: 500px; /* KH changed */ } .slideshow a img { border: 0; } /** HTML: <div class="slideshow-captions"> ... </div> Notes: Customize the hidden / visible classes to affect the captions animation. */ .slideshow-captions { background: #000; bottom: 0; color: #FFF; font: normal 12px/22px Arial, sans-serif; left: 0; overflow: hidden; position: absolute; text-indent: 10px; width: 100%; z-index: 10000; } .slideshow-captions-hidden { height: 0; opacity: 0; } .slideshow-captions-visible { height: 22px; opacity: .7; } /** HTML: <div class="slideshow-controller"> <ul> <li class="first"><a /></li> <li class="prev"><a /></li> <li class="pause play"><a /></li> <li class="next"><a /></li> <li class="last"><a /></li> </ul> </div> Notes: Customize the hidden / visible classes to affect the controller animation. */ .slideshow-controller { background: url(../../../inc_js/mootools/slideshow2!/css/controller.png) no-repeat; height: 42px; left: 50%; margin: -21px 0 0 -119px; overflow: hidden; position: absolute; top: 50%; width: 238px; z-index: 10000; } .slideshow-controller * { margin: 0; padding: 0; } .slideshow-controller-hidden { opacity: 0; } .slideshow-controller-visible { opacity: 1; } .slideshow-controller a { cursor: pointer; display: block; height: 18px; overflow: hidden; position: absolute; top: 12px; } .slideshow-controller a.active { background-position: 0 18px; } .slideshow-controller li { list-style: none; } .slideshow-controller li.first a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-first.gif); left: 33px; width: 19px; } .slideshow-controller li.last a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-last.gif); left: 186px; width: 19px; } .slideshow-controller li.next a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-next.gif); left: 145px; width: 28px; } .slideshow-controller li.pause a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-pause.gif); left: 109px; width: 20px; } .slideshow-controller li.play a { background-position: 20px 0; } .slideshow-controller li.play a.active { background-position: 20px 18px; } .slideshow-controller li.prev a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-prev.gif); left: 65px; width: 28px; } /** HTML: <div class="slideshow-loader" /> Notes: Customize the hidden / visible classes to affect the loader animation. */ .slideshow-loader { height: 28px; right: 0; position: absolute; top: 0; width: 28px; z-index: 10001; } .slideshow-loader-hidden { opacity: 0; } .slideshow-loader-visible { opacity: 1; } /** HTML: <div class="slideshow-thumbnails"> <ul> <li><a class="slideshow-thumbnails-active" /></li> <li><a class="slideshow-thumbnails-inactive" /></li> ... <li><a class="slideshow-thumbnails-inactive" /></li> </ul> </div> Notes: Customize the active / inactive classes to affect the thumbnails animation. Use the !important keyword to override FX without affecting performance. */ .slideshow-thumbnails { bottom: -95px; /* KH changed -65px; */ height: 95px; /* KH changed 65px; */ left: 0; position: absolute; width: 100%; } .slideshow-thumbnails * { margin: 0; padding: 0; } .slideshow-thumbnails ul { height: 95px; /* KH changed 65px; */ left: 0; position: absolute; top: 0px; width: 10000px; } .slideshow-thumbnails li { float: left; list-style: none; margin: 5px 5px 5px 0; position: relative; } .slideshow-thumbnails a { display: block; float: left; padding: 5px; position: relative; } .slideshow-thumbnails a:hover { background-color: #FF9 !important; opacity: 1 !important; } .slideshow-thumbnails img { display: block; } .slideshow-thumbnails-active { background-color: #9FF; opacity: 1; } .slideshow-thumbnails-inactive { background-color: #FFF; opacity: .5; }
Datei: /template/inc_css/specific/mootools/slideshow2_2.css
/** Stylesheet: Demo.css CSS for Slideshow demos. License: Creative Commons license. Copyright: Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/). */ body { background: #E5E5E5 url(../../../inc_js/mootools/slideshow2!/css/body.gif) repeat-x; /* text-align: center; */ } a { color: #404040; cursor: pointer; text-decoration: underline; } a:hover { text-decoration: none; } strong { color: #000; font-weight: normal; } .slideshow { background: url(../../../inc_js/mootools/slideshow2!/css/slideshow2t.gif) no-repeat; height: 578px; /* test 628 KH changed 548px; */ width: 560px; } .slideshow-captions { background: #FFF; bottom: 139px; /* test 189 KH changed 109px;*/ color: #000; font: normal 12px/20px Arial, sans-serif; left: 30px; text-align: center; width: 500px; } .slideshow-captions-visible { height: 20px; opacity: 1; } .slideshow-controller { margin: -44px 0 0 -119px; top: 50%; } .slideshow-images { left: 30px; height: 400px; /* KH changed 300px; */ top: 37px; width: 500px; /* KH changed 400px; */ } .slideshow-images img { position: static; } .slideshow-thumbnails { bottom: 0; height: 115px; /* test 165 KH changed 85px; */ left: 20px; overflow: auto; width: 520px; /* test 520 */ } .slideshow-thumbnails ul { height: 90px; /* KH changed 60px; */ width: 1100px; /* KH test 530px */ } .slideshow-thumbnails li { margin: 0 5px 0 0; } .slideshow-thumbnails a { background: url(../../../inc_js/mootools/slideshow2!/css/thumbnails-a.gif); float: left; opacity: .5; padding: 10px; } .slideshow-thumbnails a img { border: 0; } .slideshow-thumbnails .overlay { bottom: 25px; height: 90px; /* KH changed 60px; */ position: absolute; width: 30px; z-index: 10000; } .slideshow-thumbnails .overlay.a { background: url(../../../inc_js/mootools/slideshow2!/css/thumbnails-a.png); left: 0; } .slideshow-thumbnails .overlay.b { background: url(../../../inc_js/mootools/slideshow2!/css/thumbnails-b.png); right: 0; } /* CSS-based transitions: Infinite effects */ .slideshow-alternate-images { left: 30px; height: 400px; /* KH changed 300px; */ top: 39px; width: 500px; /* KH changed 400px; */ } .slideshow-alternate-images img { float: left; } .slideshow-alternate-images-visible { left: 0; opacity: 1; top: 0; } .slideshow-alternate-images-next { left: 0; opacity: 0; top: 400px; /* KH changed 300px; */ } .slideshow-alternate-images-prev { left: 0; opacity: 0; top: -400px; /* KH changed -300px; */ } /* Thumbnails: Intelligent and auto-scrolling */ .slideshow-alternate-thumbnails { height: 421px; /* KH changed 321px */ position: absolute; right: -64px; top: 28px; width: 70px; } .slideshow-alternate-thumbnails * { margin: 0; padding: 0; } .slideshow-alternate-thumbnails ul { height: 500px; left: 0; position: absolute; top: 0; width: 70px; } .slideshow-alternate-thumbnails li { float: left; list-style: none; margin: 0 0 5px 0; position: relative; } .slideshow-alternate-thumbnails a { background: url(../../../inc_js/mootools/slideshow2!/css/thumbnails-a.gif); display: block; opacity: .5; padding: 10px; position: relative; } .slideshow-alternate-thumbnails a:hover { opacity: 1 !important; } .slideshow-alternate-thumbnails a img { border: 0; } .slideshow-alternate-thumbnails img { display: block; } .slideshow-alternate-thumbnails-active { opacity: 1; } .slideshow-alternate-thumbnails-inactive { opacity: .5; } .slideshow-alternate-thumbnails .overlay { left: 0; height: 30px; position: absolute; width: 100%; z-index: 10000; } .slideshow-alternate-thumbnails .overlay.a { background: url(../../../inc_js/mootools/slideshow2!/css/vertical-thumbnails-a.png); top: 0; } .slideshow-alternate-thumbnails .overlay.b { background: url(../../../inc_js/mootools/slideshow2!/css/vertical-thumbnails-b.png); bottom: 0; } /* Controller: Accessible and style-able */ .slideshow-alternate-controller { background: url(../../../inc_js/mootools/slideshow2!/css/controller.png) no-repeat; height: 42px; left: 50%; margin: -21px 0 0 -119px; overflow: hidden; position: absolute; top: 50%; width: 238px; z-index: 10000; } .slideshow-alternate-controller * { margin: 0; padding: 0; } .slideshow-alternate-controller-hidden { margin-top: -200px; opacity: 0; } .slideshow-alternate-controller-visible { margin-top: -42px; opacity: 1; } .slideshow-alternate-controller a { cursor: pointer; display: block; height: 18px; overflow: hidden; position: absolute; top: 12px; } .slideshow-alternate-controller a.active { background-position: 0 18px; } .slideshow-alternate-controller li { list-style: none; } .slideshow-alternate-controller li.first a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-first.gif); left: 33px; width: 19px; } .slideshow-alternate-controller li.last a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-last.gif); left: 186px; width: 19px; } .slideshow-alternate-controller li.next a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-next.gif); left: 145px; width: 28px; } .slideshow-alternate-controller li.pause a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-pause.gif); left: 109px; width: 20px; } .slideshow-alternate-controller li.play a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-play.gif); } .slideshow-alternate-controller li.prev a { background-image: url(../../../inc_js/mootools/slideshow2!/css/controller-prev.gif); left: 65px; width: 28px; }
Datei: /template/inc_script/frontend_init/cp_trig_images_slideshow2.php
The core