mooCicle, sample javascript gallery

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.
mooCicle richiede mooTools 1.11. Intanto ecco a voi la demo della gallery.

demo

Ho testato lo script su IE6, FireFox 2 e Safari 3 beta. Definirei lo script in beta, ma anche in alpha. Diciamo versione 0.1.

La gallery usa un elenco menu (ul) con le immagini direttamente nei li.
Un codice di questo genere:

<ul id="moocircle">
	<li><img src="images/1.jpg" alt="" /></li>
	<li><img src="images/2.jpg" alt="" /></li>
	<li><img src="images/3.jpg" alt="" /></li>
</ul>

L’ID moocircle è necessario per il funzionamento. Lo script parte in automatico al onload della pagina.

Componenti di mooTools necessari per l’utilizzo

Core

Core.js

Class

Class.js
Class.Extras.js

Native

Array.js
String.js
Function.js
Number.js
Element.js

Element

Element.Filters.js
Element.Selectors.js

Effects

Fx.Base.js
Fx.CSS.js
Fx.Style.js
Fx.Transitions.js

Scarica mooCicle 0.1

trackback feed comments

Ott182007

34 commenti

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

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

website »

MooCicle - Galeria de Imagenes en Mootools dice:

19 Ottobre 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 Ottobre 2007 alle 21:46

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

20 Ottobre 2007 alle 21:48

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

Eduardo dice:

21 Ottobre 2007 alle 10:23

l’ho provato sul mac e sul pc con safari, ie e firefox e non mi pare avesse problemi di velocità. Fammi sapere se con FF su linux va normale o no.

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

21 Ottobre 2007 alle 13:54

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

25 Ottobre 2007 alle 13:51

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

25 Ottobre 2007 alle 13:52

ora va ok, boh oO

25 Ottobre 2007 alle 19:11

Ma dillo che vuoi farmi preoccupare inutilmente…

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

28 Ottobre 2007 alle 23:48

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

19 Novembre 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 Dicembre 2007 alle 17:34

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

Congratulations for your work.

11 Dicembre 2007 alle 17:49

sorry, not in this version.

11 Dicembre 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 Gennaio 2008 alle 20:46

mmmm bunisimo

jjones dice:

13 Febbraio 2008 alle 00:55

bkn grax

Fabian dice:

28 Febbraio 2008 alle 00:54

Anybody knows how can i do a back button?

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

by:

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

Please help me to framirez(AT)gurunet.cl

Riccardo dice:

7 Marzo 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

7 Marzo 2008 alle 21:55

@riccardo
Lascia un link con la tua pagina così che si possa controllare gli errori. Senza un link nessuno potrebbe dirti in cosa sbagli. Comunque per un debug veloce e casalingo, usa la “console degli errori” di firefox.

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

1 Aprile 2008 alle 16:19

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

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

1 Aprile 2008 alle 17:13

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

2 Aprile 2008 alle 17:23

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

4 Aprile 2008 alle 04:32

4 Aprile 2008 alle 15:43

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

7 Aprile 2008 alle 12:08

tribedude dice:

7 Aprile 2008 alle 17:51

do you have an english page please?

7 Aprile 2008 alle 18:23

sorry, i haven’t a translated page. Try google translate.

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

11 Aprile 2008 alle 22:14

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

21 Aprile 2008 alle 00:48

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

29 Aprile 2008 alle 04:01

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

5 Maggio 2008 alle 20:19

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

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

14 Maggio 2008 alle 12:27

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

23 Giugno 2008 alle 22:14

[...] mooCicle - ??????? ? ???????? ??????????????. ?????? ??????? [...]

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

18 Luglio 2008 alle 15:10

The Developer Inside