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: