This is an old revision of the document!


slideshow2!

Umfangreicher Slider mit vielen Effekten (auch LightBox), der auf JS mit MooTools V1.2 basiert.
Ein brauchbares Fallback ohne JS ist vorhanden.

Beispiele und Basis: http://www.electricprism.com/aeron/slideshow/
Alle Funktionen sind eingebaut.


  • Dynamische Größenänderung - Slideshow kann beliebige Bildgrößen präsentieren
    (In einem festen Rahmen).
  • Thumbnails - intelligent, auto-scrolling, tracking, etc.
  • Voll ausgestatteter Controller - komplett mit CSS einstellbar.
  • Bildtext - Einfacher Text oder formatiert mit HTML.
  • Voll zugänglich - Slideshow kann mit Schlüsselwerten kontrolliert werden.
  • Automagic Slideshows - Erstellen Sie Diashows aus bestehenden HTML-Bilder (hier nicht relevant).
  • 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 ).
  • Unaufdringlich und abbaubar - Slideshow-Funktionen auch bei ausgeschaltetem JavaScript!


Google Projekt (Hilfen/FAQ/Beschreibung: http://code.google.com/p/slideshow/

Idee und Scripte: Aeron Glemann
Adaptiert nach phpwcms: Knut Heermann

FIXME Ich habe noch nicht entschieden, ob meine Variante des Script frei verfügbar ist (PHP core) → Anfragen möglich..

Update: Ich werde eine einfache Version bereitstellen ohne TAGs im CP. (Die gesamte Steuerung wird dann im Template oder der *.JS-Datei eingestellt).


Frontend:

Backend:



Docu: –
Forum: –

Idee und Basis: 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:/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
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}
  • {#KENBURNS}{#PUSH}{#FLASH}{#FOLD}{#WIPING}
  • {DURATION:1500}{DELAY:3750}{#FAST}{#TRANSITION-1}
  • {WIDTH:500}{HEIGHT:400}{SLIDE:0}{#TITLES}

→ {aktiviert} {#deaktiviert}



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

slideshow2.tmpl

<!--slideshow2! simple//-->


CSS:

Datei: /template/inc_css/specific/mootools/slideshow2_1.css

slideshow2_1.css

/**
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;
}


Datei: /template/inc_css/specific/mootools/slideshow2_2.css

slideshow2_2.css

/**
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;
}


PHP:

Datei: /template/inc_script/frontend_init/cp_trig_images_slideshow2.php

FIXME


deutsch/phpwcms-system/artikel/contentparts/bilder-div/aeron-slideshow2.1276857841.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