{{indexmenu_n>20}}

====== Ein Thumb - mehrere Großansichten ======

===== Problemstellung: =====


Der CP Bilder spezial soll nur vom ersten Bild eine Vorschau //(Thumb)// anzeigen. Alle großen Bilder sollen jedoch in der LightBox mit - next/prev - sichbar sein.
\\
 

===== Frontend: =====

Nur das erste Vorschaubild wird angezeigt, alle anderen Thumbs sind nicht sichbar.

{{:deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:one_thumb_several_largesize_fe_de_1.gif|}}

\\

==== Lösung V1: ====

**Bis Version 1.4.5 r401**

  - Die Thumbs werden einfach mit **positon: absolute;** übereinandergelegt.
  - Nun feht noch ein Index //(z-index)//, damit wirklich das erste Thumb über allen anderen liegt.
  - Dazu kann ein kleiner CP-Trigger verwendet werden.

==== Lösung V2: ====

**Bis Version 1.4.5 r401**

**//(Voreingestellt im CP-Trigger)//**

  - Die Thumbs werden mit **display: none;** versteckt.
  - Dem ersten Thumb wird nun mit einem kleinen CP-Trigger **display: block;** zugeordnet.

\\



==== Lösung V3: ====
**Ab Version 1.4.6 r402** mit allem Patches, download siehe docu "[[http://www.phpwcms-docu.de/download-dev-versionen.phtml|DEV - Versionen im ZIP Format]]". 

Forum: [[http://forum.phpwcms.org/viewtopic.php?p=125981#p125981|Bilder einfügen mit nur 1 Vorschaubild]]

Platziere im Template zu dem CP im umschließenden Container in einer style-Anweisung:
<code html>[PHP]if ('{FIRST}' == '') echo 'display: none;';[/PHP]</code>
"display: none" wird für alle umschließenden <div> Container gesetzt, außer dem ersten.

**Z.B. in deinem "Bilder spezial" Template:** 
<code html>
<!--IMAGES_ENTRY_START//-->
<div id="img{IMGID}" class="imageEntry" style="float:left;padding:5px;border:1px solid #CCCCCC;margin:{SPACE}px {SPACE}px 0 0; [PHP]if ('{FIRST}' == '') echo 'display: none;';[/PHP]">
	{IMAGE}
	[CAPTION]<p>{CAPTION}</p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]
	[INFOTEXT]
		<!-- auto <p>info text</p> text -->
		{INFOTEXT}
	[/INFOTEXT]
	[INFOHTML]
		<!-- pure HTML info text -->
		{INFOHTML}
	[/INFOHTML]
</div>
<!--IMAGES_ENTRY_END//-->
</code>

Die Anzahl der Spalten im BE muss mindestens so groß sein wie die Anzahl der Bilder, da die Kennung ** %%{FIRST} = <!-- First Image -->%% ** immer an einem Spaltenanfang gesetzt wird. 

Es sind keine weiteren Scripte notwendig.

\\
~~UP~~

===== Backend: =====

{{:deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:one_thumb_several_largesize_be_de_1.gif|}}

\\
~~UP~~



===== Template V1: =====

**Bis Version 1.4.5 r401**

##/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl## anlegen und den unten stehen Code dort ablegen. \\
  - Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert. 


<code html|h one_thumb_several_largesize.tmpl |h>
<!--IMAGES_HEADER_START//-->
<!-- ImagesSpecial01 //-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div style="height:{THUMB_HEIGHT_MAX}px;" class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->

	<div style="z-index:55{IMGID}; position: absolute;" class="imageEntry" id="img{IMGID}"> 
		{IMAGE}
	</div>

<!--IMAGES_ENTRY_END//-->


<!--IMAGES_FOOTER_START//-->

<div style="clear:both;"><!-- clear //--></div>

</div>

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

\\

===== Template V2: =====

**Bis Version 1.4.5 r401**

##/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl## anlegen und den unten stehen code dort ablegen. \\
  - Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert. 


<code html|h one_thumb_several_largesize.tmpl |h>
<!--IMAGES_HEADER_START//-->
<!-- ImagesSpecial01 //-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->

	<div style="display:none;" id="img{IMGID}"; class="imageEntry"> 
		{IMAGE}
	</div>

<!--IMAGES_ENTRY_END//-->


<!--IMAGES_FOOTER_START//-->

<div style="clear:both;"><!-- clear //--></div>

</div>

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

\\

===== CP-Trigger =====

**Bis Version 1.4.5 r401**

Die Datei ##/template/inc_Script/frontend_init/cp_trig_images_special.php## erstellen und den unten stehenden Code dort hineinkopieren.

Bitte kommentieren Sie je nach verwendeter Version //(V1/V2)// die entsprechende Zeile aus. Voreingestellt ist die Version 2  //(V2)//.

<code php|h cp_trig_images_special.php |h>
<?php

// http://forum.phpwcms.org/viewtopic.php?p=107107#p107107
/* ------------------------------------------------------------------
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;
*/
// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------

/**
*
* KH: 30.12.09
* Sucht im CP Images Special nach  %%style="display:none;" id="img0%%
* und erstzt durch  %%style="display:block;" id="img0%%
*
*Verwendet wird hier eine Laufzeitoptimierte Version, die str_replace mit einer Funktion verwendet
*anstatt preg_replace
* ':none;" id="img0' -> ':block;" id="img0'
*/




/* Only the first occurence is replaced ----------- */
function str_replace_once($needle , $replace , $haystack){
    // Looks for the first occurence of $needle in $haystack
    // and replaces it with $replace.
    $pos = strpos($haystack, $needle);
    if ($pos === false) {
        // Nothing found
    return $haystack;
    }
    return substr_replace($haystack, $replace, $pos, strlen($needle));
}




// V1: Sucht im CP Image Special nach 'z-index:550' und ersetzt durch 'z-index:999'
// V2: Sucht im CP Image Special nach 'style="display:none;" id="img0'
//                    und ersetzt mit 'style="display:block;" id="img0'
// --------------------------------------------------------------------------------

function CP_IMAGES_SPECIAL($text, & $data) {

  if( ($data['acontent_type'] == 31) AND                         // 31 is CP imgagesspecial
      (strpos($text, '<!-- ImagesSpecial01 //-->') != false) )   // Ist es das richtige Template?
  {
//      $text = str_replace('z-index:550','z-index:999', $text);   // V1

        $text = str_replace_once(':none;" id="img0' , ':block;" id="img0' , $text); // V2
  }

  return $text;

}

register_cp_trigger('CP_IMAGES_SPECIAL');

?>
</code>