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
| if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo(0.9,0);
$("#the_lights").stop().animate({
'opacity' : '0'
},800,'easeOutBack').fadeOut();
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '146px',
'height' : '81px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
/* $('.reveal-modal-bg2').css('z-index','0');
$('.reveal-modal-bg2').css('background','rgba(0,0,0,0)');
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
/* var elemZindex = divinfo.initial[$ele.index()].z-index;
*/ $ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
/* 'z-index' : elemZindex,
*/ 'opacity' : 1
},800);
});
$('#frame-bottom').css('z-index','1999');
$('#frame-top').css('z-index','1999');
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
/* 'z-index' : 999,
*/ 'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = $this.next('div').width();
/*var newheight = 679;*/
var newheight = $this.next('div').height();
var newZindex = 999;
var newleft = ((438 - newwidth) / 2);
/*alert(newleft);*/
$currentBox.stop().animate({
'top' : '-100px',
'left' : newleft,
'z-index' : newZindex,
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
} |
