javascript slideShow con Scriptaculous
July 27th, 2007Hace 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 |
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
