{{indexmenu_n>10}}

====== Slider ======

===== Simple image slider with template- and CSS files =====

**Conditionals:** mootools 1.1.x ore mootools 1.2.x \\
\\

==== Frontend output ====


{{:english:phpwcms-system:article:contentparts:images-special:slider_new.png|FE output: slider}}

==== Backend ====

LightBox: on, Effect 1/3: on, cropping thumb 95x115: on 

{{:english:phpwcms-system:article:contentparts:images-special:be_img_spez_slider_en.gif?80|Backend}}

\\
==== Template mootools V1.1.x ====
 ** ///template/inc_cntpart/imagespecial/slider_new_11x.tmpl// **

<code html|h /template/inc_cntpart/imagespecial/slider_new_11x.tmpl |h>
<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

    [EFFECT_1][Ich bin der Effekt 1] : [/EFFECT_1]
    [EFFECT_2][Ich bin der Effekt 2] : [/EFFECT_2]
    [EFFECT_3][Ich bin der Effekt 3]<br />[/EFFECT_3]

<div class="slider" id="slider_container_{ID}">
  <div id="slider_{ID}" class="inner">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
    [ZOOM]<a href="{IMAGE_ABS}" title="{INFOTEXT}" target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{CAPTION}" border="0" /><br />
<span class="thumb_capture">{INFOTEXT}</span></a>
[/ZOOM][ZOOM_ELSE]
    [IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->


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


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


<!--IMAGES_FOOTER_START//-->
  </div>
</div>
<a href="#" id="move_left_{ID}">&laquo; Left &laquo;</a> | <a href="#" id="move_right_{ID}">&raquo; Right &raquo;</a>


[PHP]

  $GLOBALS['block']['css']['slider_{ID}'] = 'specific/slider_new.css';
  
  $GLOBALS['block']['custom_htmlhead']['slider_{ID}'] = '  <script type="text/javascript">
  <!--

  window.addEvent(\'domready\', function(){
  
    var slider_width  = 0;
    var step      = 106;
    var scroll_x    = 0;
    var slider_parent = $(\'slider_container_{ID}\').getSize().size.x;
    
    $$(\'div.slider a\').each( function(e) {
      
      slider_width += e.getSize().size.x + 5;
      
    });
        
    var scroll = new Fx.Scroll(\'slider_container_{ID}\', {
      wait: false,
      duration: 550,
      offset: {\'x\': 0, \'y\': 0},
      transition: Fx.Transitions.Quad.easeOut
    });
    
    scroll.scrollTo(0, 0);
    
    $(\'move_right_{ID}\').addEvent(\'click\', function(event) {
      event = new Event(event).stop();
      if(slider_width-slider_parent <= scroll_x) {
        scroll_x = scroll_x - 106;
      }
      scroll_x = scroll_x + 106;
      scroll.scrollTo(scroll_x, 0);
    });
    
    $(\'move_left_{ID}\').addEvent(\'click\', function(event) {
      event = new Event(event).stop();
      scroll_x = scroll_x - 106;
      if(scroll_x < 0) {
        scroll_x = 0;
      }
      scroll.scrollTo(scroll_x, 0);
    });
    

  });
  
  //-->
  </script>';

[/PHP]
<!--IMAGES_FOOTER_END//-->
</code>

==== Template mootools V1.2.x ====

<note important>
Using mootools V1.2.x we must enhanced this script with \\
  Fx.Scroll.implement({
    scrollTo: function(y, x){
    return this.start(y, x);
    }
  });

and all \\
  getSize().size 
replaced with \\ 
  getSize()

 </note>

**Update 15.06.2010 KH:** \\
  * Line in [ZOOM_ELSE ]....[/ ZOOM_ELSE] corrected, as in the JS on "<a ..." is triggered. //(See the difference with the original template).//
  * FX.Scroll call into [PHP] ... outsourced, because the order of the scripts is not the best.
\\

 ** ///template/inc_cntpart/imagespecial/slider_new_12x.tmpl// **

<code html|h /template/inc_cntpart/imagespecial/slider_new_12x.tmpl |h>
<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

    [EFFECT_1][Ich bin der Effekt 1] : [/EFFECT_1]
    [EFFECT_2][Ich bin der Effekt 2] : [/EFFECT_2]
    [EFFECT_3][Ich bin der Effekt 3]<br />[/EFFECT_3]

<div class="slider" id="slider_container_{ID}">
  <div id="slider_{ID}" class="inner">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
    [ZOOM]<a href="{IMAGE_ABS}" title="{INFOTEXT}" target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{CAPTION}" border="0" /><br />
<span class="thumb_capture">{INFOTEXT}</span></a>
[/ZOOM][ZOOM_ELSE]
    <a href="#"><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" /></a>
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->


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


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


<!--IMAGES_FOOTER_START//-->
  </div>
</div>
<a href="#" id="move_left_{ID}">&laquo; Left &laquo;</a> | <a href="#" id="move_right_{ID}">&raquo; Right &raquo;</a>


[PHP]

  $GLOBALS['block']['css']['slider_{ID}'] = 'specific/slider_new.css';
  
  $mootools_more = array( 'Fx/Fx.Scroll' );  // Loading more and FX.Scroll lib
  initJSPlugin($mootools_more, true);
  
  $GLOBALS['block']['custom_htmlhead']['slider_{ID}'] = '  <script type="text/javascript">
  <!--
  // 17.04.09 KH: enhanced and patched for mootools V1.2x
  
  window.addEvent(\'domready\', function(){
  
  Fx.Scroll.implement({
    scrollTo: function(y, x){
    return this.start(y, x);
    }
  });

    var slider_width  = 0;
    var step          = 106;
    var scroll_x      = 0;
    var slider_parent = $(\'slider_container_{ID}\').getSize().x;
    
    $$(\'div.slider a\').each( function(e) {
      
      slider_width += e.getSize().x + 5;
      
    });

    var scroll = new Fx.Scroll(\'slider_container_{ID}\', {
      wait: false,
      duration: 550,
      offset: {\'x\': 0, \'y\': 0},
      transition: Fx.Transitions.Quad.easeOut
    });
    
    scroll.scrollTo(0, 0);
    
    $(\'move_right_{ID}\').addEvent(\'click\', function(event) {
      event = new Event(event).stop();
      if(slider_width-slider_parent <= scroll_x) {
        scroll_x = scroll_x - 106;
      }
      scroll_x = scroll_x + 106;
      scroll.scrollTo(scroll_x, 0);
    });
    
    $(\'move_left_{ID}\').addEvent(\'click\', function(event) {
      event = new Event(event).stop();
      scroll_x = scroll_x - 106;
      if(scroll_x < 0) {
        scroll_x = 0;
      }
      scroll.scrollTo(scroll_x, 0);
    });
    

  });
  
  //-->
  </script>';

[/PHP]
<!--IMAGES_FOOTER_END//-->
</code>

\\




==== CSS ====
 ** ///template/inc_css/specific/slider_new.css//**

<code css|h /template/inc_css/specific/slider_new.css |h>
div.slider {
   margin: 10px 0 10px 0;
   padding: 5px 0 5px 0;
   background-color: #888;
   overflow: hidden;
   width: 323px;
   position: relative;
   height: 146px;
}

div.slider .thumb_capture p {
   font-size: 9px;
   color: #444;
   background: #ddd;
   min-height: 25px;

}

div.slider div.inner {
   margin: 0;
   padding: 0;
   list-style: none;
   height: 146px;
   width: 700px;
   position: absolute;
   left: 0;
   top: 5px;
}

div.slider div.inner a {
   border: 3px solid #FFFFFF;
   padding: 0;
   float: left;
   background-color: #000000;
   margin: 0 0 0 5px;
}
div.slider div.inner a:hover {
   border: 3px solid #cfe9ff;
   text-decoration: none;
}
div.slider div.inner a img {
   width: 95px;
}
</code>



\\
===== {INFOTEXT} & LightBox =====
 

The tag **{LIGHTBOX_CAPTION}** is containing  the delivery rule for the LightBox: \\
**title="my text for the LightBox"**(However in a special formatting syntax called ([[http://www.w3schools.com/tags/ref_entities.asp
|HTML-Entities]]) ->  **<**br /**>** will become  **&lt;**br /**&gt;**). 



Thus if e.g. the INFOTEXT is used with the Lightbox it became: 

[ZOOM]<a href="{IMAGE_ABS}" **{LIGHTBOX_CAPTION}**target="_blank"{LIGHTBOX}>

change  to

[ZOOM]<a href="{IMAGE_ABS}" ##title="{INFOTEXT}"## target="_blank"{LIGHTBOX}>

technical: \\
----

The correct form would be (INFOTEXT does not work, so we use INFOHTML):

[ZOOM]<a href="{IMAGE_ABS}" ##title="&lt;p&gt;[PHP] echo html_entities(nl2br('{INFOHTML}'));[/PHP]&lt;/p&gt;"## target="_blank"{LIGHTBOX}>

----
\\

<note important>
Please have a look at the added blank between ......**''title="{INFOTEXT}"## ##target="''**........
</note>