Autor Zpráva
senior
Profil
Príjemný deň,

prosím o radu čím, resp. ako urobiť plynulý prechod z jedného obrázku do druhého, tretieho ... (nie morphing a flash)? Prešiel som celú diskusiu, ale problém je v tom, že to neviem asi správne špecifikovať. Ďakujem.
e
Profil *
Ak správne chápem, tak najlepšie JavaScriptom. Skús použiť napr. MooTools, takéto efekty má aj vbudované.
senior
Profil
e
Ďakujem, je to ono, ale je potrebné ten prechod obrázkov odštartovať a následne sa sám zastaví. Ja by tom potreboval, aby sa to spustilo samé a prechod obrázkov aby išiel stále dookola. Skúšam upraviť JS kód, ale nedarí sa mi to. Tu je JS kód:

var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar');
var path = 'http://demos.mootools.net/demos/Asset.images/';
var images = [
path + 'cow1.png',
path + 'cow2.jpg',
path + 'cow3.jpg',
path + 'cow4.jpg',
path + 'cow5.jpg'
];
gallery.setStyles({'opacity': 0, 'display': 'none'});
progress.setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');

$('start').addEvent('click', function(e) {
e = new Event(e).stop();
$('start').setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');
if (!busy) {

var galleryImgs = $$('#gallery img');
if (galleryImgs.length > 0) galleryImgs.each(function(image) { image.remove(); });

busy = true;
progress.setStyle('visibility', 'visible');
gallery.setStyle('display', 'block');
new Asset.images(images, {
onProgress: function(i) {
this.setStyles({
'position': 'absolute',
'opacity': 0,
'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
});
loadedImages[i] = this;
var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
},
onComplete: function() {
progress.setStyle('visibility', 'hidden');
var fx = $('gallery').effect('opacity').start(1);
timer = 0;
loadedImages.each(function(image, i) {
timer += 1500;
image.inject(gallery);
fx = function() {
var imgEffect = image.effect('opacity', {duration: 1500});
imgEffect.start(1).chain(function() {
if (i < loadedImages.length - 1) {
this.start(0).chain(function() {
image.remove();
});
} else {
busy = false;
$('clear').setStyle('visibility', 'visible');
$('start').setStyle('visibility', 'hidden');
}
});

}.delay(timer * 2);
});
}
});
}
});

$('clear').addEvent('click', function(e) {
e = new Event(e).stop();
if (!busy) {
$$('#gallery img').each(function(image) {
image.remove();
});
var fx = new Fx.Style(gallery, 'opacity', {
onComplete: function() {
gallery.setStyle('display', 'none');
}
});
fx.start(0);
}
$('clear').setStyle('visibility', 'hidden');
$('start').setStyle('visibility', 'visible');
});

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0