Comments on: mooCicle, sample javascript gallery

By: ????? ???????? ?? 25 ???? - ??????? ? ????????? ?? jQuery | DobrovoImaster

????? ???????? ?? 25 ???? - ??????? ? ????????? ?? jQuery | DobrovoImaster — Fri, 21 Oct 2011 23:21:46 +0000

[...] ??.???? | Demo [...]

By: alfredo

alfredo — Fri, 29 Jul 2011 19:06:10 +0000

me agrado esta libreria, es algo así lo que necesito para un programa de apoyo educativo a niños en edad escolar elemental.

By: David

David — Sat, 18 Jun 2011 22:43:14 +0000

Thanks Eduardo, was doing that, but it did not work, so I had to create a “var” in the .js file for each time I wanted to show it in a different place with the items you listed changed for each and also the display page to show those numbers as well.

Does what is needed and happy with that. Thanks again.

By: Eduardo

Eduardo — Sat, 18 Jun 2011 15:55:01 +0000

well, this is a very old script. you could try to replace these lines:

13: var images=$$(‘ul#moocircle li img’);
13: var images=$$(‘ul.moocircle li img’);

14: $(‘moocircle’).setStyles({
14: $$(‘.moocircle’).setStyles({

23: var listet=$$(‘ul#moocircle li’);
23: var listet=$$(‘ul.moocircle li’);

But I’m not sure it will work.

By: David

David — Sat, 18 Jun 2011 05:32:00 +0000

Is this possible to have more than 1 moocicle item on one page? I want to display a certian group of images with one moocicle and another lot of images with another on the same page, can this be done?

By: 33 adet harika flash ve Java destekli resim galerileri » Demo, Flash, Gallery, Image, Photo, Slideshow » Paylasim Portali

Fri, 27 May 2011 20:07:08 +0000

[...] mooCicle Demo [...]

By: jQuery????

jQuery???? — Tue, 01 Jun 2010 12:05:21 +0000

[...] mooCicle Allora, ho creato un piccolo javascript per creare una semplicissima galleria con effetto foto sfogliate. Avevo notato una galleria di questo genere fatta con jQuery, è mi sono chiesto quanto fosse difficile crearla per mooTools. Direi non molto. [...]

By: kreatiph

kreatiph — Sun, 07 Feb 2010 20:11:33 +0000

Hallo,

Nice gallery. Really cool. I was wondering wether someone could tell me how to ‘autostart’ the slideshow rather than having to click it?

By: Eduardo

Eduardo — Mon, 29 Jun 2009 08:37:32 +0000

good job, sybri.

By: sybri

sybri — Sun, 28 Jun 2009 22:16:48 +0000

i make the class version for mootools 1.2:
/*
mooCicle
Javascript image cicle slideshow
*/
var zindex=300;
var duration=300;
var topadd=40;
var leftadd=20;

var moocicle = new Class({

Implements: [Events, Options],
options: {
zindex: 300,
duration: 600,
topadd: 40,
leftadd: 20
},
initialize: function(element,options){
this.moocicle = element;
var images=this.moocicle.getElements(‘li img’);
this.setOptions(options);
this.moocicle.setStyles({
‘margin’:0,
‘padding’:0,
‘height’:images[0].getStyle(‘height’),
‘width’:images[0].getStyle(‘width’),
‘list-style’:'none’,
‘display’:'block’,
‘position’:'relative’
});
var listet=this.moocicle.getElements(‘li’);
listet.each(function(el,i){
el.setStyles({
‘top’:i*10,
‘left’:i*10,
‘position’:'absolute’
})
});
nlist=listet.length;
var slidefxs = [];
var slidefxs1 = [];
var mc=this;
listet.each(function(el, i){
zindex++;
el.setStyle(‘z-index’,zindex);
el.addEvent(‘click’, function(e){

$$(‘body’).setStyle(‘overflow-x’, ‘hidden’);
/*slidefxs[i] = new Fx.Tween(el, ‘left’, {
duration: duration,
transition: Fx.Transitions.linear,
wait: true
});
slidefxs[i].start.delay(0, slidefxs[i], (el.getStyle(‘width’)+leftadd+(i*10)));*/

/*
slidefxs1[i] = new Fx.Tween(el, ‘top’, {
duration: duration,
transition: Fx.Transitions.linear,
wait: true
});
slidefxs1[i].start.delay(0, slidefxs1[i], topadd);

moocicle.nextimage.pass([el, listet]).delay(duration);

slidefxs[i] = new Fx.Tween(el, ‘left’, {
duration: duration,
transition: Fx.Transitions.backOut,
wait: true
});
slidefxs[i].start.delay(duration, slidefxs[i], 0);

slidefxs1[i] = new Fx.Tween(el, ‘top’, {
duration: duration,
transition: Fx.Transitions.backOut,
wait: true
});
slidefxs1[i].start.delay(duration, slidefxs1[i], 0);
*/
mc.reactive.delay((duration*2)+1);
});

});
},
nextimage: function(el,listet){
el.setStyle(‘z-index’,((el.getStyle(‘z-index’).toInt()-nlist)+1));
listet.each(function(other, j){
if (other != el){
other.setStyle(‘z-index’,(other.getStyle(‘z-index’).toInt()+1));
}
});
},
reactive: function(){
$$(‘body’).setStyle(‘overflow-x’, ‘visible’);
}

});