Добрый день! Помогите пожалуйста, кроме вас надеяться не на кого
Проблема такая: на сайте в шапке должен быть slideshow (сайт на joomla), смена картинок происходит путем "исчезновения" первой и появления второй соответственно. Так вот. Первая картинка загружается, потом плавно исчезает - и вторая картинка НЕ появляется. Через какое-то время появляется опять первая.
Для меня javascript - ну хуже китайской грамоты, помогите пожалуйста, что подправить в коде? (далее код java и код php, который этот слайд шоу выводит)
var VerySimpleSlideshow = new Class({
options: {
container: 'slideshow-container',
elements: '#slideshow-container img',
showControls: true,
transDelay: 5000,
transDuration: 1000
},
Implements: [Options,Events],
initialize: function(options) {
//settings
this.setOptions(options);
this.container = $(this.options.container);
this.elements = $$(this.options.elements);
this.currentIndex = 0;
this.interval = '';
// tween
this.elements.set({
tween: {
duration: this.options.transDuration
}
});
//assign
this.elements.each(function(el,i){
if(i > 0) el.set('opacity',0);
},this);
//next,previous links
if(this.options.showControls) {
this.slcontrol = $('slcontrol');
this.createControls();
}
//events
this.container.addEvents({
mouseenter: function() {
this.stop();
if(this.options.showControls) {
this.slcontrol.set('style','z-index:2');
}
}.bind(this),
mouseleave: function() {
this.start();
if(this.options.showControls) {
this.slcontrol.set('style','z-index:-1');
}
}.bind(this)
});
},
showit: function(to) {
this.elements[this.currentIndex].tween('opacity', '1', '0');
this.currentIndex = to;
this.elements[this.currentIndex].tween('opacity', '0', '1');
},
show: function() {
this.elements[this.currentIndex].tween('opacity', '1', '0');
this.currentIndex = (this.currentIndex < this.elements.length - 1 ? this.currentIndex + 1 : 0);
this.elements[this.currentIndex].tween('opacity', '0', '1');
},
start: function() {
this.interval = this.show.bind(this).periodical(this.options.transDelay);
},
stop: function() {
$clear(this.interval);
},
//control
createControls: function() {
var next = new Element('a',{
href: '#',
id: 'slnext',
text: '',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show();
}.bind(this)
}
}).inject(this.slcontrol);
var previous = new Element('a',{
href: '#',
id: 'slprev',
text: '',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.showit(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
}.bind(this)
}
}).inject(this.slcontrol);
}
});
<?php if ($frontpagediv == "1" && $headerType != "4") {?>
<div id="slideshow-container">
<?php
$imgrootdir = "templates/".$this->template."/images/";
if ($headerType == "0" || $headerType == "2") {
echo '<img src="'.$imgrootdir.$myimage.'" alt="" />';
} elseif ($headerType == "1" || $headerType == "3") {
$picDir= $imgrootdir.$myfolder;
$picDir .="/";
if (file_exists($picDir) && is_readable($picDir)) {
$folder = opendir($picDir);
} else {
echo '<div class="message">Error! Please check the parameter settings and make sure you have entered a valid image folder path!</div>';
return;
}
$allowed_types = array("jpg","JPG","jpeg","JPEG","gif","GIF","png","PNG","bmp","BMP");
$index = array();
while ($file = readdir ($folder)) {
if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$allowed_types)) {array_push($index,$file);}
}
closedir($folder);
if($display == 'random') {shuffle($index);} else {sort($index);}
foreach ($index as $file) {
$finalpath = $picDir.$file;
// output
echo '<img src="'.$finalpath.'" alt="'.$file.'" />';
}
if ($showControl) echo '<div id="slcontrol"> </div>';
}
?>
</div>
<?php } ?>
