{{indexmenu_n>10}} ====== 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: [[http://www.electricprism.com/aeron/|Aeron Glemann]] \\ Adaptiert nach phpwcms: [[http://planmatrix.de|Knut Heermann]] Eine einfache Version, die gesamte Steuerung wird im Template und/oder der *.JS-Datei eingestellt. \\ ==== Frontend: ==== {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:slideshow2_simple_fe_1.gif|}} ==== Backend: ==== {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:aeron-slideshow2:slideshow2_simple_be_1.gif|}} \\ ====== ====== ---- Docu: -- \\ Forum: -- **Idee und Basis:** [[http://www.electricprism.com/aeron/slideshow/|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:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/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'] = ' '; $GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] = ' '; 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
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)// [TITLE]

{TITLE}

[/TITLE] [SUBTITLE]

{SUBTITLE}

[/SUBTITLE]
[CP_TRIG_WRAP_CONTENT] [CP_TRIG_WRAP] [CP_TRIG_IMG]{IMAGE}[/CP_TRIG_IMG] [CP_TRIG_STR] [CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE][/CP_TRIG_STR] [CP_TRIG_THUMB]
  • [CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE]
  • [/CP_TRIG_THUMB] [/CP_TRIG_WRAP] [/CP_TRIG_WRAP_CONTENT]
    [TEXT]{TEXT}[/TEXT]
    [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'] = ' '; // -[CP_TRIG_WRAP_CSS_WIPING] $GLOBALS['block']['custom_htmlhead']['slideshow2_resize'] = ' '; // -[/CP_TRIG_WRAP_CSS_WIPING] // -[CP_TRIG_WRAP_CSS_THUMBVERTICAL] $GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_vertical'] = ' '; // -[/CP_TRIG_WRAP_CSS_THUMBVERTICAL] // -[CP_TRIG_WRAP_CSS_THUMBNOSLIDE] // No slide for thumbnails $GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_noslide'] = ' '; // -[/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'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] = ' '; // $GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] = ' '; $GLOBALS['block']['custom_htmlhead']['slideshow2'] = ' '; // -[/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'] = ' '; $GLOBALS['block']['custom_htmlhead']['slimbox.js'] = ' '; [/PHP] [/CP_TRIG_WRAP_FOOTER]
    \\ ===== PHP: ===== **Datei:** /template/inc_script/frontend_init/cp_trig_images_slideshow2_simple.php \\ //(Im Downloadpaket enthalten)// \\ ') ) // CP: 29 => image
    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
    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] = '
    '.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; } } // Dscn1531_800x600.jpg // 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('/\'.LF.'
      '.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] .= '
    '.LF.'
    '.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', ''.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('/\