{{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
[TITLE]{TITLE}
[/TITLE]
[SUBTITLE]{SUBTITLE}
[/SUBTITLE]
[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;
}
// 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('/\