Mootools Content Slider gesucht

Hallo,

ich verwende das Mootools-Accordion, jetzt benötige ich einen Contentslider wie in folgendem Beispiel 2

http://www.serie3.info/s3slider/demonstration.html

Hat jemand einen Link oder Tip, wie ich das mit Mootools hinbekomme? Oder kann ich einfach zusätzlich jQuery mit einbinden? Vielen Dank für etwaige Infos! :D

Ich nutze auf einer Seite auch ein Jquery PlugIn und habe einfach für die Einbindung des Framework folgende Erweiterung benutzt:
http://www.contao.org/erweiterungsli...ery.20.de.html

Kannst ja mal probieren.

Ich musste bei dem betreffenden Script allerdings die "$" in "jQuery" tauschen beim Initialisierungs-JS des PlugIns...

Also bei deinem Script hier:

Code:

---

$(document).ready(function() {
  $('#s3slider').s3Slider({
      timeOut: 4000
  });
});

---

Gruß
Thomas

Danke, hat funktioniert. Jetzt habe ich nur ein kleines Problem. Mein Akkordeon (MooTools) funktioniert nicht mehr....

Hmm... Also auf meiner Seite funktionieren beide PlugIns. Ich benutze einen BackgroundStretcher auf jQuery Basis und auf der gleichen Seite auch das Akkordeon.

Vielleicht bringt es was die Reihenfolge der eingebundenen Framework-Templates zu ändern. Ich hab das Akkordeon Script vor dem moo_jquery_nc.tpl

Funktioniert denn z.B. die Mootools Mediabox trotzdem?

Gruß
Thomas

Für ein Kundenprojekt entwickelte ich eine Lösung auf Basis von Mootools. Es sollte aber ohne eine Erweiterung innerhalb der Inhaltselemente editierbar sein. Über das Inhaltselement Bildergalerie setzte ich folgende Funktion um.

http://www.trixxxer.de


Angepasster CSS Code Quelle: http://davidwalsh.name/mootools-slideshow-ii

Code:

---

#slideshow-container{width:960px;height:360px;position:relative;overflow:hidden;float:none;clear:both;margin-bottom:40px;text-align:center;}
#slideshow-container img{width:960px;height:320px;top:0;left:0;position:absolute;display:block;z-index:1;}
#slideshow-container-caption{height:80px;bottom:40px;position:absolute;overflow:hidden;display:none;text-align:left;left:0;right:0;background:#000;z-index:10;}
* html #slideshow-container-caption{width:100%;}
#slideshow-container-caption h2{margin:0;padding:10px 40px 3px 30px;font-weight:bold;font-size:18px;color:#fff;border:none;}
#slideshow-container-caption p{margin:0;padding:0 40px 10px 30px;font-size:14px;color:#eee;}
.toc{width:20px;height:20px;bottom:0;position:absolute;display:block;background:#B9B9B9;z-index: 2;text-indent:-9999px;border-radius:20px;-khtml-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;-webkit-border-radius:20px;}
.toc:hover,.toc-active{text-decoration:none;background:#F9FA70;}
#previous,#next{width:35%;height:320px;top:0;right:0;position:absolute;display:block;text-indent:-9999px;z-index: 100;background:url(".tl_files/images/bg_overlay.png") no-repeat 110% 110%;}
#previous{left:0;}
#previous:hover{background:url("tl_files/images/bg_prev.png") no-repeat 0 55%;}
#next:hover{background:url("tl_files/images/bg_next.png") no-repeat 100% 55%;}

---

JS Code Mootools Slider Quelle: http://davidwalsh.name/mootools-slideshow-ii

Code:

---

window.addEvent('domready',function() {
  /* settings */
  var showDuration = 3000;
  var container = $('slideshow-container');
  var images = container.getElements('img');
  var currentIndex = 0;
  var interval;
  var toc = [];
  var tocWidth = 20;
  var tocActive = 'toc-active';
 
  /* new: starts the show */
  var start = function() { interval = show.periodical(showDuration); };
  var stop = function() { $clear(interval); };
  /* worker */
  var show = function(to) {
    images[currentIndex].fade('out');
    toc[currentIndex].removeClass(tocActive);
    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
    toc[currentIndex].addClass(tocActive);
  };
 
  /* new: control: table of contents */
  images.each(function(img,i){
    toc.push(new Element('a',{
      text: i+1,
      href: '#',
      'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
      events: {
        click: function(e) {
          if(e) e.stop();
          stop();
          show(i);
        }
      },
      styles: {
        left: ((i + 1) * (tocWidth + 10))
      }
    }).inject(container));
    if(i > 0) { img.set('opacity',0); }
  });
 
  /* new: control: next and previous */
  var next = new Element('a',{
    href: '#',
    id: 'next',
    text: '>>',
    events: {
      click: function(e) {
        if(e) e.stop();
        stop(); show();
      }
    }
  }).inject(container);
  var previous = new Element('a',{
    href: '#',
    id: 'previous',
    text: '<<',
    events: {
      click: function(e) {
        if(e) e.stop();
        stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
      }
    }
  }).inject(container);
 
  /* new: control: start/stop on mouseover/mouseout */
  container.addEvents({
    mouseenter: function() { stop(); },
    mouseleave: function() { start(); }
  });
 
  /* start once the page is finished loading */
  window.addEvent('load',function(){
    start();
  });
});

---

JS Code Mootools anpassen, Caption hinzugefügen

Code:

---

/* new: create caption area */
  var captionDIV = new Element('div',{
    id: 'slideshow-container-caption',
    styles: {
      //display:none,
      opacity: thumbOpacity
    }
  }).inject(container);
  var captionHeight = captionDIV.getSize().y;
  captionDIV.setStyle('height',0);
 
  /* new: starts the show */
  var start = function() { interval = show.periodical(showDuration); };
  var stop = function() { $clear(interval); };
  /* worker */
  var show = function(to) {
    images[currentIndex].fade('out');
    toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
    toc[currentIndex].addClass(tocActive).fade(1);
    captionDIV.set('tween',{
      onComplete: function() {
        captionDIV.set('tween',{
          onComplete: $empty
        }).tween('height',captionHeight);
        /* parse caption */
        var title = '';
        var captionText = '';
        if(images[currentIndex].get('alt')) {
          cap = images[currentIndex].get('alt').split('::');
          title = cap[0];
          captionText = cap[1];
          captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' : ''));
        }
      }
    }).tween('height',0);
  };

---

JS Code Mootools Caption anpassen an Metacreator, <p>-Tag entfernen, da vom Metacreator automatisch durch Editor hinzugefügt

Code:

---


captionDIV.set('html','<h2>'+title+'</h2>'+(captionText?captionText:''))

---

Fertiger Vorkomprimierter JS Code Mootools

Code:

---

window.addEvent('domready',function(){var showDuration=6000;var container=$('slideshow-container');var images=container.getElements('img');var currentIndex=0;var interval;var toc=[];var tocWidth=25;var tocActive='toc-active';var thumbOpacity=0.7;var captionDIV=new Element('div',{id:'slideshow-container-caption',styles:{opacity:thumbOpacity}}).inject(container);var captionHeight=captionDIV.getSize().y;captionDIV.setStyle('height',0);var start=function(){interval=show.periodical(showDuration)};var stop=function(){$clear(interval)};var show=function(to){images[currentIndex].fade('out');toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);images[currentIndex=($defined(to)?to:(currentIndex<images.length-1?currentIndex+1:0))].fade('in');toc[currentIndex].addClass(tocActive).fade(1);captionDIV.set('tween',{onComplete:function(){captionDIV.set('tween',{onComplete:$empty}).tween('height',captionHeight);var title='';var captionText='';if(images[currentIndex].get('alt')){cap=images[currentIndex].get('alt').split('::');title=cap[0];captionText=cap[1];captionDIV.set('html','<h2>'+title+'</h2>'+(captionText?captionText:''))}}}).tween('height',0)};images.each(function(img,i){toc.push(new Element('a',{text:i+1,href:'#','class':'toc'+(i==0?' '+tocActive:''),events:{click:function(e){if(e)e.stop();stop();show(i)}},styles:{left:((i+1)*(tocWidth)+420)}}).inject(container));if(i>0){img.set('opacity',0)}});var next=new Element('a',{href:'#',id:'next',text:'>>',events:{click:function(e){if(e)e.stop();stop();show()}}}).inject(container);var previous=new Element('a',{href:'#',id:'previous',text:'<<',events:{click:function(e){if(e)e.stop();stop();show(currentIndex!=0?currentIndex-1:images.length-1)}}}).inject(container);container.addEvents({mouseenter:function(){stop()},mouseleave:function(){start()}});window.addEvent('load',function(){show(0);start()})});

---

gallery_default.tpl umbennen zu gallery_slider.tpl und diesen Code einfügen

PHP-Code:

---

<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->caption; ?>::<?php echo $col->alt; ?>" />
<?php endforeach; ?>
<?php endforeach; ?>

---

Noch folgende Einstellungen für das Inhaltselement Bildergalerie.
Anhang 4790

So fertig ist der Slider, funktioniert mit allen anderen Frameworks innerhalb von Contao wie Akkordion, Mediabox, Slimbox.