Slider erweitert

Um den Slider noch flexibler zu halten, habe ich mir mal die Mühe gemacht, das Script etwas anzupassen (Siehe auch diesen alten Thread). Hier ist die angepasste Version für Mootools 1.2 (ab r381).

Vorteile:
- Breite, Höhe und Länge des Sliders richten sich nach den Einstellungen der Bildvorschaugrösse und Spaltenanzahl
- Bei mehreren Slidern auf einer Seite kann man nicht mehr über das Ende hinaus scrollen

slider01.tmpl V1.1 09.03.10

Docu: –
Forum V1.0: Flexible Bild-Slider mit R340
Forum V1.1: http://forum.phpwcms.org/viewtopic.php?p=123104#p123104

Autor: Gerd (swisscheese)
CMS Version: >= 1.4.5
Version: V1.1

Tag: –

Dateiname: slider01.tmpl

Verzeichnis: template/inc_cntpart/imagespecial/

Bedingung: → /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//-->

deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/slider/erweitert.txt · Last modified: 2018/06/03 18:08 (external edit)

Show pagesource Old revisions