NAVIGATION
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> | ||
\\ | \\ | ||