{{indexmenu_n>10}}

====== Slider enhanced ======

To keep the Slider more flexible, I've adapted the script slightly ([[http://forum.phpwcms.org/viewtopic.php?f=28&t=19101|Have a look into the old  thread [DE]]]). The adapted version for **Mootools 1.2** //(since r381)//.

**Advantages:** \\
- Width, height and length of the Sliders depend on the adjustment of the picture preview size and number of columns \\
- With several Slidern on a page, you can not scroll beyond the end \\

\\
----

**slider01.tmpl** V1.1  09.03.10  

Docu: -- \\
Forum V1.0: [[http://forum.phpwcms.org/viewtopic.php?f=28&t=19101|Flexible Bild-Slider mit R340]] [DE] \\
Forum V1.1: [[http://forum.phpwcms.org/viewtopic.php?p=123104#p123104]] [DE] \\


**Author:**  Gerd (swisscheese) \\
**CMS Version:** >= 1.4.5 \\ 
**Version:** V1.1 \\

 

Tag: -- \\

Filename: **slider01.tmpl** 

Folder:  ** template/inc_cntpart/imagespecial/ ** 

**Condition:**  -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_cntPHP_rt']   = 1;



----
----

\\

===== Template: =====


<code html |h slider01.tmpl |h>
<!--IMAGES_HEADER_START//-->
<div>
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="outer" style="height:{THUMB_HEIGHT_MAX}px;">
   <a href="#" id="move_left_{ID}" class="sliderArrowLft"><img src="picture/site/arrow_10x85_lft_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
      <div class="slider" id="slider_container_{ID}" style="height:{THUMB_HEIGHT_MAX}px; width:[PHP]echo ('{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px; left:[PHP]echo ('{SPACE}' + 10)[/PHP]px;">
         <div id="slider_{ID}" class="inner"> 
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
            <p style="width:{THUMB_WIDTH}px; margin-right:{SPACE}px;">
            {IMAGE}[CAPTION]<br />{CAPTION}
            [/CAPTION]</p>
<!--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_right_{ID}" class="sliderArrowRgt" style="left:[PHP]echo (10 + '{SPACE}' + '{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px"><img src="picture/site/arrow_10x85_rgt_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
</div>
</div>
<!-- JS: MORE:Fx/Fx.Scroll -->

[PHP]
  $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         = {THUMB_WIDTH_MAX} + {SPACE};
      var scroll_x      = 0;
      var slider_parent   = $(\'slider_container_{ID}\').getSize().x;
      
      $$(\'div#slider_container_{ID} img\').each( function(e) {
         
         slider_width += e.getSize().x + {SPACE};
         
      });
            
      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 - step;
         }
         scroll_x = scroll_x + step;
         scroll.scrollTo(scroll_x, 0);
      });
      
      $(\'move_left_{ID}\').addEvent(\'click\', function(event) {
         event = new Event(event).stop();
         scroll_x = scroll_x - step;
         if(scroll_x < 0) {
            scroll_x = 0;
         }
         scroll.scrollTo(scroll_x, 0);
      });
      

   });
   
  //-->
  </script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->

</code>
\\

===== CSS: =====

<code css|h slider01.css |h>
/* SLIDER */
div.outer {
   position:relative;
}
div.slider {
   margin: 0 0 10px 0;
   padding: 0 0 5px 0;
   overflow: hidden;
   position: absolute;
   top:0;
}

.sliderArrowLft,
.sliderArrowRgt {
   width:10px;
   display:block;
   border:1px solid #fff;
   position: absolute;
   top:0;
}
.sliderArrowLft img,
.sliderArrowRgt img {
   border:none;
}
a.sliderArrowLft:hover,
a.sliderArrowRgt:hover {
   border:1px solid #c00;
}

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

div.slider div.inner p {
   padding: 0;
   float: left;
}

div.slider div.inner a {
   float:left;
   border: 1px solid #FFFFFF;
   padding: 0;
   background-color: #000000;
}
div.slider div.inner a:hover {
   border: 1px solid #CC3300;
}
div.slider div.inner br {
   clear:left
}
div.slider div.inner img {
   border: 1px solid #ccc;
}
div.slider div.inner a img {
   border: none;
}
/* eof SLIDER */
</code>

\\ 

===== Template autoscroll: =====


<code html |h slider01.tmpl |h>
<!--IMAGES_HEADER_START//-->
<div>
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="outer" style="height:{THUMB_HEIGHT_MAX}px;">
   <a href="#" id="move_left_{ID}" class="sliderArrowLft"><img src="picture/site/arrow_10x85_lft_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
      <div class="slider" id="slider_container_{ID}" style="height:{THUMB_HEIGHT_MAX}px; width:[PHP]echo ('{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px; left:[PHP]echo ('{SPACE}' + 10)[/PHP]px;">
         <div id="slider_{ID}" class="inner"> 
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
            <p style="width:{THUMB_WIDTH}px; margin-right:{SPACE}px;">
            {IMAGE}[CAPTION]<br />{CAPTION}
            [/CAPTION]</p>
<!--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_right_{ID}" class="sliderArrowRgt" style="left:[PHP]echo (10 + '{SPACE}' + '{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px"><img src="picture/site/arrow_10x85_rgt_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
</div>
</div>

<!-- JS: MORE:Fx/Fx.Scroll -->

[PHP]
  $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 manualscroll_speed   = 500;
      var autoscroll_speed   = 4000;
      var slider_width      = 0;
      var step            = {THUMB_WIDTH_MAX} + {SPACE};
      var scroll_x         = 0;
      var slider_parent      = $(\'slider_container_{ID}\').getSize().x;
      var myTimer = false;
       var direction = 1;
      
      $$(\'div#slider_container_{ID} img\').each( function(e) {
         
         slider_width += e.getSize().x + {SPACE};
         
      });
            
      var scroll = new Fx.Scroll(\'slider_container_{ID}\', {
         link: \'chain\',
         duration: manualscroll_speed,
         offset: {\'x\': 0, \'y\': 0},
         transition: Fx.Transitions.Quad.easeInOut
      });
     
      var autoscroll = new Fx.Scroll(\'slider_container_{ID}\', {
         wait: false,
         duration: autoscroll_speed,
         offset: {\'x\': 0, \'y\': 0},
         transition: Fx.Transitions.linear
      });
      
      scroll.scrollTo(0, 0);
      
      $(\'move_right_{ID}\').addEvent(\'click\', function(event) {
         myTimer = $clear(myTimer);
       autoscroll.stopTimer();
       event = new Event(event).stop();
         scroll_x = scroll_x + step;
         if(slider_width-slider_parent <= scroll_x) {
            scroll_x = scroll_x - step;
         }
         scroll.scrollTo(scroll_x, 0);
         myTimer = automove_right_{ID}.periodical(autoscroll_speed);
      });
     
      $(\'move_left_{ID}\').addEvent(\'click\', function(event) {
         myTimer = $clear(myTimer);
       autoscroll.stopTimer();
         event = new Event(event).stop();
         scroll_x = scroll_x - step;
         if(scroll_x < 0) {
            scroll_x = 0;
         }
         scroll.scrollTo(scroll_x, 0);
         myTimer = automove_right_{ID}.periodical(autoscroll_speed);
      });
    
     function automove_right_{ID}() {
         if(slider_width-slider_parent <= scroll_x + step) {
          direction = -1;
       }
       if(scroll_x <= 0) {
          direction = 1;
       }
         scroll_x = scroll_x + step * direction;
         autoscroll.scrollTo(scroll_x, 0);
      }
     myTimer = automove_right_{ID}.periodical(autoscroll_speed);
      

   });
   
  //-->
  </script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->
</code>

\\