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.
image_slider.jpg
So fertig ist der Slider, funktioniert mit allen anderen Frameworks innerhalb von Contao wie Akkordion, Mediabox, Slimbox.
Mootools Content Slider gesucht
Zitieren
Lesezeichen