slideshow2! simple
- - Frontend:
  - Backend:
- Beschreibung
- Template:
- PHP:
- CSS:
- DOWNLOAD:

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 ).
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

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%] (Thumbnailausgabe ein/aus)
[%THUMBVERTICAL:0%] (ThumbnailScrollleiste in vertikaler Darastellung ein/aus)
[%THUMBNOSLIDE:0%] (autom. Scrollen der Thumbnails ein/aus, bei “aus” erscheint ein vertikaler Schiebebalken)
[%WIPING:0%] (Spezieller Bilderwechsel ein/aus (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:

Download des Paketes
Upload auf den eigenen Account in die vorgegebenen Verzeichnisse

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

Template:

Datei: /template/inc_cntpart/images/slideshow2_simple_default.tmpl
(Im Downloadpaket enthalten)

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//-->

PHP:

Datei: /template/inc_script/frontend_init/cp_trig_images_slideshow2_simple.php
(Im Downloadpaket enthalten)

cp_trig_images_slideshow2_simple.php

<?php
// -------------------------------------------------------------------------------------------
// obligate check for phpwcms constants
  if (!defined('PHPWCMS_ROOT')) {
    die("You Cannot Access This Script Directly, Have a Nice Day."); }
// -------------------------------------------------------------------------------------------
 
/**********************************************************************************************
 * SIMPLE Version
 * 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.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
 *
 ***********************************************************************************************/
 
 
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');
?>

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.

aeron_slideshow2_simple.zip