NAVIGATION
This shows you the differences between two versions of the page.
deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2 [2011/01/12 13:30] Knut Heermann (flip-flop) |
deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2 [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 20: | Line 20: | ||
* Variable Hyperlinking Optionen - Slideshow kann ergänzt werden mit Lightbox, Slimbox, etc. | * Variable Hyperlinking Optionen - Slideshow kann ergänzt werden mit Lightbox, Slimbox, etc. | ||
* CSS Slide Übergänge - in Stylesheets gestaltet, kein JavaScript, ermöglicht viele Kombination von Effekten //(plus Unterstützung für alle Robert Penner Übergänge )//. | * CSS Slide Übergänge - in Stylesheets gestaltet, kein JavaScript, ermöglicht viele Kombination von Effekten //(plus Unterstützung für alle Robert Penner Übergänge )//. | ||
- | * Unaufdringlich und abbaubar - Slideshow-Funktionen auch bei ausgeschaltetem JavaScript! | + | * Sehr variabel - Slideshow-Funktionen auch bei ausgeschaltetem JavaScript! |
---- | ---- | ||
Line 30: | Line 30: | ||
Es sind zwei Varianten verfügbar: | Es sind zwei Varianten verfügbar: | ||
- | - Einfache Lösung in der die Parameter im Template eingestellt werden | + | - **Einfache Lösung**, in der die Parameter im Template eingestellt werden |
- | - Erweiterte Lösung, in der die Parameter im CP eingestellt werden. Dieses Paket ist gegen eine Spende oder Mitarbeit im wiki erhältlich. | + | - **Erweiterte Lösung**, in der die Parameter im CP eingestellt werden. Dieses Paket ist gegen eine Spende oder Mitarbeit im wiki erhältlich. |
\\ | \\ | ||
- | ==== Frontend: ==== | + | ==== Frontend simple: ==== |
- | {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:slideshow2_fe_1.gif|}} | + | {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:slideshow2_simple_fe_1.gif|}} |
+ | ==== Frontend erweitert: ==== | ||
+ | {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:slideshow2_fe_1.gif|}} | ||
- | ====== ====== | ||
- | ---- | ||
- | Docu: -- \\ | ||
- | Forum: -- | ||
- | **Idee und Basis:** [[http://www.electricprism.com/aeron/slideshow/|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:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] | ||
- | * $phpwcms['allow_cntPHP_rt'] = 1; | ||
- | * phpwcms['allow_ext_init'] = 1; | ||
- | |||
- | ---- | ||
- | ---- | ||
- | \\ | ||
- | \\ | ||
- | |||
- | ===== Beschreibung ===== | ||
- | |||
- | |||
- | |||
- | **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]] | ||
- | * {PAUSED}{RESIZE}{OVERLAP}{#LOOP}{#RANDOM} | ||
- | * {THUMBNAIL}{#THUMBVERTICAL}{#THUMBNOSLIDE} | ||
- | * {CONTROLLER}{#PREVNEXT}{#FUZZYEDGE}{CAPTION} | ||
- | * {#KENBURNS}{#PUSH}{#FLASH}{#FOLD}{#WIPING} | ||
- | * {DURATION:1500}{DELAY:3750}{#FAST}{#TRANSITION-1} | ||
- | * {WIDTH:500}{HEIGHT:400}{SLIDE:0}{TITLES} | ||
- | -> {aktiviert} {**#**deaktiviert} | ||
- | |||
- | <code> | ||
- | |||
- | </code> | ||
- | |||
- | \\ | ||
- | |||
- | **1.** Installation: | ||
- | * . | ||
- | |||
- | **2.** Im Gebrauch: | ||
- | * Fülle einen CP Bilder <div> mit deinen Einträgen //(Siehe Beispiel oben)//. | ||
- | * Wähle als Vorlage: **slideshow2.tmpl** | ||
- | * Einstellen der gewünschten Effekte im Notizfeld | ||
- | * Sichern und das Ergebnis im FE ansehen :-) | ||
- | |||
- | <note important> | ||
- | |||
- | </note> | ||
- | |||
- | \\ | ||
- | |||
- | |||
- | |||
- | |||
- | ===== Template: ===== | ||
- | |||
- | **Datei:** /template/inc_cntpart/images/slideshow2.tmpl | ||
- | |||
- | <code html |h slideshow2.tmpl |h > | ||
- | |||
- | <!--slideshow2! simple//--> | ||
- | |||
- | |||
- | </code> | ||
- | |||
- | \\ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== CSS: ===== | ||
- | |||
- | **Datei:** /template/inc_css/specific/mootools/slideshow2_1.css | ||
- | |||
- | <code css |h slideshow2_1.css |h > | ||
- | /** | ||
- | 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; | ||
- | } | ||
- | </code> | ||
- | |||
- | \\ | ||
- | **Datei:** /template/inc_css/specific/mootools/slideshow2_2.css | ||
- | |||
- | <code css |h slideshow2_2.css |h > | ||
- | /** | ||
- | 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; | ||
- | } | ||
- | |||
- | |||
- | </code> | ||
- | |||
- | \\ | ||
- | ===== PHP: ===== | ||
- | **Datei:** /template/inc_script/frontend_init/cp_trig_images_slideshow2.php \\ | ||
- | FIXME | ||
- | <code php |h cp_trig_images_slideshow2.php |h > | ||
- | The core | ||
- | </code> | ||
\\ | \\ | ||