Hab die Extension eingebunden funktioniert auch alles super. Die Slidewhow läuft automatisch ab, die Bilder tauschen sich also alle paar Sekunden. Jetzt möcht ich aber den Übergang etwas dynamischer, geht das irgendwie? im Moment blitzt das nächste Bild nur kurz und leicht auf ich hab schon in den JS Dateien versucht was zu finden aber bisher leider ohne Erfolg. Die Bilder sollen etwas länger überblenden bzw. ausgefadet werden
für was steht dieses transitionDuration: 7000, ??
danke
Soweit ich mich erinnere ist transitionDuration die Zeit in Millisekunden die ein Bild dargestellt wird. d.H nach 7 Sekunden wir das naechste Bild geladen. Hat aber glaub ich nichts damit zu tun wielange das Bild ausgeblendet wird.
Da wuerd ich glaub ich eher im Javascript nachschauen.
dieses transitionDuration: 7000 steht ja schon im JavaScript bei anderen Slideshows war dieses Duration immer der Bildwechsel aber hier finde ich nichts 🙁
var SimpleSlideShowDemo = new Class({
options: {
slides: [],
startIndex: 0,
wrap: true,
onShow: Class.empty, //Mootools 1.2: $empty
onRotate: Class.empty,
onStop: Class.empty,
onAutoPlay: Class.empty,
onShowSlide: Class.empty,
slideInterval: 2500,
auto:false,
transitionDuration: 700,
splitter:"·",
prev:"« ",
next:" »",
play:"∞",
stop:"φ",
bigNavigation : true,
smallNavigation: true,
browser:true,
addBarInside:true,
hideText:false
},
initialize: function(container,options){
if (container[0].getParent().getTag()=='a') {
this.containerNest = container[0].getParent().getParent();
} else {
this.containerNest = container[0].getParent();
}
this.container = container;
this.setOptions(options);
this.slides = [];
this.title = [];
this.descr = [];
this.effects = [];
this.browserArr = [];
this.playStatus = false;
if (this.options.auto) this.playStatus = true;
this.createStructure();
this.addSlides(this.container);
if(this.slides.length) this.showSlide(this.options.startIndex);
if (this.options.auto) {
this.autoplay();
// this.playStatus = true;
}
},
createFx: function(){
this.slideFx = new Fx.Elements(this.slides, {duration: this.options.transitionDuration});
this.slides.each(function(slide){
slide.setStyle('opacity',0);
});
},
createStructure: function() {
var oldClass = this.containerNest.getProperty("class");
this.containerNest.setProperty('class', '');
this.containerNest.addClass('rgslideshow');
this.test = new Element('div').addClass(oldClass).injectBefore(this.containerNest);
this.containerNest.injectInside(this.test);
if (!this.options.hideText) {
if (this.options.addBarInside) {
this.nestAll = new Element('div').setProperty('class', 'rgsnest').injectTop(this.containerNest);
this.title = new Element('div').setProperty('class', 'rgstitle').injectInside(this.nestAll);
this.description = new Element('div').setProperty('class', 'rgsdescription').injectInside(this.nestAll);
}
// this.nestAll = new Element('div').setProperty('class', 'rgslideshow').injectAfter(this.containerNest);
// if (this.options.addBarInside) this.titleOp = new Element('div').setProperty('class', 'optitle').injectInside(this.nestAll);
// this.nestDescription = new Element('div').setProperty('class', 'descr').injectInside(this.nestAll);
// if (this.options.addBarInside) this.descriptionOp = new Element('div').setProperty('class', 'opdescr').injectInside(this.nestAll);
if(this.options.browser) {
this.navigation = new Element('div').setProperty('class', 'rgslideshownav').injectAfter(this.containerNest);
this.innerNavigation = new Element('div').setProperty('class', 'rgsnav2').injectInside(this.navigation);
if(this.options.smallNavigation) this.prevEl = new Element('span').setProperty('class', 'rgsprev').injectInside(this.innerNavigation).setHTML(this.options.prev).addEvent('click', this.cycleBack.bind(this));
this.browser = new Element('div').setProperty('class', 'rgsbrowser').injectInside(this.innerNavigation);
if(this.options.smallNavigation) this.nextEl = new Element('span').setProperty('class', 'rgsnext').injectInside(this.innerNavigation).setHTML(this.options.next).addEvent('click', this.cycleForward.bind(this));
this.play = new Element('span').setProperty('class', 'rgsplay').injectInside(this.innerNavigation).addEvent('click', this.togglePlay.bind(this));
if (!this.playStatus) {
this.play.setHTML(this.options.play).setProperty('title',"Play");
} else {
this.play.setHTML(this.options.stop).setProperty('title',"Stop");
}
}
}
if (this.options.bigNavigation) {
this.bigPrev = new Element('a').setProperties({'class': 'rgsbigprev', 'href': "javascript:void(0);"}).injectInside(this.containerNest).addEvent('click', this.cycleBack.bind(this));
this.bigNext = new Element('a').setProperties({'class': 'rgsbignext', 'href': "javascript:void(0);"}).injectInside(this.containerNest).addEvent('click', this.cycleForward.bind(this));
}
this.createFx();
},
addSlides: function(slides){
var i =1;
slides.each(function(slide){
this.slides.include($(slide));
this.effects[this.slides.indexOf(slide)] = new Fx.Style(slide, 'opacity');
slide.addClass('rgssimg');
var title=" ";
var descr="";
if (slide.getProperty("title")) {
split = slide.getProperty("title").split("|");
if (split[0]) {
title = split[0];
slide.setProperty("title",title);
}
if (split[1]) descr = split[1];
}
this.descr[this.slides.indexOf(slide)] = descr;
this.title[this.slides.indexOf(slide)] = title;
if(this.options.browser) {
this.browserEl = new Element('span').setProperties({'class': 'rgsbrowserEl', 'title': title}).setHTML(this.slides.indexOf(slide)+1).injectInside(this.browser);
// this.browserEl.setProperty('id',this.options.paginationSelector+i);
this.browserEl.addEvent('click', this.cycleTo.bind(this,this.slides.indexOf(slide)));
this.browserArr[this.slides.indexOf(slide)] = this.browserEl;
}
if (i!=1) {
if(this.options.browser) this.splitter = new Element('span').setProperty('class', 'rgssplitEl').setHTML(this.options.splitter).injectBefore(this.browserEl);
slide.setStyle('display','none');
} else {
if (!this.options.hideText && this.options.addBarInside) {
var nestDiv = this.nestAll.getSize();
} else {
var nestDiv = this.containerNest.getSize();
}
var img = slide.getSize();
if(this.options.bigNavigation) {
this.bigPrev.setStyle('height',(slide.getProperty("height")-nestDiv.size.y)+'px');
this.bigNext.setStyle('height',(slide.getProperty("height")-nestDiv.size.y)+'px');
if(!this.options.addBarInside) {
this.bigPrev.setStyle('height',(slide.getProperty("height"))+'px');
this.bigNext.setStyle('height',(slide.getProperty("height"))+'px');
}
}
if(this.options.addBarInside) {
this.nestAll.setStyle('width',slide.getProperty("width")+'px');
}
if(this.options.browser) {
var width = this.containerNest.getSize();
this.navigation.setStyle('width',width.size.x-1+'px');
}
}
i++;
}, this);
},
addSlide: function(slide){
this.addSlides([slide]);
},
cycleForward: function(){
if($chk(this.now) && this.now < this.slides.length-1) this.showSlide(this.now+1);
else if ((this.now) && this.options.wrap) this.showSlide(0);
else if(!$defined(this.now)) this.showSlide(this.options.startIndex);
},
cycleBack: function(){
if(this.now > 0) this.showSlide(this.now-1);
else if(this.options.wrap) this.showSlide(this.slides.length-1);
},
cycleTo: function(i){
if(this.playStatus) {
this.togglePlay();
}
this.showSlide(i);
},
togglePlay: function() {
if (this.playStatus) {
this.stop();
this.playStatus = false;
this.play.innerHTML = this.options.play;
this.play.setProperty('title',"Play");
}
else {
this.autoplay();
this.playStatus = true;
this.play.innerHTML = this.options.stop;
this.play.setProperty('title',"Stop");
}
},
autoplay: function(){
this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this);
this.fireEvent('onAutoPlay');
},
stop: function(){
clearInterval(this.slideshowInt);
this.fireEvent('onStop');
},
rotate: function(){
this.cycleForward();
this.fireEvent('onRotate');
},
showSlide: function(iToShow){
var now = this.now;
var currentSlide = this.slides[now];
var slide = this.slides[iToShow];
function fadeIn(s){
s.setStyles({
display:'block',
visibility: 'visible',
opacity: 0
});
this.effects[this.slides.indexOf(s)].start(1);
this.fireEvent('onShow', [slide, iToShow]);
};
if (!this.options.hideText) {
if (this.options.addBarInside) this.description.innerHTML = this.title.innerHTML = " ";
if(this.options.browser) {
this.browserArr.each(function(el) {
el.removeClass("rgsact");
});
}
}
if(slide) {
if($chk(now) && now != iToShow){
this.effects[now].start(0).chain(function(){
this.slides[now].setStyle('display', 'none');
fadeIn.apply(this, [slide]);
if (!this.options.hideText && this.options.addBarInside) {
this.description.innerHTML = this.descr[iToShow];
this.title.innerHTML = this.title[iToShow];
if(this.options.browser) this.browserArr[this.now].addClass("rgsact");
}
}.bind(this));
} else {
fadeIn.apply(this, [slide]);
if (!this.options.hideText && this.options.addBarInside) {
this.description.innerHTML = this.descr[iToShow];
this.title.innerHTML = this.title[iToShow];
if(this.options.browser) this.browserArr[0].addClass("rgsact");
}
}
this.now = iToShow;
}
}
});
SimpleSlideShowDemo.implement(new Options, new Events);
Hallo ich suche auch nach einer Möglichkeit, bei der die Fotos der Extension rgslideshow ineinander überblenden und nicht erst aus und wieder einblenden.
Anscheinend geht es nicht mit dieser Extension. Bei der Extension rgsmoothgalery funktioniert es.