Juan Carlos Clemente
1986-06-13
zetta
Website Photo
zetta

javascript slideShow con Scriptaculous

July 27th, 2007

Hace tiempo que hice un script con script.aculo.us y php para crear un SlideShow

Aqui puedes ver el Demo

Ademáas del framework de scriptaculous necesitamos este codigo

zetta.js

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
if(!Array.prototype.push){
Array.prototype.push =  function(){
var i;
for(i=0; j=arguments[i]; i++) this[this.length] = j;
return this.length;
};
};
Effect.BlindRight = function(element) {
element = $(element);
element.makeClipping();
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: true,
scaleY: false,
restoreAfterFinish: true,
afterFinishInternal: function(effect) {
effect.element.hide();
effect.element.undoClipping();
}
}, arguments[1] || {})
);
};
Effect.BlindLeft = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
return new Effect.Scale(element, 100,
Object.extend({ scaleContent: true,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping();
effect.element.setStyle({width: '0px'});
effect.element.show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
}
}, arguments[1] || {})
);
};
Effect.Jump = function(element) {
element = $(element);
var oldStyle = {
top: element.getStyle('top'),
left: element.getStyle('left') };
return new Effect.Move(element,
{ y:  20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
effect.element.undoPositioned();
effect.element.setStyle(oldStyle);
}}) }}) }}) }}) }}) }});
};
Object.extend(Element, {
getWidth: function(element) {
element = $(element);
return element.offsetWidth;
},
setWidth: function(element,w) {
element = $(element);
element.style.width = w +"px";
},
setHeight: function(element,h) {
element = $(element);
element.style.height = h +"px";
},
setTop: function(element,t) {
element = $(element);
element.style.top = t +"px";
},
setSrc: function(element,src) {
element = $(element);
element.src = src;
},
setHref: function(element,href) {
element = $(element);
element.href = href;
},
setInnerHTML: function(element,content) {
element = $(element);
element.innerHTML = content;
}
});

var zetta = {
identifier : {},
type : {},
inplaced : Array(),
load : function(){
imagenes = document.getElementsByTagName('img');
for (var a = 0; (elemento = imagenes[a]); a++) {
if (elemento.className.match("transition")){
var settings = elemento.className;
elemento.setAttribute("settings",settings);
elemento.className = null;
dupNode = elemento.cloneNode(true);
padre = elemento.parentNode;
var tDiv = document.createElement("div");
tDiv.appendChild(dupNode);
padre.replaceChild(tDiv, elemento);
tDiv.setAttribute("width",dupNode.getAttribute("width"));
tDiv.setAttribute("height",dupNode.getAttribute("height"));
tDiv.style.display = "inline";
//alert(settings);
//var time = settings.split("_");
//time = time[4];
setTimeout("zetta.transition('"+dupNode.id+"');",(( time = settings.split("_")[4] )*1000)+(a*132));
}
}
},
transition : function(target){
to = document.getElementById(target);
if(to == null)
return false;
target = ($(target));
var u = 'transition/transition.php?target=' + target.id + "&url=" + target.src.replace('http://','') + "&settings=" + target.getAttribute("settings");
uno = new  Ajax.Request( u ,{ onComplete : function (){ eval(uno.transport.responseText); } })
},
_transition : function(element,img,effect,time){
var daTime = time
var daEffect = effect
imgPreloader = new Image();
imgPreloader.onload=function(){
var ran =  Math.round(3*Math.random());
i = (daEffect == "jump") ? 0 :( (daEffect == "shake") ? 1 :( (daEffect == "pulsate") ? 2 :( (daEffect == "fade") ? 3 :( ran ) ) ) );
switch (i){
case 0:
Effect.Jump(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
break;
case 1:
Effect.Shake(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
break;
case 2:
Effect.Pulsate(element, {duration : 1.0});
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1000);
break;
default:
Effect.Fade(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1200);
setTimeout("zetta._conditional('"+element+"',\"Effect.Appear('"+element+"');\");",1215);
}
setTimeout("zetta._conditional('"+element+"',\"zetta.transition('"+element+"');\");",(time*1172));
}
imgPreloader.src = img;
},
_conditional : function(target,code){
to = document.getElementById(target);
if(to == null)
return false;
eval(code);
}
};
window.onload = zetta.load;

y un php:

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
function ext($file_name){
ereg("(.+)\.(.+)", basename($file_name), $regs);
return strtolower($regs[2]);
}
if($_GET['target'] and $_GET['settings'] and $_GET['url']){

$var = explode("_", $_GET['settings']);
$im = array();
if ($gestor = opendir("{$var[1]}/")) {
while (false !== ($archivo = readdir($gestor))) {
if ($archivo != "." && $archivo != ".." and ( ext($archivo) == "png" or ext($archivo) == "jpg" or ext($archivo) == "gif")) {
$im[] = rawurlencode($archivo);
}
}
closedir($gestor);
}
$ims = array_merge($im,$im);

if($var[2] == "random"){
shuffle($im);
$d = current($im);
}else{
$oldFile = explode("/", $_GET['url']);
$oldFile = $oldFile[count($oldFile)-1];
for($i=0; $i
if($ims[$i] == $oldFile){
$d = $ims[$i+1];
break;
}
}

}

$img = "transition/{$var[1]}/{$d}";
echo  "zetta._transition('{$_GET['target']}','{$img}','{$var[3]}',{$var[4]})";

}
?>

Para utilizar en tu header coloca esto

1
2
<script src="js/prototype.js" type="text/javascript"></script>
 <script src="js/scriptaculous.js" type="text/javascript"></script>

y para mandar llamar solo pon una imagen con clase (class) “transition_
Ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<img id="h1D7ugF5RL" class="transition_stewie_linear_random_2" src="transition/stewie/st1.jpg" alt="Demo Imagen" width="150" height="170" />

class="transition_[folder]_[mode]_[effect]_[wait]"

folder:String    // folder donde estan las imagenes

mode:String      // modo de busqueda de las imagenes
random
linear

effect:String   // efecto al hacer la transicion
jump
shake
pulsate
fade
random

wait:Number     //tiempo de espera entre los cambios en segundos

A mi se me hace que pesa mucho, pero espero pronto hacer una version mas ligera con mootols

Descargar transition.zip

Juego con Prototype

July 24th, 2007

Michal Wallace escribió un tutorial paso a paso de como crear un juego con el famoso framework Prototype

brickslayer.png