Differences

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

deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:einfach [2011/01/12 12:40]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:einfach [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 98: Line 98:
  * **[%WIDTH:400%][%HEIGHT:300%]** //(Breite und Höhe der auszugebenden Bilder)//   * **[%WIDTH:400%][%HEIGHT:300%]** //(Breite und Höhe der auszugebenden Bilder)//
  * **[%PREVNEXT:0%]** //(Schalter um bei der SlimBox-Ausgabe PREV/NEXT zu aktivieren. Bei Aktivierung ist kein autom. Scrollen der Thumbnails möglich. Bedingung: LightBox-Schalter im CP auf "ein". )//   * **[%PREVNEXT:0%]** //(Schalter um bei der SlimBox-Ausgabe PREV/NEXT zu aktivieren. Bei Aktivierung ist kein autom. Scrollen der Thumbnails möglich. Bedingung: LightBox-Schalter im CP auf "ein". )//
-  * **[%THUMBNAIL:1%]** //(Keine Thumbnaildarstellung)// +  * **[%THUMBNAIL:1%]** //(Thumbnailausgabe ein/aus)// 
-  * **[%THUMBVERTICAL:0%]** //(ThumbnailScrollleiste in vertikaler Darastellung)// +  * **[%THUMBVERTICAL:0%]** //(ThumbnailScrollleiste in vertikaler Darastellung ein/aus)// 
-  * **[%THUMBNOSLIDE:0%]** //(Kein autom. Scrollen der Thumbnails, vertikaler Schiebebalken erscheint)// +  * **[%THUMBNOSLIDE:0%]** //(autom. Scrollen der Thumbnails ein/aus, bei "aus" erscheint ein vertikaler Schiebebalken)// 
-  * **[%WIPING:0%]** //(Spezieller Bilderwechsel (Schieben) )//+  * **[%WIPING:0%]** //(Spezieller Bilderwechsel ein/aus (Schieben) )//
-> {**1** = aktiviert}  {**0** = deaktiviert} -> {**1** = aktiviert}  {**0** = deaktiviert}
Line 148: Line 148:
\\ \\
 +\\
**1.** Installation: **1.** Installation:
-  * .+  * Download des Paketes 
 +  * Upload auf den eigenen Account in die vorgegebenen Verzeichnisse
**2.** Im Gebrauch: **2.** Im Gebrauch:
Line 157: Line 159:
  * Sichern und das Ergebnis im FE ansehen :-)   * Sichern und das Ergebnis im FE ansehen :-)
-<note important> 
- 
-</note> 
\\ \\
Line 168: Line 167:
===== Template: ===== ===== Template: =====
-**Datei:**  /template/inc_cntpart/images/slideshow2_simple_default.tmpl+**Datei:**  /template/inc_cntpart/images/slideshow2_simple_default.tmpl \\  
 +//(Im Downloadpaket enthalten)//
<code html |h slideshow2_simple_default.tmpl |h > <code html |h slideshow2_simple_default.tmpl |h >
Line 381: Line 381:
- 
- 
- 
- 
- 
-===== CSS: ===== 
- 
-**Datei:** /template/lib/aeron_slideshow2/slideshow.css (Ist bereits vorhanden) 
- 
-<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: 300px; 
- width: 400px; 
-}  
-.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: 300px; 
-/* margin: 0 auto; */ 
- margin: 10px; 
- width: 400px; 
-} 
-.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(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(controller-first.gif); 
- left: 33px; 
- width: 19px; 
-} 
-.slideshow-controller li.last a { 
- background-image: url(controller-last.gif); 
- left: 186px; 
- width: 19px; 
-} 
-.slideshow-controller li.next a { 
- background-image: url(controller-next.gif); 
- left: 145px; 
- width: 28px; 
-} 
-.slideshow-controller li.pause a { 
- background-image: url(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(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: -65px; 
- height: 65px; 
- left: 0; 
- position: absolute; 
- width: 100%; 
-} 
-.slideshow-thumbnails * { 
- margin: 0; 
- padding: 0; 
-} 
-.slideshow-thumbnails ul { 
- height: 65px; 
- left: 0; 
- position: absolute; 
- top: 0; 
- 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> 
- 
-\\ 
===== PHP: ===== ===== PHP: =====
-**Datei:** /template/inc_script/frontend_init/cp_trig_images_slideshow2_simple.php \\+**Datei:** /template/inc_script/frontend_init/cp_trig_images_slideshow2_simple.php \\  
 +//(Im Downloadpaket enthalten)// \\
-<code php |h cp_trig_images_slideshow2.php |h >+<code php |h cp_trig_images_slideshow2_simple.php |h >
<?php <?php
// ------------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------------
Line 697: Line 397:
// ------------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------------
   
-// V1.1  13.11.09 KH  Ohne Grafiken in JS-Head, diese werden vom JS Script aus den HTML-Grafiken ausgelesen +/********************************************************************************************** 
-// Based on http://code.google.com/p/slideshow/  + * SIMPLE Version 
-// V1.2  12.10.10 KH Update: new gif image is generated with width/height from CP TAG + * V1.1  13.11.09 KH  Ohne Grafiken in JS-Head, diese werden vom JS Script aus den HTML-Grafiken ausgelesen 
-// V1.3  21.10.10 KH Update: {CAPTURE} TAG implemented in command field of the CP + * Based on http://code.google.com/p/slideshow/  
-// V1.4  18.11.10 KH Update: Var {$GLOBALS['crow'] changed to $data  + * V1.2  12.10.10 KH Update: new gif image is generated with width/height from CP TAG 
-// (E.g. a call with "show_content" was not possible because global variables used by the calling location)+ * V1.4  18.11.10 KH Update: Var {$GLOBALS['crow'] changed to $data  
 + * (E.g. a call with "show_content" was not possible because global variables used by the calling location) 
 + * 18.11.10 KH Update: Simple Version generated 
 + *  
 + ***********************************************************************************************/
   
   
Line 1016: Line 720:
\\ \\
 +===== CSS: =====
 +
 +**Datei:** /template/lib/aeron_slideshow2/slideshow.css \\
 +//(Im Downloadpaket enthalten)//
 +
 +Die CSS-Datei ist die einfache Version des Originals von  Aeron Glemann.
 +
 +
 +\\
 +
 +
 +===== DOWNLOAD: =====
 +
 +Komplettes Paket mit Template, PHP-Script und Aeron-slideshow2! Dateien.
 +
 +{{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:aeron_slideshow2_simple.zip|}}
 +\\
deutsch/phpwcms-system/artikel/contentparts/bilder-div/aeron-slideshow2/einfach.1294832413.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