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 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:

02 comments to “javascript slideShow con Scriptaculous”

  1. 01   •  El K-brito

    Hermano!! Antes que nada una felicitacion por tu blog, super bonito ojala asi pueda dejar el mio algun dia jaja.
    Oye pues aqui aparte de felicitarte invitarte a visitar el mio (que spammero me deje ver la neta) y decirte que cuando quieras nos vamos de peda hasta que el carro se apague y tengas que empujar ;)
    Abrazos

  2. 02   •  Infected-FX

    Orale!!! que bueno que ya lo liberaste bro, una pregunta cómo podría hacer que tuvieran links de “anterior” y “siguiente”? estaría chido x) por si deseas que sea el usuario que las cambie ó algo así.

    Saludos.

Register

GUEST Leave a Reply