Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2 [2011/01/12 13:32]
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.
\\ \\
Line 48: Line 48:
-===== 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> 
\\ \\
deutsch/phpwcms-system/artikel/contentparts/bilder-div/aeron-slideshow2.1294835551.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0