Sustituir un SWF por otro sin refrescar el HTML con Ajax
En este sencillo ejemplo mostraré como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)
Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax
Para empezar nos descargaremos las librerias:
- http://code.google.com/p/swfobject/downloads/list
- http://docs.jquery.com/Downloading_jQuery#Download_jQuery
.
Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y asignandole ahí la pelicula SWF. Lo haremos creando una función que reciba el parámetro de la URL del SWF para poder volver a llamar esa función más adelante:
- <script src="swfobject.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
- function putSWF(swf){
- swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
- };
- putSWF("a.swf");
- // ]]></script>
Ahora crearemos unos cuantos links con los que queremos cambiar de pelicula SWF pero sin cambiar de página HTML. Los colocaremos en otro DIV y asignaremos a cada enlace un ID diferente:
- <div id="botonera">
- <a id="a" href="#">a.swf</a>
- - <a id="b" href="#">b.swf</a>
- - <a id="c" href="#">c.swf</a></div>
Podríamos hacer que cada enlace volviera a ejecutar la función Javascript y listo, pero haremos el ejemplo más c00l utilizando JQuery.
Primero definiremos un objeto en el que guardaremos una relación entre los ID de los enlaces y la pelicula SWF que han de abrir.
- var swfRef = {
- a: "a.swf",
- b: "b.swf",
- c: "c.swf"
- };
Y por último crearemos una función de JQuery que asignará a cada enlace la llamada a la función Javascript pasandole el parámetro que toca. Tambien sustituiremos la primera llamada.
- $(function(){
- $.each(swfRef, function(i, val){
- $("#" + i).click(function(){
- putSWF(val);
- });
- });
- $("#a").click();
- });
Y listo, ahora cada enlace sustituye el SWF por otro dentro de la misma página.
Aqui se puede ver el ejemplo: http://www.cristalab.com/zguillez/ajax/putswf/index.html
Y el código completo:
- <html>
- <head>
- <script type="text/javascript" src="swfobject.js"></script>
- <script src="lib/jquery/jquery-1.3.2.js"></script>
- <script>
- function putSWF(swf){
- swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
- };
- var swfRef = {
- a: "a.swf",
- b: "b.swf",
- c: "c.swf"
- };
- $(function(){
- $.each(swfRef, function(i, val){
- $("#" + i).click(function(){
- putSWF(val);
- });
- });
- $("#a").click();
- });
- </script>
- </head>
- <body>
- <div id="botonera">
- <p>
- <a id="a" href="#">a.swf</a>
- - <a id="b" href="#">b.swf</a>
- - <a id="c" href="#">c.swf</a>
- </p>
- </div>
- <div id="flash"></div>
- </body>
- </html>
Compártelo:
Visto 10.302 veces
Utilizando algo similar a tu codigo como puedo hacer que el boton entrar de mi pagina llame otro swf en la misma index html
Hola, buen tip, aplicando un efecto fadeout o fadein desde jquery has detectado un bug en jquery ? Lo has solventado ?
Saludos
muy buen aporte… pero surgen problemas.
si me descargo la web de ejemplo y sustituyo los swf por los mios perfecto, pero el problema biene cuando lo intento poner en mi web, pues no hay manera de que se abran los swf, aqui dejo el codigo por si algun alma caritativa pudiera solventarlo, gracias.
J. Alexander
function putSWF(swf){
swfobject.embedSWF(swf, “flash”, “320”, “240”, “10.0.0”, “expressInstall.swf”);
};
putSWF(“a.swf”);
var swfRef = {
a: “a.swf”,
b: “galmodel.swf”,
c: “gal3d.swf”
};
$(function(){
$.each(swfRef, function(i, val){
$(“#” + i).click(function(){
putSWF(val);
});
});
$(“#a”).click();
});
de que manera, puedo lograr que los swf se cambien con un onMouseOver y un onMouseOut
Si, alguien tiene la respuesta, quedo muy agradecido por faa…