{{indexmenu_n>10}}

====== 1-2-3-Liste V1.1 ======
 

**Richtung:** Rechts - Links. Die Navigation ist eine Liste aus Zahlen //(1 2 3 4 5 ...)//. \\


**Version:** V1.1 \\
**Update:** --

**Unterschied zur Version 1.0:** 
  * Alle Parameter werden nun über TAGs im Notizfeld eingestellt, bis auf "InfoBox ein/aus" //(Vorschaubild ohne Bildunterzeile)//.  
  * Erweiterter Parametersatz: 
    * Anzeigedauer:          ''{INTERVAL:8000}''
    * Übergangsdauer:      ''{DURATION:1000}''
    * Opazität 0|1:            ''{DIRECTION:1}''
    * Autom. Slider 0|1:    ''{AUTO:1}''
    * Anz. Menüpunkte:     ''{MaxItemDisplay:4}''
    * Weiche InfoBox 0|1: ''{MainItemDesc:1}''

----
\\



===== Frontendausgabe: =====

{{:deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity01_1.gif|}}

===== Backend CP Bilder spezial: =====

{{:deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-1-2-3:be_image_special_opacity01x_1.gif|}}


\\

**Parameter im Notizfeld:** 

{{:deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-1-2-3:be_image_special_opacity_notiz_x_1.gif|}}


  Anzeigedauer:          {INTERVAL:8000} 
  Übergangsdauer:      {DURATION:1000} 
  Opazität 0|1:            {DIRECTION:1} 
  Autom. Slider 0|1:    {AUTO:1} 
  Anz. Menüpunkte:     {MaxItemDisplay:4} 
  Weiche InfoBox 0|1: {MainItemDesc:1} 


~~UP~~
\\

====== Beschreibung: ======

  * In diesem Beispiel wird für die großen Bilder das Seitenverhältnis 4:3 verwendet. Die Breite sieht 450px vor. 
  * Die Navigation wird aus fortlaufenden Zahlen beginnend bei 1 generiert.

Diese Parameter werden im Template 
  * großes Bild: 
    * INI: ''width = 450, height = 350 ''
    * JS: ''mainWidth :450''

und in der CSS-Datei eingestellt.  

Das große Bild wird im CP in das Feld "Vorschau" eingetragen, da dieser Eintrag zwingend ist damit ein Bild generiert wir. 

** InfoBox:** 
  * Im CP kann durch zwei <del>Effektschalter</del> Einträge im Notizfeld folgendes gesteuert werden:  
    * ##''Opazität 0|1:            {DIRECTION:1}''##  Ist gleichzeitig für den Bilderwechsel zuständig
      * ##''Weiche InfoBox 0|1: {MainItemDesc:1}''##  Infotext bewegt einblenden //(nur bei Opazität möglich)//
  * Im Infotext kann auch zu jedem Bild eine URL eingebunden werden.
  * Mit dem Schalter ##[x] Vorschaubilder ohne Bildunterzeile## wird die Ausgabe der InfoBox abgeschaltet.

Wie in der oben gezeigten Backendgrafik zu sehen werden fast alle Einstellmöglichkeiten im CP in das Template verlagert um mögliche Fehler bei der Eingabe im CP zu vermeiden. 

\\

===== Template: =====

**Datei:** template/inc_cntpart/imagespecial/Lof-JSliderNews-1-2-3:v11.tmpl

  * **Für den IE9:** <file>	isPreloaded     : false,   // for IE9 sorry</file>
  * **Navi Hintergrundfarbe:** <file>
<!-- CSS:
	/* Set Navi background color for active and hover */
	ul.lof-navigator li.active , ul.lof-navigator li:hover  {background:#FFF;} 
-->
</file>

\\
<code html|h Lof-JSliderNews-1-2-3_v11.tmpl |h>
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
width		= 450
height		= 350
width_zoom	= 450
height_zoom	= 350
col			= 1
;space		= 10
zoom		= 1
lightbox	= 0
;nocaption	= 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center		= 2
crop		= 0
crop_zoom	= 0
fx1			= 0
fx2			= 0
fx3			= 0
<!--IMAGE_SETTINGS_END//-->

<!--IMAGES_HEADER_START//-->
<!--lof_slider//-->
[TITLE]<h3 style="float:left; padding-right:10px;">{TITLE}</h3>[/TITLE]
[SUBTITLE]<span style="font-family:arial; font-size:110%;">{SUBTITLE}</span>[/SUBTITLE]

<div class="lof-slidecontent">
	<div class="lof-main-outer">
  		<ul class="lof-main-wapper">
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
			<!-- {IMAGE_NAME} -{IMGID} -->
			<li>
				<img src="{THUMB_REL}" title="{TITLE}" height="{THUMB_HEIGHT_MAX}" width="{THUMB_WIDTH_MAX}" alt="{ALT}" />
				[CAPTION]
				<div class="lof-main-item-desc" style="z-index:1;">
					[TITLE]<!--<h3>{TITLE}</h3>//-->[/TITLE]
					[INFOTEXT]{INFOTEXT}[/INFOTEXT]
					[TITLE]<p>[IMAGE_URL]<a href="{IMAGE_URL}" target="_blank"><b>&raquo;</b> [/IMAGE_URL]{TITLE}[IMAGE_URL]</a>:[/IMAGE_URL] &nbsp;{ALT}</p>[/TITLE]
				</div>
				[/CAPTION]
				<div class="lof-nav-item">
					<span>[PHP]echo {IMGID}+1;[/PHP]</span>
				</div>
			</li>
			
	<!-- 

		Thumbnail image: {THUMB_NAME}
		  Title text:       {TITLE}
		  Caption text:     {CAPTION}   // Same like TITLE if no |Alt text is available
		  Alt text:         {ALT}       // The same like CAPTION text
		  ID/Hash/Ext:      {THUMB_ID}/{THUMB_HASH}/{THUMB_EXT}
		  relative:         {THUMB_REL}
		  absolute:         {THUMB_ABS}
		  height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
		  height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
		  columns:          {THUMB_COLUMNS}
		
		If you are not sure wrap zoomed image:
		[ZOOM]
		Zoomed (big) image: {IMAGE_NAME}
		  ID/Hash/Ext:      {IMAGE_ID}/{IMAGE_HASH}/{IMAGE_EXT}
		  relative:         {IMAGE_REL}
		  absolute:         {IMAGE_ABS}
		  height/width:     {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
		[/ZOOM]
		
		Image URL: {IMAGE_URL}, Target: {IMAGE_TARGET}
		
		[EFFECT_1]Yes Effect 1[/EFFECT_1]
		[EFFECT_2]Yes Effect 2[/EFFECT_2]
		[EFFECT_3]Yes Effect 3[/EFFECT_3]

	//-->
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->


<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->


<!--IMAGES_FOOTER_START//-->
		</ul>  	
	</div>
</div>
[TEXT]{TEXT}[/TEXT]
<!-- CSS: {TEMPLATE}lib/lofslider/css/lofslider-style01.css -->
<!-- CSS:
	/* Hide the nav item element by default - we use JS to move it at right place */
	.lof-nav-item {display:none;} 
	/* Set Navi background color for active and hover */
	ul.lof-navigator li.active , ul.lof-navigator li:hover  {background:#FFF;} 
-->
<!-- JS: dimensions.min --><!-- JS: easing.min --><!-- JS: mousewheel.min --><!-- JS: {TEMPLATE}lib/lofslider/lofslider01.js -->
<!-- JS:

	// build lofslider navigational element
	jQuery(document).ready(function(){
	
		// iterate all nav items "div.lof-nav-item
		$('ul.lof-main-wapper').each(function(){
		
			// append lof navigator wrapper and lof navigator element
			var nav_wrapper	= $('<div class="lof-navigator-wapper"><'+'/div>').insertAfter( $(this).parent() );
			var nav_wrapper1= $('<div class="lof-navigator-outer"><'+'/div>').appendTo( nav_wrapper );
			var nav			= $('<ul class="lof-navigator"><'+'/ul>').appendTo( nav_wrapper1 );
		
			// now iterate all and remove it from DOM the same step
			var navitems = $(this).find('li div.lof-nav-item').detach();
		
			navitems.each(function(){
				
				// append it to navigator element
				$('<li><div>' + $(this).html() + '<'+'/div><'+'/li>').appendTo(nav);
				
			});
			[CP_TRIG_WRAP_JS] 
			var lof_options = {
				interval        : [CPT_INTERVAL]6000[/CPT_INTERVAL],
				easing          : 'easeInOutSine',
				duration        : [CPT_DURATION]1000[/CPT_DURATION],
				direction       :'[CPT_DIRECTION]opacity[/CPT_DIRECTION][CPT_DIRECTION_ELSE][/CPT_DIRECTION_ELSE]',  // 'opacity'
				auto            : [CPT_AUTO]true[/CPT_AUTO][CPT_AUTO_ELSE]false[/CPT_AUTO_ELSE],
				maxItemDisplay  : [CPT_MaxItemDisplay]3[/CPT_MaxItemDisplay],
				startItem       : 0,
				navPosition     : 'horizontal', // horizontal
				navigatorHeight : 15,
				navigatorWidth  : 25,
				mainWidth       :450,
				isPreloaded     : false,   // for IE9 sorry
				mainItemDesc    : '[CPT_MainItemDesc].lof-main-item-desc[/CPT_MainItemDesc][CPT_MainItemDesc_ELSE][/CPT_MainItemDesc_ELSE]'  // '.lof-main-item-desc' if set, smooth output of Desc text in direction mode = "opacity" +KH 08.05.11
			};
			[/CP_TRIG_WRAP_JS] 
			
			$(this).parent().parent().lofJSidernews(lof_options);

		});

	});

-->
<!--IMAGES_FOOTER_END//-->

</code>

\\

===== PHP frontend_init: =====

**Datei:** template/inc_script/frontend_init/rt_cp_trigg_img_special_lof_slider.php

**Bedingung:** $phpwcms['allow_ext_init']  = 1;  //(in conf.inc.php)//


\\
<code html|h rt_cp_trigg_img_special_lof_slider.php |h>
<?php
 
/* ------------------------------------------------------------------
 * function cp_trigger_function_name($param1, & $param2) {
 *  if($param2['acontent_type'] == 14) { // 14 is CP WYSIWYG
 *    $param1 = do_this_or_that($param2['acontent_id']);
 * }
 * return $param1;
 * }
 *
 * cp_trigger_function_name - the unique function name
 * $param1 - holds the content part html source on which you can parse or do custom processing
 * $param2 - is a reference to an array which holds content part values like ID, dates and other values - see db table phpwcms_articlecontent
 *
 * Always return $param1;
 * 
 * K.Heermann 21.05.11: Einsetzen von Daten aus dem Notizfeld an definierten Stellen des Templates
 *
*/
// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------



// ----------------------------------------------------------------------------
// Lof-Slider (home)
// ----------------------------------------------------------------------------

// Read comment and replace in JS content 
// -------------------------------------------------
function CP_render_cnt_template ($comment='', $text='', $tag='', $switch='') {
	
	// TAG in comment available?
	if ( strpos($comment,'{'.$tag.':') !== false ) {
		// Pick up value from TAG 
		preg_match('/\{'.$tag.':(\d+)\}/i', $comment, $temp);

		// If no value in comment available
		if(empty($temp[1])) { $temp[1] = ''; }
		
		// Insert numerical values from comment into TAGs in text
		if (empty($switch)) { 
			// function replace_cnt_template($text='', $tag='', $value='')
			// Only numarical values 
			$text = replace_cnt_template($text, 'CPT_'.$tag, $temp[1]);
		}
		// Steer with "0|1" value from comment the "IF... _ELSE" statement
		else { 

			if ($temp[1]) 	$text = preg_replace('/\[CPT_'.$tag.'\](.*?)\[\/CPT_'.$tag.'\]/is', '$1', $text);			// value 1
			else			$text = preg_replace('/\[CPT_'.$tag.'_ELSE\](.*?)\[\/CPT_'.$tag.'_ELSE\]/is', '$1', $text);	// value 0
			
		}
	}
	return $text;

}

// Lof-Slider (home) 
// -------------------------------------------------
function CP_IMGSPECIAL_lof_slider($text, & $data) {
	if(( $data['acontent_type'] == 31) AND (strpos($text, '<!--lof_slider//-->'))) { // 31 is CP img special  Home: ID =0
	
	$tags 		= array('INTERVAL','DURATION','MaxItemDisplay');					// TAGs with numerical value
	$tags_spec	= array('DIRECTION' => '1','AUTO' => '1','MainItemDesc' => '1');	// 0|1 TAGs with "IF... _ELSE" statement 
	
		if (!empty($data["acontent_comment"]) ) {
			
			// Cut out a special section 
			preg_match('/\[CP_TRIG_WRAP_JS\](.*?)\[\/CP_TRIG_WRAP_JS\]/ism',$text, $tg_text['wrap_js']);
			if ($tg_text['wrap_js'][1]) {
				
				// Is there any content in comment
				if (!empty($data["acontent_comment"]) ) {
				
					// Catch  the TAGs
					// E.g. {INTERVAL:2000}{DURATION:1500}{MaxItemDisplay:4}
					foreach ($tags as $value) 
						$tg_text['wrap_js'][1] = CP_render_cnt_template ($data["acontent_comment"], $tg_text['wrap_js'][1], $value);
					
					// E.g. {DIRECTION:1}{AUTO:0}{MainItemDesc:1}
					foreach ($tags_spec as $key=>$value) 
						$tg_text['wrap_js'][1] = CP_render_cnt_template ($data["acontent_comment"], $tg_text['wrap_js'][1], $key, $value);
				
				}
				
				// Kill all TAGs in content
				// function render_cnt_template($text='', $tag='', $value='') 
				
				foreach ($tags as $value) 
					$tg_text['wrap_js'][1] = render_cnt_template($tg_text['wrap_js'][1], 'CPT_'.$value, 1); 
					
				foreach ($tags_spec as $key=>$value) {
					$tg_text['wrap_js'][1] = preg_replace('/\[CPT_'.$key.'\](.*?)\[\/CPT_'.$key.'\]/is', '', $tg_text['wrap_js'][1]);
					$tg_text['wrap_js'][1] = preg_replace('/\[CPT_'.$key.'_ELSE\](.*?)\[\/CPT_'.$key.'_ELSE\]/is', '', $tg_text['wrap_js'][1]);
				}
				
				// Insert changed JS text back into content
				$text = replace_cnt_template($text, 'CP_TRIG_WRAP_JS', $tg_text['wrap_js'][1]); 
				
				
			}
		}
	}
	return $text;
}


register_cp_trigger('CP_IMGSPECIAL_lof_slider');
 
/* ------- and the next one
function CP_Other_CP($text, & $data) {
   if($data['acontent_type'] == XX) { // XX is CP Other CP
      $text = custom processing ;
   }
   return $text;
}
register_cp_trigger('CP_Other_CP');
---------- and so on */
 
?>

</code>
\\



===== CSS und JavaScript: =====

Siehe [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews]]

\\