Loading...
Archive for the ‘Javascript’ Category
  1. javascript slideShow con Scriptaculous
    July 27th, 2007 by zetta | 2 Comments »

    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. if(!Array.prototype.push){
    2. Array.prototype.push =  function(){
    3. var i;
    4. for(i=0; j=arguments[i]; i++) this[this.length] = j;
    5. return this.length;
    6. };
    7. };
    8. Effect.BlindRight = function(element) {
    9. element = $(element);
    10. element.makeClipping();
    11. return new Effect.Scale(element, 0,
    12. Object.extend({ scaleContent: true,
    13. scaleY: false,
    14. restoreAfterFinish: true,
    15. afterFinishInternal: function(effect) {
    16. effect.element.hide();
    17. effect.element.undoClipping();
    18. }
    19. }, arguments[1] || {})
    20. );
    21. };
    22. Effect.BlindLeft = function(element) {
    23. element = $(element);
    24. var elementDimensions = element.getDimensions();
    25. return new Effect.Scale(element, 100,
    26. Object.extend({ scaleContent: true,
    27. scaleY: false,
    28. scaleFrom: 0,
    29. scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    30. restoreAfterFinish: true,
    31. afterSetup: function(effect) {
    32. effect.element.makeClipping();
    33. effect.element.setStyle({width: '0px'});
    34. effect.element.show();
    35. },
    36. afterFinishInternal: function(effect) {
    37. effect.element.undoClipping();
    38. }
    39. }, arguments[1] || {})
    40. );
    41. };
    42. Effect.Jump = function(element) {
    43. element = $(element);
    44. var oldStyle = {
    45. top: element.getStyle('top'),
    46. left: element.getStyle('left') };
    47. return new Effect.Move(element,
    48. { y:  20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
    49. new Effect.Move(effect.element,
    50. { y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    51. new Effect.Move(effect.element,
    52. { y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    53. new Effect.Move(effect.element,
    54. { y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    55. new Effect.Move(effect.element,
    56. { y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    57. new Effect.Move(effect.element,
    58. { y: -20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
    59. effect.element.undoPositioned();
    60. effect.element.setStyle(oldStyle);
    61. }}) }}) }}) }}) }}) }});
    62. };
    63. Object.extend(Element, {
    64. getWidth: function(element) {
    65. element = $(element);
    66. return element.offsetWidth;
    67. },
    68. setWidth: function(element,w) {
    69. element = $(element);
    70. element.style.width = w +"px";
    71. },
    72. setHeight: function(element,h) {
    73. element = $(element);
    74. element.style.height = h +"px";
    75. },
    76. setTop: function(element,t) {
    77. element = $(element);
    78. element.style.top = t +"px";
    79. },
    80. setSrc: function(element,src) {
    81. element = $(element);
    82. element.src = src;
    83. },
    84. setHref: function(element,href) {
    85. element = $(element);
    86. element.href = href;
    87. },
    88. setInnerHTML: function(element,content) {
    89. element = $(element);
    90. element.innerHTML = content;
    91. }
    92. });
    93.  
    94. var zetta = {
    95. identifier : {},
    96. type : {},
    97. inplaced : Array(),
    98. load : function(){
    99. imagenes = document.getElementsByTagName('img');
    100. for (var a = 0; (elemento = imagenes[a]); a++) {
    101. if (elemento.className.match("transition")){
    102. var settings = elemento.className;
    103. elemento.setAttribute("settings",settings);
    104. elemento.className = null;
    105. dupNode = elemento.cloneNode(true);
    106. padre = elemento.parentNode;
    107. var tDiv = document.createElement("div");
    108. tDiv.appendChild(dupNode);
    109. padre.replaceChild(tDiv, elemento);
    110. tDiv.setAttribute("width",dupNode.getAttribute("width"));
    111. tDiv.setAttribute("height",dupNode.getAttribute("height"));
    112. tDiv.style.display = "inline";
    113. //alert(settings);
    114. //var time = settings.split("_");
    115. //time = time[4];
    116. setTimeout("zetta.transition('"+dupNode.id+"');",(( time = settings.split("_")[4] )*1000)+(a*132));
    117. }
    118. }
    119. },
    120. transition : function(target){
    121. to = document.getElementById(target);
    122. if(to == null)
    123. return false;
    124. target = ($(target));
    125. var u = 'transition/transition.php?target=' + target.id + "&url=" + target.src.replace('http://','') + "&settings=" + target.getAttribute("settings");
    126. uno = new  Ajax.Request( u ,{ onComplete : function (){ eval(uno.transport.responseText); } })
    127. },
    128. _transition : function(element,img,effect,time){
    129. var daTime = time
    130. var daEffect = effect
    131. imgPreloader = new Image();
    132. imgPreloader.onload=function(){
    133. var ran =  Math.round(3*Math.random());
    134. i = (daEffect == "jump") ? 0 :( (daEffect == "shake") ? 1 :( (daEffect == "pulsate") ? 2 :( (daEffect == "fade") ? 3 :( ran ) ) ) );
    135. switch (i){
    136. case 0:
    137. Effect.Jump(element);
    138. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
    139. break;
    140. case 1:
    141. Effect.Shake(element);
    142. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
    143. break;
    144. case 2:
    145. Effect.Pulsate(element, {duration : 1.0});
    146. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1000);
    147. break;
    148. default:
    149. Effect.Fade(element);
    150. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1200);
    151. setTimeout("zetta._conditional('"+element+"',\"Effect.Appear('"+element+"');\");",1215);
    152. }
    153. setTimeout("zetta._conditional('"+element+"',\"zetta.transition('"+element+"');\");",(time*1172));
    154. }
    155. imgPreloader.src = img;
    156. },
    157. _conditional : function(target,code){
    158. to = document.getElementById(target);
    159. if(to == null)
    160. return false;
    161. eval(code);
    162. }
    163. };
    164. window.onload = zetta.load;

    y un php:

    1. function ext($file_name){
    2. ereg("(.+)\.(.+)", basename($file_name), $regs);
    3. return strtolower($regs[2]);
    4. }
    5. if($_GET['target'] and $_GET['settings'] and $_GET['url']){
    6.  
    7. $var = explode("_", $_GET['settings']);
    8. $im = array();
    9. if ($gestor = opendir("{$var[1]}/")) {
    10. while (false !== ($archivo = readdir($gestor))) {
    11. if ($archivo != "." && $archivo != ".." and ( ext($archivo) == "png" or ext($archivo) == "jpg" or ext($archivo) == "gif")) {
    12. $im[] = rawurlencode($archivo);
    13. }
    14. }
    15. closedir($gestor);
    16. }
    17. $ims = array_merge($im,$im);
    18.  
    19. if($var[2] == "random"){
    20. shuffle($im);
    21. $d = current($im);
    22. }else{
    23. $oldFile = explode("/", $_GET['url']);
    24. $oldFile = $oldFile[count($oldFile)-1];
    25. for($i=0; $i
    26. if($ims[$i] == $oldFile){
    27. $d = $ims[$i+1];
    28. break;
    29. }
    30. }
    31.  
    32. }
    33.  
    34. $img = "transition/{$var[1]}/{$d}";
    35. echo  "zetta._transition('{$_GET['target']}','{$img}','{$var[3]}',{$var[4]})";
    36.  
    37. }
    38. ?>

    Para utilizar en tu header coloca esto

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

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

    1. <img id="h1D7ugF5RL" class="transition_stewie_linear_random_2" src="transition/stewie/st1.jpg" alt="Demo Imagen" width="150" height="170" />
    2.  
    3. class="transition_[folder]_[mode]_[effect]_[wait]"
    4.  
    5. folder:String    // folder donde estan las imagenes
    6.  
    7. mode:String      // modo de busqueda de las imagenes
    8. random
    9. linear
    10.  
    11. effect:String   // efecto al hacer la transicion
    12. jump
    13. shake
    14. pulsate
    15. fade
    16. random
    17.  
    18. 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


    Tags:
  2. Juego con Prototype
    July 24th, 2007 by zetta | No Comments »

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

    brickslayer.png

    Tags: , , , , , ,
   

Powered by ExtJS Theme flavored Wordpress.