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

in your opinion

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

on

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

on

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

on

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

GidanMX2

on

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

Eduardo

on

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.

GidanMX2

on

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

GidanMX2

on

ora va ok, boh oO

Eduardo

on

Ma dillo che vuoi farmi preoccupare inutilmente…

🙂

juan

on

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

Congratulations for your work.

Eduardo

on

sorry, not in this version.
🙁

juan

on

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

on

mmmm bunisimo

jjones

on

bkn grax

Fabian

on

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

on

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 🙂

Eduardo

on

@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.

tribedude

on

do you have an english page please?

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

on

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

on

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

andres

on

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

Rakesh

on

hi its a gr8 script.

Muher Çoban

on

Good websites 🙂 Perfect script !

sybri

on

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’);
}

});

Eduardo

on

good job, sybri.

kreatiph

on

Hallo,

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

jQuery????

on

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

David

on

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?

Eduardo

on

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.

David

on

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.

alfredo

on

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

  1. 1
  2. 2
  3. 3

leave one