Slider enhanced

To keep the Slider more flexible, I've adapted the script slightly (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: 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: → /config/phpwcms/conf.inc.php

$phpwcms['allow_cntPHP_rt'] = 1;

Template:

slider01.tmpl

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

CSS:

slider01.css

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

Template autoscroll:

slider01.tmpl

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

english/phpwcms-system/article/contentparts/images-special/slider/enhanced.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions