This is an old revision of the document!


One thumb - several largesize

FIXME translate

The problem:

In CP images special only the first thumb of all is to be displayed. All large pictures should be visible in the LightBox using (next/prev).

Frontend:

Only the first thumb is visible, all other are hidden.


Solution V1:

The Thumbs is laid on top of each other simply with positon: absolute;.

  1. The Thumbs is laid on top of each other simply with positon: absolute;.
  2. Now still a index (z-index) is missing, so that really the first Thumb stands above.
  3. In addition a small CP-trigger can be used.

Solution V2:

(Preset in CP-Trigger)

  1. The thumbs are marked with display: none; to hidden.
  2. Using a small CP-trigger we display: block; to the first Thumb.


Backend:

Template V1:

/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl anlegen und den unten stehen code dort ablegen.

  1. After a renewed call to the CP this template will appear in the select list and you can selectable.

one_thumb_several_largesize.tmpl

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


Template V2:

/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl anlegen und den unten stehen code dort ablegen.

  1. After a renewed call to the CP this template will appear in the select list and you can selectable.

one_thumb_several_largesize.tmpl

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


CP-Trigger

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

cp_trig_images_special.php

<?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');
 
?>
english/phpwcms-system/article/contentparts/images-special/one-thumb-several-largesize.1262190873.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0