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