Differences

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

deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2 [2010/06/17 09:30]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2 [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>30}} {{indexmenu_n>30}}
-====== slideshow2! ======+====== Aeron slideshow2! ======
Line 19: Line 19:
    * Automagic Slideshows - Erstellen Sie Diashows aus bestehenden HTML-Bilder (//hier nicht relevant)//.     * Automagic Slideshows - Erstellen Sie Diashows aus bestehenden HTML-Bilder (//hier nicht relevant)//.
    * 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 eine 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 29: Line 29:
Adaptiert nach phpwcms: [[http://planmatrix.de|Knut Heermann]] Adaptiert nach phpwcms: [[http://planmatrix.de|Knut Heermann]]
-FIXME Ich habe noch nicht entschieden, ob meine Variante des Script frei verfügbar ist //(PHP core) -> Anfragen möglich.//.+Es sind zwei Varianten verfügbar:   
 +  - **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.
\\ \\
-==== 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|}}
-==== Backend: ==== 
 +==== Frontend erweitert: ====
 +{{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:slideshow2_fe_1.gif|}}
-{{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:slideshow2_be_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 //(siehe [[http://www.electricprism.com/aeron/slideshow/index.html]])//.  
-  * {PAUSED}{RESIZE}{OVERLAP}{#LOOP}{#RANDOM} 
-  * {THUMBNAIL}{#THUMBVERTICAL}{#THUMBNOSLIDE} 
-  * {CONTROLLER}{#PREVNEXT}{#FUZZYEDGE} 
-  * {#KENBURNS}{#PUSH}{#FLASH}{#FOLD}{#WIPING} 
-  * {DURATION:1500}{DELAY:3750}{#FAST}{#TRANSITION-1} 
-  * {WIDTH:500}{HEIGHT:400} 
--> {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 > 
-<!--slidebox2!//-->  
-<!--IMAGES_HEADER_START//--> 
- 
-[TITLE]<h1>{TITLE}</h1>[/TITLE] 
-[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE] 
- 
- 
-<div class="images" id="images{ID}"> 
- 
- <div id="show" class="slideshow"> 
- 
-[CP_TRIG_WRAP_CONTENT] 
-<!--slideshow2!//--> 
-<!--IMAGES_HEADER_END//--> 
- 
- 
-<!--IMAGES_ENTRY_START//--> 
-[CP_TRIG_WRAP] 
- 
-[CP_TRIG_IMG]{IMAGE}[/CP_TRIG_IMG] 
-[CP_TRIG_STR]    <a {CP_TRIG_REL_LIGHBOX} href="{IMAGE_REL}"><img id="slide-{CP_TRIG_CLASS_ID}" src="{IMAGE_REL}" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" alt="[CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE]"  style="{CP_TRIG_WIDTH_HEIGHT} {CP_TRIG_LEFT_TOP}" /></a>[/CP_TRIG_STR] 
- 
-[CP_TRIG_THUMB]    <li><a href="#slide-{CP_TRIG_CLASS_ID}"><img src="{THUMB_REL}" width="{THUMB_WIDTH}" height="{THUMB_HEIGHT}" alt="[CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE]" /></a></li>[/CP_TRIG_THUMB] 
-[/CP_TRIG_WRAP] 
- 
- 
-<!--IMAGES_ENTRY_END//--> 
- 
- 
-<!--IMAGES_ENTRY_SPACER_START//--> 
- 
- <!-- space between images {SPACE}px --> 
- 
-<!--IMAGES_ENTRY_SPACER_END//--> 
- 
- 
-<!--IMAGES_ROW_SPACER_START//--> 
- 
- <!-- space between image rows {SPACE}px --> 
- 
-<!--IMAGES_ROW_SPACER_END//--> 
- 
- 
-<!--IMAGES_FOOTER_START//--> 
-[/CP_TRIG_WRAP_CONTENT] 
-</div> 
- 
-[TEXT]{TEXT}[/TEXT] 
- 
-[CP_TRIG_WRAP_FOOTER] 
-[PHP] 
- 
-//initMootools(); 
-initJSLib(); 
- 
-$mootools_more = array( 'Utilities/Assets','Fx/Fx.Elements' ); 
-initJSPlugin($mootools_more, true); 
- 
-$GLOBALS['block']['custom_htmlhead']['slideshow2_1.css'] = '   <link href="'.TEMPLATE_PATH.'inc_css/specific/mootools/slideshow2_1.css" rel="stylesheet" type="text/css" media="screen" />'; 
-$GLOBALS['block']['custom_htmlhead']['slideshow2_2.css'] = '   <link href="'.TEMPLATE_PATH.'inc_css/specific/mootools/slideshow2_2.css" rel="stylesheet" type="text/css" media="screen" />'; 
- 
-// -[CP_TRIG_WRAP_CSS_WIPING] 
-$GLOBALS['block']['custom_htmlhead']['slideshow2_resize'] = '  <style type="text/css"> 
-    /* Overriding the default Slideshow styles in order to achieve a custom effect */ 
-     
-    .slideshow-images-visible {margin-left: 0;} 
-    .slideshow-images-prev { margin-left: {CP_TRIG_WIDTH}px;} 
-    .slideshow-images-next { margin-left: -{CP_TRIG_WIDTH}px;} 
-  </style>'; 
-// -[/CP_TRIG_WRAP_CSS_WIPING] 
- 
-// -[CP_TRIG_WRAP_CSS_THUMBVERTICAL] 
-$GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_vertical'] = '  <style type="text/css"> 
-    /* Overriding the default Slideshow thumbnails for the vertical presentation */ 
- 
-    .slideshow-thumbnails { 
-     height: {CP_TRIG_HEIGHT}px; 
-     left: auto; 
-     right: -125px; 
-     top: 10px; 
-     width: 125px; 
-     margin: 20px 0 0 0;  
-    } 
-    .slideshow-thumbnails ul { 
-     height: 500px; 
-     width: 105px; 
-    } 
-    .slideshow {height: 500px;}          /* 578 */ 
-    .slideshow-captions {bottom: 61px;}  /* 139 */ 
-  </style>'; 
-// -[/CP_TRIG_WRAP_CSS_THUMBVERTICAL] 
- 
-// -[CP_TRIG_WRAP_CSS_THUMBNOSLIDE] 
-// No slide for thumbnails 
-$GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_noslide'] = '  <style type="text/css"> 
-    /* Overriding the default Slideshow thumbnails for the no slide presentation */ 
- 
-    .slideshow {height: 628px; } /* 578+50 */ 
-    .slideshow-captions {bottom: 189px;} /* 139+50 */ 
-     
-    .slideshow-thumbnails {height: 165px; }  /* 115+50 */ 
-    .slideshow-thumbnails ul {width: 530px;} 
-  </style>'; 
-// -[/CP_TRIG_WRAP_CSS_THUMBNOSLIDE] 
- 
- 
-// -[CP_TRIG_WRAP_FOOTER_JS] 
-$GLOBALS['block']['custom_htmlhead']['slideshow2.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/slideshow2!/js/slideshow.js" type="text/javascript"></script>'; 
-// -[CP_TRIG_WRAP_JS_KENBURNS] 
-$GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/slideshow2!/js/slideshow.kenburns.js" type="text/javascript"></script>'; 
-// -[/CP_TRIG_WRAP_JS_KENBURNS] 
-// -[CP_TRIG_WRAP_JS_PUSH] 
-$GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/slideshow2!/js/slideshow.push.js" type="text/javascript"></script>'; 
-// -[/CP_TRIG_WRAP_JS_PUSH] 
-// -[CP_TRIG_WRAP_JS_FLASH] 
-$GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/slideshow2!/js/slideshow.flash.js" type="text/javascript"></script>'; 
-// -[/CP_TRIG_WRAP_JS_FLASH] 
-// -[CP_TRIG_WRAP_JS_FOLD] 
-$GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/slideshow2!/js/slideshow.fold.js" type="text/javascript"></script>'; 
-// -[/CP_TRIG_WRAP_JS_FOLD] 
- 
- 
-$GLOBALS['block']['custom_htmlhead']['slideshow2'] = '  <script type="text/javascript"> 
-  //<![CDATA[ 
- window.addEvent(\'domready\', function(){ 
- var data = {}; 
- var myShow = new Slideshow{CP_TRIG_SLIDE_TYPE}(\'show\', null, { 
- captions: {CP_TRIG_CAPTION},  
- center: true,  
- controller: {CP_TRIG_CONTROLLER},  
- delay: {CP_TRIG_DELAY}, 
- duration: {CP_TRIG_DURATION}, 
- linked: {CP_TRIG_LINKED},  
- paused: {CP_TRIG_PAUSED},  
- height: {CP_TRIG_HEIGHT},  
- width: {CP_TRIG_WIDTH},  
- slide: {CP_TRIG_SLIDE},  
- thumbnails: {CP_TRIG_THUMBNAIL}, 
- fuzzyedge: {CP_TRIG_FUZZYEDGE}, 
- overlap: {CP_TRIG_OVERLAP}, 
- loop: {CP_TRIG_LOOP}, 
- random: {CP_TRIG_RANDOM}, 
- resize: {CP_TRIG_RESIZE}, 
- title: true, 
-[CP_TRIG_WRAP_JS_TRANSITION] 
- transition: \'elastic:out\', 
-[/CP_TRIG_WRAP_JS_TRANSITION] 
-[CP_TRIG_WRAP_JS_FOLD] 
- transition: \'bounce:out\', 
-[/CP_TRIG_WRAP_JS_FOLD] 
-[CP_TRIG_WRAP_JS_FLASH] 
- color: [\'#EC2415\', \'#7EBBFF\'], 
-[/CP_TRIG_WRAP_JS_FLASH] 
- fast: {CP_TRIG_FAST}}); 
-  
- 
-  
- }); 
-  
-  
-   //]]> 
-  </script>'; 
-   
- 
- 
-// -[/CP_TRIG_WRAP_FOOTER_JS] 
-// zoom: 25, 
-// transition: \'back:in:out\', 
-// push: transition: \'elastic:out\', 
-// fold: transition: \'bounce:out\', 
- 
- 
-Unset ($GLOBALS['block']['custom_htmlhead']['lightbox.css']); 
-Unset ($GLOBALS['block']['custom_htmlhead']['slimbox.js']); 
-// initializeLightbox(); 
-$GLOBALS['block']['custom_htmlhead']['lightbox.css'] = '  <link href="'.TEMPLATE_PATH.'lib/slimbox/slimbox.css" rel="stylesheet" type="text/css" media="screen" />'; 
-$GLOBALS['block']['custom_htmlhead']['slimbox.js'] = '  <script type="text/javascript" src="template/lib/slimbox/slimbox.mootools-1.2.js" ></script>'; 
- 
- 
- 
-[/PHP] 
-[/CP_TRIG_WRAP_FOOTER] 
-</div> 
-<!--IMAGES_FOOTER_END//--> 
- 
-</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.1276759826.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