Spiga.com.mx

About me...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rutrum elit et nunc. Phasellus tincidunt pede in nibh. Maecenas eget ligula non dui nonummy venenatis.Donec turpis. Sed mattis, diam quis fermentum dapibus, ante libero consequat felis, sed laoreet nibh mi in elit. Phasellus massa massa, commodo nonummy, rutrum sit amet, consequat pulvinar, eros. Nullam sit amet massa. Sed lobortis orci vehicula tellus.

In hac habitasse platea dictumst. Sed blandit diam in leo. Pellentesque sollicitudin tortor sit amet dui. Fusce vehicula purus suscipit nunc. Curabitur felis tortor, varius ac, placerat nec, vestibulum sed, est. Pellentesque fermentum. Suspendisse egestas. Nulla id mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas eu augue. Nullam eu ipsum.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac lorem ac tortor fermentum molestie. Nunc suscipit erat non mi. Nullam dui dolor, tincidunt at, venenatis ut, bibendum in, purus. Fusce pretium ullamcorper nisl.

‘ Javascript ’

javascript slideShow con Scriptaculous 2 comments Posted: 27.7.2007 | By: zetta

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:

Juego con Prototype No comments Posted: 24.7.2007 | By: zetta