[[1-2-3-Liste V1.1]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Bilder spezial » Lof SliderNews (jQuery) » Navi: 1-2-3-Liste (jQuery) » 1-2-3-Liste V1.1
Show pagesourceOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

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

  • 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:

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:

  • 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 Effektschalter 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: 
    	isPreloaded     : false,   // for IE9 sorry
  • Navi Hintergrundfarbe: 
    <!-- CSS:
	/* Set Navi background color for active and hover */
	ul.lof-navigator li.active , ul.lof-navigator li:hover  {background:#FFF;} 
-->


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)


deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-1-2-3/v1-1.txt · Last modified: 2018/06/03 18:08 (external edit)
Show pagesourceOld revisions
Back to top
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