Table of Contents

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


Frontendausgabe:

Backend CP Bilder spezial:


Parameter im Notizfeld: 

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}
Back to top


Beschreibung:

Diese Parameter werden im Template

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 Effektschalter Einträge im Notizfeld folgendes gesteuert werden:

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


Lof-JSliderNews-1-2-3_v11.tmpl

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


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)


rt_cp_trigg_img_special_lof_slider.php

<?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 */
 
?>


CSS und JavaScript:

Siehe Lof SliderNews (jQuery)