[[slideshow2! erweitert]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Bilder <div> » Aeron slideshow2! » slideshow2! erweitert
Show pagesourceOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Table of Contents

slideshow2! erweitert

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 ).
  • Sehr variabel - 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

Erweiterte Version die für eine Spende oder Mitarbeit am wiki verfügbar ist (PHP core).


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}{CAPTION}
  • {#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





Gegen eine Spende oder Mitarbeit am wiki verfügbar.















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 







Gegen eine Spende oder Mitarbeit am wiki verfügbar.














        

      
    
      

        

          

                    

          

          deutsch/phpwcms-system/artikel/contentparts/bilder-div/aeron-slideshow2/erweitert.txt · Last modified: 2018/06/03 18:08 (external edit)          

        

      


    


    
        

      

        Show pagesourceOld revisions      

      

        Back to top      

    

    
  




 
  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