The Developer Inside

mooCicle, la galería de fotos más original | aNieto2K dice:

19/10/2007 alle 00:44

[...] fotos desarrolladas en Javascript son cada vez más y más completas,  una muestra de ello es mooCicle, que usando MooTools, hacen posible este efecto tan diferente a los vistos hasta la [...]

MooCicle – Galeria de Imagenes en Mootools dice:

19/10/2007 alle 07:45

[...] MooCicle es una galería de imagenes creada con MooTools. Esta galería no es la clásica que te presenta flechas de navegación si no que para pasar de una imagen a otra hay que hacer click sobre la imagen y realiza un efecto que sobrepone la imagen siguiente sobre la nueva. El modo de uso es el siguiente: [...]

GidanMX2 dice:

20/10/2007 alle 21:46

papero, a me non va su Linux (gentoo) con Epiphany 2.20.1…

GidanMX2 dice:

20/10/2007 alle 21:48

a no sorry, ero io che non ero capace a farla andare (lentina comunque…)

hay códigos que sorprenden… at FACTA ET VERBA dice:

21/10/2007 alle 13:54

[...] http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/  [...]

GidanMX2 dice:

25/10/2007 alle 13:51

Dipende da che si intende per velocità, a me non sembra fluido…

GidanMX2 dice:

25/10/2007 alle 13:52

ora va ok, boh oO

Weekend Links – PHP Regular Expressions, XMLHttpRequest, Internet Explorer, Mouse Tracker, MooTools Gallery, Endless Pageless | David Walsh :: PHP, CSS, MooTools, and Everything Else dice:

28/10/2007 alle 23:48

[...] http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/ [...]

Últimas Herramientas de Webnova at Webnova – Recursos Webmaster dice:

19/11/2007 alle 15:44

[...] de fotos son cada vez más y más completas,  una muestra de ello es mooCicle, que usando MooTools, hacen posible este efecto tan diferente a los vistos hasta la [...]

juan dice:

11/12/2007 alle 17:34

is it possible to create a button next instead of click
image? how to do?

Congratulations for your work.

juan dice:

11/12/2007 alle 18:33

At least works.
I create a button next with the following code:

function click_moocicle() {
var cont=0;
var zindex=0;
var listet=$$(’ul#moocircle li’);

listet.forEach( function(el,i) {
if (el.getStyle(’z-index’)>zindex) {
zindex=el.getStyle(’z-index’);
cont=i;

}

});

listet[ruta].fireEvent (’click’);

}

And in the image next onclick calls this function.

Sure there are better solutions for this question but
this works.

Congratulations again for your work

carlos dice:

30/01/2008 alle 20:46

mmmm bunisimo

jjones dice:

13/02/2008 alle 00:55

bkn grax

Fabian dice:

28/02/2008 alle 00:54

Anybody knows how can i do a back button?

The next button has an error, this is the solution:

listet[ruta].fireEvent (’click’);

by:

listet[cont].fireEvent(’click’);

Please help me to framirez(AT)gurunet.cl

Riccardo dice:

7/03/2008 alle 19:50

Salve a tutti, non sono espertissimo…cerco di seguire una procedura per far funzionare qst ottimo script ma non riesco. Uso wordpress, inserisco lo script di mooTools (con le funzioni richieste) e il mooCicle nel mio header…poi richiamo con la procedura scritta sopra (<ul id=”moocircle” etc…) ma non va. Dove sbaglio? C’è forse un conflitto di css nel tag ul? O forse sbaglio ad utilizzare mooTools? Grazie in anticipo a chiunque voglia illuminarmi

33??????Javascript?Flash???? | Angelived dice:

1/04/2008 alle 16:19

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

33??????Javascript?Flash???? – MyEss.cn dice:

1/04/2008 alle 17:13

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

33 Most Beautiful Javascript and Flash Galleries – Graphics, Photoshop, Illustrator, Fireworks, Tutorials, Web 2.0 dice:

2/04/2008 alle 17:23

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

LoverSick.com » Blog Archive » 33 Harika Javascript ve Flash Galeriler dice:

4/04/2008 alle 04:32

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

33??????Javascript?Flash???? | Angelived dice:

4/04/2008 alle 15:43

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

[???]35+ ??JS/Flash?? | Firefox.hk dice:

7/04/2008 alle 12:08

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

tribedude dice:

7/04/2008 alle 17:51

do you have an english page please?

Las mejores galerías fotográficas « Diseño web y posicionamiento en buscadores dice:

11/04/2008 alle 22:14

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

Serhat Yolaçan » 33 En Güzel Javascript ve Flash Galeri dice:

21/04/2008 alle 00:48

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

33????Javascript/Flash???? | ???Blog dice:

29/04/2008 alle 04:01

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

Gallerie gratuite per fotografie in flash e in javascript | Caputo’s Blog dice:

5/05/2008 alle 20:19

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

Mudska Studio Blog Lab » 33 Most Beautiful Javascript and Flash Galleries dice:

14/05/2008 alle 12:27

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

32 Flash ? Javascript ??????? | ??????-?????? ?1. dice:

23/06/2008 alle 22:14

[...] mooCicle – ??????? ? ???????? ??????????????. ?????? ??????? [...]

Mascot » Blog Archive » Beautiful Javascript and Flash Galleries dice:

18/07/2008 alle 15:10

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

56 ?AJAX??????(Galleries, Slideshows and Lightboxes) | ??????? dice:

15/10/2008 alle 02:44

[...] 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. [...]

110+ javascript / Ajax bookmarks for web developers dice:

29/10/2008 alle 20:39

[...] Galleria FrogJS HighSlide SmoothGallery DHTMLGoodies – Image Slideshow Google Slideshow JQuery Cycle PhatFusion Gallery Ajax Slideshow with XML TripTracker Slideshow Aeron Slideshow WebTwo Ajax Slideshow Spry Gallery Demo jQuery ImageStrip Slideshow MiniShowCase Ajax Coverflow (Slideflow) Lightweight Gallery Livepipe Photo Folder jaS Gallery Mooflow Cross browser toys Gallery Moo Cycle [...]

56 Scripts For Galleries, Slideshows and Lightboxes « LanceZhang’s Blog dice:

3/11/2008 alle 11:03

[...] mooCicle [...]

?????’s Blog » 33??????Javascript?Flash???? dice:

26/12/2008 alle 07:05

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

andres dice:

8/02/2009 alle 01:57

Excelente, me da muy buenas ideas con este efecto!!

Rakesh dice:

14/02/2009 alle 12:23

hi its a gr8 script.

32 Flash ? Javascript ??????? | ??????-?????? ?1. dice:

22/03/2009 alle 16:41

[...] mooCicle – ??????? ? ???????? ??????????????. ?????? ??????? [...]

?????35+ ??Javascript /Flash?? | Molutran’s Blog dice:

23/03/2009 alle 07:01

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

Muher Çoban dice:

14/04/2009 alle 09:37

Good websites Perfect script !

sybri dice:

28/06/2009 alle 23:16

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)));*/

var morph= new Fx.Morph(el,{
duration: duration,
transition: Fx.Transitions.linear,
wait: true,
link: ‘chain’
});
var myChain = new Chain();
morph.start({
‘left’: el.getStyle(’width’)+leftadd+(i*10),
‘top’: topadd
});
mc.nextimage.pass([el, listet]).delay(duration);
morph.start({
‘left’: (i*10),
‘top’: (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’);
}

});