This is an old revision of the document!


slideshow2! simple

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

Eine einfache Version, die gesamte Steuerung wird im Template und/oder der *.JS-Datei eingestellt.


Frontend:

Backend:



Docu: –
Forum: –

Idee und Basis: Aeron Glemann
Adaptiert: K.Heermann (flip-flop) http://planmatrix.de 2011/01/12
CMS version: >= V1.4.4 r381
Version: V1.1
Update:

Tag: Die Steuerung kann teilweise über TAGs im Template vorgenommen werden.


Dateiename: cp_trig_images_slideshow2_simple.php
Verzeichnis: /template/inc_script/frontend_init/

Dateiename: slideshow2_simple_default.tmpl
Verzeichnis: /template/inc_cntpart/images/

Dateiename: slideshow.css
Verzeichnis: /template/lib/aeron_slideshow2/

Dateinamen: *.js (spezielle JScripte)
Verzeichnis: /template/lib/aeron_slideshow2/

Dateinamen: *.gif *.png (Images für Steuerung)
Verzeichnis: /template/lib/aeron_slideshow2/

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 Template des CP wird die Darstellung teilweise gesteuert
Beispiel: http://www.electricprism.com/aeron/slideshow/index.html.
TAG Options: http://code.google.com/p/slideshow/wiki/Slideshow

  • [%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”. )
  • [%THUMBNAIL:1%] (Keine Thumbnaildarstellung)
  • [%THUMBVERTICAL:0%] (ThumbnailScrollleiste in vertikaler Darastellung)
  • [%THUMBNOSLIDE:0%] (Kein autom. Scrollen der Thumbnails, vertikaler Schiebebalken erscheint)
  • [%WIPING:0%] (Spezieller Bilderwechsel (Schieben) )

→ {1 = aktiviert} {0 = deaktiviert}

Ansicht im Template:
Um Einstellungen vorzunehmen werden nur die Zahlen nach dem : geändert. Z.B. [%THUMBNAIL:0%] würde keine Thumbnails ausgeben.

// -[CP_TRIG_CUSTOM_VAR]
// CUSTOM var =====================
// [%WIDTH:400%][%HEIGHT:300%]
// [%PREVNEXT:0%]
// [%THUMBNAIL:1%]
// [%THUMBVERTICAL:0%]
// [%THUMBNOSLIDE:0%]
// [%WIPING:0%]
// ================================
// -[/CP_TRIG_CUSTOM_VAR]

Anderen Parameter werden direkt in den JS Variablen eingestellt. z.B. soll der Captiontext erscheinen: captions: true,.

Wird z.B. die “KenBurns” Ausgabe gewünscht, muss eingestellt werden (Kommentar entfernen/hinzufügen):

//    var myShow = new Slideshow(\'show\', null, {
    var myShow = new Slideshow.KenBurns(\'show\', null, {
//    var myShow = new Slideshow.Push(\'show\', null, {
//    var myShow = new Slideshow.Flash(\'show\', null, {
//    var myShow = new Slideshow.Fold(\'show\', null, {

und

// $GLOBALS['block']['custom_htmlhead']['slideshow2.js'] =          '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.js" type="text/javascript"></script>';

 $GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.kenburns.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] =     '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.push.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] =    '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.flash.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] =     '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.fold.js" type="text/javascript"></script>';

All diese Mehrfacheinstellungen sind in der “erweiterten Variante” automatisiert.

1. Installation:

  • .

2. Im Gebrauch:

  • Fülle einen CP Bilder <div> mit deinen Einträgen (Siehe Beispiel oben).
  • Wähle als Vorlage: slideshow2_simple_default.tmpl
  • Einstellen der gewünschten Effekte im Template
  • Sichern und das Ergebnis im FE ansehen :-)

<note important>

</note>


Template:

Datei: /template/inc_cntpart/images/slideshow2_simple_default.tmpl

slideshow2_simple_default.tmpl

<!--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!simple//-->
<!--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>
 
<div style="margin-top:100px;">
[TEXT]{TEXT}[/TEXT]
</div>
 
[CP_TRIG_WRAP_FOOTER]
[PHP]
 
// Load MooTools Lib
//initMootools();
initJSLib();
 
// Load MORE components
$mootools_more = array( 'Utilities/Assets','Fx/Fx.Elements' );
initJSPlugin($mootools_more, true);
 
// Load default and my css
$GLOBALS['block']['custom_htmlhead']['slideshow2.css'] = '   <link href="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.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: -80px;
        top: 0;
        width: 70px;
    }
    .slideshow-thumbnails ul {
        height: {CP_TRIG_HEIGHT}px;
        width: 70px;
    }
    .slideshow {height: {CP_TRIG_HEIGHT}px;}
    .slideshow-captions {bottom: 0px;}
 
  </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: 400px; }
    .slideshow-captions {bottom: 99px;}
 
    .slideshow-thumbnails {height: 165px; }
    .slideshow-thumbnails ul {width: 430px;}
 
  </style>';
 
// -[/CP_TRIG_WRAP_CSS_THUMBNOSLIDE]
 
 
// -[CP_TRIG_WRAP_FOOTER_JS]
 
 
// -[CP_TRIG_CUSTOM_VAR]
// CUSTOM var =====================
// [%WIDTH:400%][%HEIGHT:300%]
// [%PREVNEXT:0%]
// [%THUMBNAIL:1%]
// [%THUMBVERTICAL:0%]
// [%THUMBNOSLIDE:0%]
// [%WIPING:0%]
// ================================
// -[/CP_TRIG_CUSTOM_VAR]
 
 
$GLOBALS['block']['custom_htmlhead']['slideshow2.js'] =          '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.js" type="text/javascript"></script>';
 
// $GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.kenburns.js" type="text/javascript"></script>';
 
// $GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] =     '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.push.js" type="text/javascript"></script>';
 
// $GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] =    '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.flash.js" type="text/javascript"></script>';
 
// $GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] =     '  <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.fold.js" type="text/javascript"></script>';
 
 
 
$GLOBALS['block']['custom_htmlhead']['slideshow2'] = '  <script type="text/javascript">
  //<![CDATA[
 
    window.addEvent(\'domready\', function(){
    var data = {};
    var myShow = new Slideshow(\'show\', null, {
//    var myShow = new Slideshow.KenBurns(\'show\', null, {
//    var myShow = new Slideshow.Push(\'show\', null, {
//    var myShow = new Slideshow.Flash(\'show\', null, {
//    var myShow = new Slideshow.Fold(\'show\', null, {
        captions: true,
        center: true,
        controller: true,
        delay: 3750,
        duration: 1500,
        linked: false,
        paused: true,
        height: {CP_TRIG_HEIGHT},
        width: {CP_TRIG_WIDTH},
        slide: 0,
        thumbnails: {CP_TRIG_THUMBNAIL},
        overlap: true,
        loop: false,
        random: false,
        resize: true,
        titles: false,
 
//        transition: \'elastic:out\', // push
//        transition: \'bounce:out\',  // fold
 
 
//        color: [\'#EC2415\', \'#7EBBFF\'],
 
        fast: false
        });
 
    });
   //]]>
  </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//-->


CSS:

Datei: /template/lib/aeron_slideshow2/slideshow.css (Ist bereits vorhanden)

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: 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;
}


PHP:

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

cp_trig_images_slideshow2.php

<?php
// -------------------------------------------------------------------------------------------
// obligate check for phpwcms constants
  if (!defined('PHPWCMS_ROOT')) {
    die("You Cannot Access This Script Directly, Have a Nice Day."); }
// -------------------------------------------------------------------------------------------
 
// 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/
// V1.2  12.10.10 KH Update: new gif image is generated with width/height from CP TAG
// V1.3  21.10.10 KH Update: {CAPTURE} TAG implemented in command field of the CP
// 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)
 
 
function CP_IMAGES_SLIDESHOW2_SIMPLE($text, & $data) {
 
    if( $data['acontent_type'] == 29 AND strpos($text, '<!--slideshow2!simple//-->') )  // CP: 29 => image <div>   CP: 31 => image special
    {
 
        $tg_text = array();
 
    // === CUSTOM fallback===============================================
        $tg_text['image']['width']             = 500;  // image width fallback
        $tg_text['image']['height']         = 400;  // image height fallback
 
        $tg_text['flag']['prevnext']         = false;
        $tg_text['flag']['thumb']             = false;
        $tg_text['flag']['thumbvertical']     = false;
        $tg_text['flag']['thumbnoslide']     = false;
        $tg_text['flag']['wiping']             = false;
 
    // ==================================================================
 
        /* ======= CP image <div> parameter
        http://www.phpwcms-howto.de/wiki/doku.php/english/technics/database/phpwcms_articlecontent
        ========================== */
 
        // catch the CP-ID
        $CP_ID     = $data["acontent_id"];
 
        // All image parameters
        $CP        = @unserialize($data["acontent_form"]);
 
        // Setup some parameters
        if ($CP['lightbox'])     $tg_text['strg']['lightbox']     = 'rel="lightbox"';
        else                     $tg_text['strg']['lightbox']     = '';
 
 
        // Catch the CUSTOM VAR
        // ============================================
        preg_match_all('/\[CP_TRIG_CUSTOM_VAR\](.*?)\[\/CP_TRIG_CUSTOM_VAR\]/ism',$text, $tg_text['custom']);
 
        if ($tg_text['custom'][1][0]) {  // is there any content?
 
            // WIDTH / HEIGHT
            if ( strpos($tg_text['custom'][1][0],'[%WIDTH:') !== false ) {
                preg_match('/\[%WIDTH:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                if(!empty($tg_text['temp'][1])) $tg_text['image']['width'] = $tg_text['temp'][1];
            }
            if ( strpos($tg_text['custom'][1][0],'[%HEIGHT:') !== false ) {
                preg_match('/\[%HEIGHT:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                if(!empty($tg_text['temp'][1])) $tg_text['image']['height'] = $tg_text['temp'][1];
            }
            // PREV NEXT for LightBox
            if ( strpos($tg_text['custom'][1][0],'[%PREVNEXT:') !== false ) {
                preg_match('/\[%PREVNEXT:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                if(!empty($tg_text['temp'][1]) AND ($tg_text['temp'][1] == 1)) $tg_text['flag']['prevnext'] = true;
            }
            // Thumb enabled
            if ( strpos($tg_text['custom'][1][0],'[%THUMBNAIL:') !== false ) {
                preg_match('/\[%THUMBNAIL:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                if(!empty($tg_text['temp'][1]) AND ($tg_text['temp'][1] == 1)) { $tg_text['flag']['thumb'] = true;
 
                    // Thumbvertical enabled
                    if ( strpos($tg_text['custom'][1][0],'[%THUMBVERTICAL:') !== false ) {
                        preg_match('/\[%THUMBVERTICAL:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                        if(!empty($tg_text['temp'][1]) AND ($tg_text['temp'][1] == 1)) $tg_text['flag']['thumbvertical'] = true;
                    }
                    // Thumb no slide
                    if ( strpos($tg_text['custom'][1][0],'[%THUMBNOSLIDE:') !== false ) {
                        preg_match('/\[%THUMBNOSLIDE:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                        if(!empty($tg_text['temp'][1]) AND ($tg_text['temp'][1] == 1))  $tg_text['flag']['thumbnoslide'] = true;
                    }
 
 
                }
            }
 
            // Wiping enabled
            if ( strpos($tg_text['custom'][1][0],'[%WIPING:') !== false ) {
                preg_match('/\[%WIPING:(\d+)%\]/i', $tg_text['custom'][1][0], $tg_text['temp']);
                if(!empty($tg_text['temp'][1]) AND $tg_text['temp'][1] == 1) { $tg_text['flag']['wiping'] = true; }
            }
 
        }
 
 
        // Catch the first text area
        // ============================================
        preg_match_all('/\[CP_TRIG_WRAP\](.*?)\[\/CP_TRIG_WRAP\]/ism',$text, $tg_text['wrap']);
 
        if ($tg_text['wrap'][1][0]) {  // is there any content?
 
            // ---------------------------------------------------------------------------------
            // Prev/Next on: Prev/Next for LightBox, no slideshow feature available
            // ---------------------------------------------------------------------------------
 
 
            // Set "Group the lightbox" for prev/next
            if ( $tg_text['flag']['prevnext'] ) $tg_text['strg']['lightbox'] = 'rel="lightbox['.$CP_ID.']"';
 
 
            // if zoom is not set,  there it no content!!!
            preg_match_all('/\[CP_TRIG_IMG\](.*?)\[\/CP_TRIG_IMG\]/is',            $text, $tg_text['img']);         // the whole generated img string
 
            // image string
            preg_match_all('/\[CP_TRIG_STR\](.*?)\[\/CP_TRIG_STR\]/is',            $text, $tg_text['str']);
 
            // Thumb section
            preg_match_all('/\[CP_TRIG_THUMB\](.*?)\[\/CP_TRIG_THUMB\]/is',        $text, $tg_text['thumb']);
 
        }
 
 
 
        // IMAGES ==================================================
        $tg_text_temp[0] = '    <div class="slideshow-images">'.LF;
 
        // Images: If zoom=on AND Prev/Next=on ---------------------
        if ($CP['zoom'] AND $tg_text['flag']['prevnext'] AND $tg_text['str'][1]) {
 
            foreach ($tg_text['str'][1] as $key => $value) {
 
                $tg_text['image3'] = my_img_width_height_simple($CP["images"][$key], $key, $tg_text['image']['width'], $tg_text['image']['height']);
 
                $value = str_replace('{CP_TRIG_REL_LIGHBOX}'  ,$tg_text['strg']['lightbox'] , $value);
                $value = str_replace('{CP_TRIG_CLASS_ID}'     ,$key+1                       , $value);
                $value = str_replace('{CP_TRIG_WIDTH_HEIGHT}' ,$tg_text['image3'][7]        , $value);
                $value = str_replace('{CP_TRIG_LEFT_TOP}'     ,$tg_text['image3'][8]        , $value);
                $tg_text_temp[0] .= '      '.$value.LF;
            }
 
        }
 
        // Images: If zoom=on AND LighBox=on -----------------------
//        elseif ($CP['zoom'] AND $CP['lightbox'] AND $tg_text['str'][1]) {
        elseif ($CP['zoom']  AND $tg_text['str'][1]) {
 
            foreach ($tg_text['str'][1] as $key => $value) {
 
                $value = str_replace('{CP_TRIG_REL_LIGHBOX}'    ,$tg_text['strg']['lightbox']    , $value);
                $value = str_replace('{CP_TRIG_CLASS_ID}'        ,$key+1                         , $value);
                $value = str_replace('{CP_TRIG_WIDTH_HEIGHT}'    ,''                                , $value);
                $value = str_replace('{CP_TRIG_LEFT_TOP}'        ,''                                , $value);
                $tg_text_temp[0] .= '      '.$value.LF;
            }
 
        }
 
 
        // <img src="content/images/ec0704526b3f098d477f40982dfe4f18.jpg" width="80" height="60" alt="Dscn1531_800x600.jpg" border="0" />
 
 
        // Images: If zoom=off -------------------------------------
        if (!$CP['zoom'] AND $tg_text['img'][1]) {
 
            foreach ($tg_text['img'][1] as $key => $value) {
 
                $tg_text['image3'] = my_img_width_height_simple($CP["images"][$key], $key, $tg_text['image']['width'], $tg_text['image']['height']);
 
                $value = preg_replace('/\<img src="(.*?) \/\>/is','<img '.$tg_text['image3'][0].' />',$value);
                $tg_text_temp[0] .= '      '.$value.LF;
            }
 
        }
 
        $tg_text_temp[0] .= '    </div>'.LF;
        // IMAGES END ==============================================
 
 
        // Thumbs ==================================================
        if ($tg_text['flag']['thumb'] AND $tg_text['thumb'][1]) {
 
            $tg_text_temp[0] .= '    <div class="slideshow-thumbnails">'.LF.'      <ul>'.LF;
 
            foreach ($tg_text['thumb'][1] as $key => $value) {
 
                $value = str_replace('{CP_TRIG_CLASS_ID}', $key+1, $value);
                $tg_text_temp[0] .= '      '.$value.LF;
            }
 
            $tg_text_temp[0] .= '      </ul>'.LF.'    </div>'.LF;
        }
        // THUMBS END ==============================================
 
 
 
        // Footer in template (for the site head area) =============
        // Set JS parameters for slidebox script
        preg_match('/\[CP_TRIG_WRAP_FOOTER\](.*?)\[\/CP_TRIG_WRAP_FOOTER\]/ism',$text, $tg_text['wrap_footer']);
        if ($tg_text['wrap_footer'][1]) {
 
            $tg_text_temp[1] = '';
 
            // set thumbnail
            $tg_text['wrap_footer'][1] = str_replace('{CP_TRIG_THUMBNAIL}'    , ($tg_text['flag']['thumb'])?'true':'false', $tg_text['wrap_footer'][1]);
            // set image width
            $tg_text['wrap_footer'][1] = str_replace('{CP_TRIG_WIDTH}'        , ($tg_text['image']['width']), $tg_text['wrap_footer'][1]);
            // set image height
            $tg_text['wrap_footer'][1] = str_replace('{CP_TRIG_HEIGHT}'        , ($tg_text['image']['height']), $tg_text['wrap_footer'][1]);
 
 
            // set linked
            $tg_text['wrap_footer'][1] = str_replace('{CP_TRIG_LINKED}'        , ($CP['zoom'])?'true':'false', $tg_text['wrap_footer'][1]);
 
        }
 
        // Test: If LightBox/PrevNext is set, disable slimbox JS (unload). We need the next/prev feature in picture
        if ($tg_text['flag']['prevnext'] ) {
            $tg_text['wrap_footer'][1] = preg_replace('/\[CP_TRIG_WRAP_FOOTER_JS\](.*?)\[\/CP_TRIG_WRAP_FOOTER_JS\]/ism','' ,$tg_text['wrap_footer'][1]);
        }
 
        // Test: If wiping is not set, disable wiping css.
        if (!$tg_text['flag']['wiping'] ) {
            $tg_text['wrap_footer'][1] = preg_replace('/\[CP_TRIG_WRAP_CSS_WIPING\](.*?)\[\/CP_TRIG_WRAP_CSS_WIPING\]/ism','' ,$tg_text['wrap_footer'][1]);
        }
        // Test: If thumb vertical is not set, disable thumb vertical css.
        if (!$tg_text['flag']['thumbvertical'] ) {
            $tg_text['wrap_footer'][1] = preg_replace('/\[CP_TRIG_WRAP_CSS_THUMBVERTICAL\](.*?)\[\/CP_TRIG_WRAP_CSS_THUMBVERTICAL\]/ism','' ,$tg_text['wrap_footer'][1]);
        }
        // Test: If thumb no slide is not set, disable thumb no slide css.
        if (!$tg_text['flag']['thumbnoslide'] ) {
            $tg_text['wrap_footer'][1] = preg_replace('/\[CP_TRIG_WRAP_CSS_THUMBNOSLIDE\](.*?)\[\/CP_TRIG_WRAP_CSS_THUMBNOSLIDE\]/ism','' ,$tg_text['wrap_footer'][1]);
        }
 
 
        $text = preg_replace('/\[CP_TRIG_WRAP_CONTENT\](.*?)\[\/CP_TRIG_WRAP_CONTENT\]/ism', '<!-- slideshow2 //-->'.LF.$tg_text_temp[0].$tg_text_temp[1], $text);  // fill content
        $text = preg_replace('/\[CP_TRIG_WRAP_FOOTER\](.*?)\[\/CP_TRIG_WRAP_FOOTER\]/ism', $tg_text['wrap_footer'][1], $text);  // replace the footer
 
    } // ---- END if( $data['acontent_type'] == 29
 
      return $text;
 
} // ---- END function
 
 
    //
    function my_img_width_height_simple($CP_IMG, $_key, $slide_width, $slide_height) {
 
        $_zoominfo = get_cached_image(
            array(    "target_ext"    =>    $CP_IMG[3],
                    "image_name"    =>    $CP_IMG[2] . '.' . $CP_IMG[3],
// +KH:12.10.10  new image is generated with width/height from CP TAG
//                    "max_width"        =>    $GLOBALS['phpwcms']["img_prev_width"],
                    "max_width"        =>    ((!empty($slide_width)) ? $slide_width :$GLOBALS['phpwcms']["img_prev_width"]),
//                    "max_height"    =>    $GLOBALS['phpwcms']["img_prev_height"],
                    "max_height"    =>    ((!empty($slide_height))? $slide_height:$GLOBALS['phpwcms']["img_prev_height"]),
                    "crop_image"    => true,
//                    "thumb_name"    =>    md5(    $CP_IMG[$key][2].$tg_text['image']['width'].
//                                                $tg_text['image']['height'].$GLOBALS['phpwcms']["sharpen_level"]
 
// +KH:12.10.10  new image is generated with width/height from CP TAG
//                    "thumb_name"    =>    md5(    $CP_IMG[2].$GLOBALS['phpwcms']["img_prev_width"].
//                                                $GLOBALS['phpwcms']["img_prev_height"].$GLOBALS['phpwcms']["sharpen_level"]
//                                            )
                    "thumb_name"    =>    md5(    $CP_IMG[2].((!empty($slide_width)) ? $slide_width :$GLOBALS['phpwcms']["img_prev_width"]).
                                                ((!empty($slide_height))? $slide_height:$GLOBALS['phpwcms']["img_prev_height"]).$GLOBALS['phpwcms']["sharpen_level"]
                                            )
                )
 
            );
 
 
        // fill up alt "..." with capture or image name
        if (empty($CP_IMG[6])) $CP_IMG[6] = $CP_IMG[1];
 
        $tg01['w']     = $_zoominfo[1];                             // real width
        $tg01['h']     = $_zoominfo[2];                             // real height
 
        $tg02[1]     = 'id="slide-'.($_key+1).'" ';                 // id for every entry
        $tg02[2]     = 'src="'.PHPWCMS_IMAGES.$_zoominfo[0].'" ';// hash-name.ext
        $tg02[3]     = $_zoominfo[3].' ';                        // html width/height
        $tg02[4]     = 'alt="'.$CP_IMG[6].'" ';                    // capture or alt text
        $tg02[5]     = 'style="';
//        $tg02[6]     = 'display: block; position: absolute; z-index: 1; visibility: visible; opacity: 1; ';
        $tg02[6]     = 'display: block; z-index: 1; visibility: visible; opacity: 1; ';
 
        // ------- calculate the right image widt/height
        $tg01['dw'] =    $slide_width  / $tg01['w'] ;
        $tg01['dh'] =    $slide_height / $tg01['h'] ;
        $tg01['d']  =    ($tg01['dh'] > $tg01['dw']) ? $tg01['dh'] : $tg01['dw'];
 
        $tg01['iw']    = ceil($tg01['d'] * $tg01['w']);
        $tg01['ih']    = ceil($tg01['d'] * $tg01['h']);
        // -------
 
        // img.set('styles', {height: Math.ceil(h * d), width: Math.ceil(w * d)});
        $tg02[7] =
        'width: ' .$tg01['iw'].'px; '.  // 'height: 667px; width: 500px;
        'height: '.$tg01['ih'].'px; ';
 
 
        // img.set('styles', {'left': (size.x - this.width) / -2, 'top': (size.y - this.height) / -2});
        // calculate the right spacing
        $tg02[8]     =
        'left: '.ceil(($tg01['iw'] - $slide_width)  / -2) .'px; '.  // 'left: 0px; top: -133px;"'
        'top: ' .ceil(($tg01['ih'] - $slide_height) / -2) .'px; ';
 
        $tg02[9]     = '" ';  // End Style
 
 
        $tg02['0'] = implode($tg02);
 
//        $value = preg_replace('/\<img src="(.*?) \/\>/is','<img '.$tg02[0].' />',$value);
//        $tg_text_temp[0] .= '      '.$value.LF;
 
    return $tg02;
    }
 
   register_cp_trigger('CP_IMAGES_SLIDESHOW2_SIMPLE');
?>


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