<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Commenti a: mooCicle, sample javascript gallery</title>
	<atom:link href="http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/</link>
	<description>Appunti di programmazione, grafica e pensieri</description>
	<lastBuildDate>Thu, 11 Mar 2010 16:19:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>Di: kreatiph</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-2224</link>
		<dc:creator>kreatiph</dc:creator>
		<pubDate>Sun, 07 Feb 2010 20:11:33 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-2224</guid>
		<description>Hallo,

Nice gallery. Really cool. I was wondering wether someone could tell me how to &#039;autostart&#039; the slideshow rather than having to click it?</description>
		<content:encoded><![CDATA[<p>Hallo,</p>
<p>Nice gallery. Really cool. I was wondering wether someone could tell me how to &#8216;autostart&#8217; the slideshow rather than having to click it?</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Eduardo</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-1020</link>
		<dc:creator>Eduardo</dc:creator>
		<pubDate>Mon, 29 Jun 2009 08:37:32 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-1020</guid>
		<description>good job, sybri.</description>
		<content:encoded><![CDATA[<p>good job, sybri.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: sybri</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-1018</link>
		<dc:creator>sybri</dc:creator>
		<pubDate>Sun, 28 Jun 2009 22:16:48 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-1018</guid>
		<description>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(&#039;li img&#039;);
		this.setOptions(options);
		this.moocicle.setStyles({
			&#039;margin&#039;:0,
			&#039;padding&#039;:0,
			&#039;height&#039;:images[0].getStyle(&#039;height&#039;),
			&#039;width&#039;:images[0].getStyle(&#039;width&#039;),
			&#039;list-style&#039;:&#039;none&#039;,
			&#039;display&#039;:&#039;block&#039;,
			&#039;position&#039;:&#039;relative&#039;
		});
		var listet=this.moocicle.getElements(&#039;li&#039;);
		listet.each(function(el,i){
			el.setStyles({
			&#039;top&#039;:i*10,
			&#039;left&#039;:i*10,
			&#039;position&#039;:&#039;absolute&#039;
			})
		});
		nlist=listet.length;
		var slidefxs = [];
		var slidefxs1 = [];
		var mc=this;
		listet.each(function(el, i){
			zindex++;
			el.setStyle(&#039;z-index&#039;,zindex);
			el.addEvent(&#039;click&#039;, function(e){
			
				$$(&#039;body&#039;).setStyle(&#039;overflow-x&#039;, &#039;hidden&#039;);
				/*slidefxs[i] = new Fx.Tween(el, &#039;left&#039;, {
					duration: duration,
					transition: Fx.Transitions.linear,
					wait: true
				});
				slidefxs[i].start.delay(0, slidefxs[i], (el.getStyle(&#039;width&#039;)+leftadd+(i*10)));*/
				
				var morph= new Fx.Morph(el,{
					duration: duration,
					transition: Fx.Transitions.linear,
					wait: true,
					link: &#039;chain&#039;
				});
				var myChain = new Chain();
				morph.start({
					&#039;left&#039;: el.getStyle(&#039;width&#039;)+leftadd+(i*10),
					&#039;top&#039;: topadd
				});
				mc.nextimage.pass([el, listet]).delay(duration);
				morph.start({
					&#039;left&#039;: (i*10),
					&#039;top&#039;: (i*10)
				});


				/*
				slidefxs1[i] = new Fx.Tween(el, &#039;top&#039;, {
					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, &#039;left&#039;, {
					duration: duration,
					transition: Fx.Transitions.backOut,
					wait: true
				});
				slidefxs[i].start.delay(duration, slidefxs[i], 0);
				
				slidefxs1[i] = new Fx.Tween(el, &#039;top&#039;, {
					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(&#039;z-index&#039;,((el.getStyle(&#039;z-index&#039;).toInt()-nlist)+1));
		listet.each(function(other, j){
			if (other != el){
				other.setStyle(&#039;z-index&#039;,(other.getStyle(&#039;z-index&#039;).toInt()+1));					
			}
		});
	},
	reactive: function(){
		$$(&#039;body&#039;).setStyle(&#039;overflow-x&#039;, &#039;visible&#039;);
	}

});</description>
		<content:encoded><![CDATA[<p>i make the class version for mootools 1.2:<br />
/*<br />
mooCicle<br />
Javascript image cicle slideshow<br />
*/<br />
var zindex=300;<br />
var duration=300;<br />
var topadd=40;<br />
var leftadd=20;</p>
<p>var moocicle = new Class({</p>
<p>	Implements: [Events, Options],<br />
	options: {<br />
		zindex: 300,<br />
		duration: 600,<br />
		topadd: 40,<br />
		leftadd: 20<br />
	},<br />
	initialize: function(element,options){<br />
		this.moocicle = element;<br />
		var images=this.moocicle.getElements(&#8216;li img&#8217;);<br />
		this.setOptions(options);<br />
		this.moocicle.setStyles({<br />
			&#8216;margin&#8217;:0,<br />
			&#8216;padding&#8217;:0,<br />
			&#8216;height&#8217;:images[0].getStyle(&#8216;height&#8217;),<br />
			&#8216;width&#8217;:images[0].getStyle(&#8216;width&#8217;),<br />
			&#8216;list-style&#8217;:'none&#8217;,<br />
			&#8216;display&#8217;:'block&#8217;,<br />
			&#8216;position&#8217;:'relative&#8217;<br />
		});<br />
		var listet=this.moocicle.getElements(&#8216;li&#8217;);<br />
		listet.each(function(el,i){<br />
			el.setStyles({<br />
			&#8216;top&#8217;:i*10,<br />
			&#8216;left&#8217;:i*10,<br />
			&#8216;position&#8217;:'absolute&#8217;<br />
			})<br />
		});<br />
		nlist=listet.length;<br />
		var slidefxs = [];<br />
		var slidefxs1 = [];<br />
		var mc=this;<br />
		listet.each(function(el, i){<br />
			zindex++;<br />
			el.setStyle(&#8216;z-index&#8217;,zindex);<br />
			el.addEvent(&#8216;click&#8217;, function(e){</p>
<p>				$$(&#8216;body&#8217;).setStyle(&#8216;overflow-x&#8217;, &#8216;hidden&#8217;);<br />
				/*slidefxs[i] = new Fx.Tween(el, &#8216;left&#8217;, {<br />
					duration: duration,<br />
					transition: Fx.Transitions.linear,<br />
					wait: true<br />
				});<br />
				slidefxs[i].start.delay(0, slidefxs[i], (el.getStyle(&#8216;width&#8217;)+leftadd+(i*10)));*/</p>
<p>				var morph= new Fx.Morph(el,{<br />
					duration: duration,<br />
					transition: Fx.Transitions.linear,<br />
					wait: true,<br />
					link: &#8216;chain&#8217;<br />
				});<br />
				var myChain = new Chain();<br />
				morph.start({<br />
					&#8216;left&#8217;: el.getStyle(&#8216;width&#8217;)+leftadd+(i*10),<br />
					&#8216;top&#8217;: topadd<br />
				});<br />
				mc.nextimage.pass([el, listet]).delay(duration);<br />
				morph.start({<br />
					&#8216;left&#8217;: (i*10),<br />
					&#8216;top&#8217;: (i*10)<br />
				});</p>
<p>				/*<br />
				slidefxs1[i] = new Fx.Tween(el, &#8216;top&#8217;, {<br />
					duration: duration,<br />
					transition: Fx.Transitions.linear,<br />
					wait: true<br />
				});<br />
				slidefxs1[i].start.delay(0, slidefxs1[i], topadd);</p>
<p>				moocicle.nextimage.pass([el, listet]).delay(duration);</p>
<p>				slidefxs[i] = new Fx.Tween(el, &#8216;left&#8217;, {<br />
					duration: duration,<br />
					transition: Fx.Transitions.backOut,<br />
					wait: true<br />
				});<br />
				slidefxs[i].start.delay(duration, slidefxs[i], 0);</p>
<p>				slidefxs1[i] = new Fx.Tween(el, &#8216;top&#8217;, {<br />
					duration: duration,<br />
					transition: Fx.Transitions.backOut,<br />
					wait: true<br />
				});<br />
				slidefxs1[i].start.delay(duration, slidefxs1[i], 0);<br />
				*/<br />
				mc.reactive.delay((duration*2)+1);<br />
			});	</p>
<p>		});<br />
	},<br />
	nextimage: function(el,listet){<br />
		el.setStyle(&#8216;z-index&#8217;,((el.getStyle(&#8216;z-index&#8217;).toInt()-nlist)+1));<br />
		listet.each(function(other, j){<br />
			if (other != el){<br />
				other.setStyle(&#8216;z-index&#8217;,(other.getStyle(&#8216;z-index&#8217;).toInt()+1));<br />
			}<br />
		});<br />
	},<br />
	reactive: function(){<br />
		$$(&#8216;body&#8217;).setStyle(&#8216;overflow-x&#8217;, &#8216;visible&#8217;);<br />
	}</p>
<p>});</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Muher Çoban</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-983</link>
		<dc:creator>Muher Çoban</dc:creator>
		<pubDate>Tue, 14 Apr 2009 08:37:00 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-983</guid>
		<description>Good websites :)   Perfect script !</description>
		<content:encoded><![CDATA[<p>Good websites <img src='http://www.thedeveloperinside.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />    Perfect script !</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: ?????35+ ??Javascript /Flash?? &#124; Molutran's Blog</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-968</link>
		<dc:creator>?????35+ ??Javascript /Flash?? &#124; Molutran's Blog</dc:creator>
		<pubDate>Mon, 23 Mar 2009 06:01:14 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-968</guid>
		<description>[...] mooCicle Demo [...]</description>
		<content:encoded><![CDATA[<p>[...] mooCicle Demo [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: 32 Flash ? Javascript ??????? &#124; ??????-?????? ?1.</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-966</link>
		<dc:creator>32 Flash ? Javascript ??????? &#124; ??????-?????? ?1.</dc:creator>
		<pubDate>Sun, 22 Mar 2009 15:41:09 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-966</guid>
		<description>[...] mooCicle - ??????? ? ???????? ??????????????. ?????? ??????? [...]</description>
		<content:encoded><![CDATA[<p>[...] mooCicle &#8211; ??????? ? ???????? ??????????????. ?????? ??????? [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Rakesh</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-902</link>
		<dc:creator>Rakesh</dc:creator>
		<pubDate>Sat, 14 Feb 2009 11:23:35 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-902</guid>
		<description>hi its a gr8 script.</description>
		<content:encoded><![CDATA[<p>hi its a gr8 script.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: andres</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-880</link>
		<dc:creator>andres</dc:creator>
		<pubDate>Sun, 08 Feb 2009 00:57:26 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-880</guid>
		<description>Excelente, me da muy buenas ideas con este efecto!!</description>
		<content:encoded><![CDATA[<p>Excelente, me da muy buenas ideas con este efecto!!</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: ?????&#8217;s Blog &#187; 33??????Javascript?Flash????</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-691</link>
		<dc:creator>?????&#8217;s Blog &#187; 33??????Javascript?Flash????</dc:creator>
		<pubDate>Fri, 26 Dec 2008 06:05:28 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-691</guid>
		<description>[...] mooCicle Demo [...]</description>
		<content:encoded><![CDATA[<p>[...] mooCicle Demo [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: 56 Scripts For Galleries, Slideshows and Lightboxes &#171; LanceZhang&#8217;s Blog</title>
		<link>http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/comment-page-1/#comment-549</link>
		<dc:creator>56 Scripts For Galleries, Slideshows and Lightboxes &#171; LanceZhang&#8217;s Blog</dc:creator>
		<pubDate>Mon, 03 Nov 2008 10:03:27 +0000</pubDate>
		<guid isPermaLink="false">http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/#comment-549</guid>
		<description>[...] mooCicle [...]</description>
		<content:encoded><![CDATA[<p>[...] mooCicle [...]</p>
]]></content:encoded>
	</item>
</channel>
</rss>
