Hello,

I’m just finishing our new website and i’ve been posting here the effects i’ve created for it.
This one is a little more “show off”;
It’s the way we’ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images.
You can check how it works here.

Using this html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div>	
	<div id="kwicks_pics">
		<a href="http://4hsa.pt" class="kwicks_pic">
		    <img src="images/portfolio/4hsa_big.png"/>
		  </a>
			<a href="http://techtrouts.com" class="kwicks_pic">
		    <img src="images/portfolio/techtrouts_big.png"/>
		  </a>
			<a href="http://webandcookies.com" class="kwicks_pic">
		    <img src="images/portfolio/wac_big.png"/>
		  </a>
	</div>
	<div id="kwicks">
	  <a href="http://4hsa.pt" rel="image" class="kwick">
	    <img src="images/portfolio/4hsa1.png" title="4HSA - Qualidade e Seguran&ccedil;a Alimentar" alt="4HSA - Qualidade e Seguran&ccedil;a Alimentar"/>
	  </a>
		<a href="http://techtrouts.com" class="kwick">
	    <img src="images/portfolio/techtrouts1.png"/>
	  </a>
		<a href="http://webandcookies.com" class="kwick">
	    <img src="images/portfolio/webandcookies1.png"/>
	  </a>
	</div>
</div>

This css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#kwicks_pics {
	visibility:hidden;
	clear:both;
	width:880px;
	height:300px;
	text-align:center;
}
#kwicks_pics .kwicks_pic {
	display: block;
	background:none;
	border:none;
}
#kwicks {
	clear:both;
	width:auto;
	height:180px;
}
#kwicks .kwick {
	float:left;
	/*width should be the same as javascript's var szNormal*/
	width: 55px;
	background:none;
	border:none;
}

And this Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

window.addEvent('domready', function(){
 
	var sequential = false; //changed to true requires to pass every intermediate image on slide
	var szNormal = 55; //should be the same as css #kwicks .kwick{width}
	var szSmall  = 50, szFull = 250, selected=0;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 350, transition: Fx.Transitions.Back.easeOut});
	var kwickspics=$$("#kwicks_pics .kwicks_pic");
 
	var kwickspics_obj={
		movingTo:(kwickspics.length-1),
		selected:(kwickspics.length-1),
		next_i:false,
		checking:false,
		on_move:false,
		wait_delay_move:false,
		the_fxs:[],
		init:function(){
			kwickspics.each(function(kwickspic, i){
				kwickspics_obj.the_fxs[i]=new Fx.Slide(kwickspic, {
					duration: 200,
					//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/
					onComplete:function(){
					if(kwickspics_obj.wait_delay_move){
						kwickspics_obj.wait_delay_move=false;
						setTimeout(kwickspics_obj.checkStep,100);
						return;
					}
					if(kwickspics_obj.next_i!==false){
						kwickspics_obj.wait_delay_move=true;
						kwickspics_obj.the_fxs[kwickspics_obj.next_i].slideIn();
						kwickspics_obj.selected=kwickspics_obj.next_i;
						kwickspics_obj.on_move=false;
					}
				}});
				kwickspics_obj.the_fxs[i].hide();
			});
			$('kwicks_pics').style.visibility='visible';
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideIn();
		},
		moveTo:function(i){
			kwickspics_obj.movingTo=i;
			if(!kwickspics_obj.checking) kwickspics_obj.checkStep();
		},
		checkStep:function(){
			if(kwickspics_obj.on_move || kwickspics_obj.movingTo==kwickspics_obj.selected) {
				kwickspics_obj.checking=false;
				return;
			}
			kwickspics_obj.checking=true;
			kwickspics_obj.on_move=true;
 
			if(sequential){
				//requires to pass every image
				kwickspics_obj.next_i = kwickspics_obj.selected&gt;kwickspics_obj.movingTo ?  kwickspics_obj.selected-1 : kwickspics_obj.selected+1;
				//go directly to final image
			} else kwickspics_obj.next_i=kwickspics_obj.movingTo;
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideOut();
			return;
		}
 
	}
	kwickspics_obj.init();	
 
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
			kwickspics_obj.moveTo(i);
		});
	});
 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	});
});

Hope you’ll put it to good work ;)

[del.icio.us] [Digg] [Facebook] [Ma.gnolia]
Posted in development, how-tos, javascript, mootools |

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.