Foros del Web » Programando para Internet » Javascript » Frameworks JS »

iframe con funcybox

Estas en el tema de iframe con funcybox en el foro de Frameworks JS en Foros del Web. Tengo una funcion iframe para abrir una pagina. ¿Como puedo hacer para que mientras abra la pagina salga el icono que da vuentas indicando que ...
  #1 (permalink)  
Antiguo 19/05/2010, 05:49
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
iframe con funcybox

Tengo una funcion iframe para abrir una pagina.
¿Como puedo hacer para que mientras abra la pagina salga el icono que da vuentas indicando que se esta cargando?
Es una cosa parecida a cuando se carga una foto con las funciones funcybox, que aparece un circulito que gira en el centro de la ventana hasta que aparece la foto.

Esta es la funcion:

$("a.ventana").fancybox({
'width' : '75%',
'height' : '75%',
'titleShow' : false,
'onClosed' : true,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
  #2 (permalink)  
Antiguo 21/05/2010, 00:00
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: iframe con funcybox

le puedes pasar el parametro " onStart "

ó

$.fancybox.showActivity -> Shows loading animation


Puedes leer la documentacion


Así debería funcionar:
Código Javascript:
Ver original
  1. $("a.ventana").click(function(){
  2.  
  3.   $.fancybox.showActivity();
  4.  
  5.   $.fancybox({
  6.   'width' : '75%',
  7.   'height' : '75%',
  8.   'titleShow' : false,
  9.   'onClosed' : true,
  10.   'autoScale' : false,
  11.   'transitionIn' : 'none',
  12.   'transitionOut' : 'none',
  13.   'type' : 'iframe'
  14.   });
  15.  
  16.   return false;
  17.  
  18. });

Última edición por kokoou; 21/05/2010 a las 00:06
  #3 (permalink)  
Antiguo 21/05/2010, 03:29
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

Hola kokoou la unica forma que aparzca el circulito redondo que esfectivamente es lo que quiero es de esta forma, pero la pagina no se abre dentro del iframe, sino en una nueva ventana.
He hecho prueba y pruebas y no veo la forma de enlazar el codigo que me has puesto, para que aparzca dentro del iframe.
Muchas gracias por el enlace.
A ver si es que algo algo mal.
Código Javascript:
Ver original
  1. $("a.ventana").click(function(){  
  2. $.fancybox.showActivity();  
  3. });    
  4. return false;
  5. $.fancybox({  
  6. 'width' : '75%',  
  7. 'height' : '75%',  
  8. 'titleShow' : false,  
  9. 'onClosed' : true,  
  10. 'autoScale' : false,  
  11. 'transitionIn' : 'none',  
  12. 'transitionOut' : 'none',  
  13. 'type' : 'iframe'  
  14. });
Esto si me funciona pero no sales el circulito y la llamada a la funcion ventana la hago con el <a href id="ventana">prueba</a>
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").fancybox({
  3. 'width'         : '75%',
  4. 'height'            : '95%',
  5. 'autoScale'     : false,
  6. 'transitionIn'      : 'none',
  7. 'transitionOut'     : 'none',
  8. 'type'          : 'iframe'
  9. });
  10. });

Última edición por corretodo; 21/05/2010 a las 12:18
  #4 (permalink)  
Antiguo 24/05/2010, 12:09
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

Por lo que veo, al no tener respuesta, es que no se puede hacer lo que he pedido de ayuda.
Yo lo he intentado haciendo muchas pruebas y mirando mucho en Google y no he visto nada a cerca de la ayuda que he solicitado.
Si he visto que la version 1.2.3, si que lo hace pero utilizando withframe y el heightframe, pero el problema que tiene esa verion es que no te deja abrir el iframe mas de 512 * 600, aun poniendole una numeracion superior no hace caso y abre el iframe a 512*600.

La funcion showActivity() anula el circulito temporizador de precarga cuando utilizas el tipo iframe.

Sabeis si hay alguna documentacion mas amplia que la que hay en la pagina de fancybox.
  #5 (permalink)  
Antiguo 27/05/2010, 05:58
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: iframe con funcybox

Te vuelvo a poner el código, lee los comentarios y fijae lo que hace cada línea. Funciona de 10.

Código Javascript:
Ver original
  1. $("a.ventana").click(function(){  
  2.  
  3. // inicio el gif de cargandooo !!
  4. $.fancybox.showActivity();
  5.  
  6. // defino los parametros del fancybox
  7. parametros = "width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";
  8.  
  9. // ejecuto el lightbox a cuando pasen 2000 mili segundos
  10. setTimeout('$.fancybox({'+ parametros +'});','2000');
  11.  
  12. });
  #6 (permalink)  
Antiguo 27/05/2010, 09:13
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

Hola kokoou, bueno me lo has puesto de otra manera, con un temporizador.
Muchas gracias por tu interes, yo trabajo con Internet Exolores 8 y la mayoria de mis visitantes lo hacen con el mismo navegador.
Cuando tu lo has puesto seguro que funciona, pero a mi no.
Efectivamente con el nuevo codigo sale el gif de la precarga pero la pagina no se abre dentro del iframe, si no el una nueva ventana.
Intentare con el nuevo codigo que me has puesto, hacer pruebas a ver si doy con el fallo.
Esto es lo que yo he puesto

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").click(function(){   // inicio el gif de cargandooo !!
  3. $.fancybox.showActivity();  // defino los parametros del fancybox
  4. parametros = "width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";  
  5. // ejecuto el lightbox a cuando pasen 2000 milisegundos
  6. setTimeout('$.fancybox({'+ parametros +'});','1000');
  7. });
  8. });

Muchas gracias por los comentarios, de esta manera aprendemos mas los que no sabemos.

Saludos
  #7 (permalink)  
Antiguo 27/05/2010, 10:57
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: iframe con funcybox

a mi me funciona en IE 6,7 y 8.

Te la abre en otra página porque me olvide de ponerte el "return false"

Que va aquí:

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").click(function(){   // inicio el gif de cargandooo !!
  3. $.fancybox.showActivity();  // defino los parametros del fancybox
  4. parametros = "width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";  
  5. // ejecuto el lightbox a cuando pasen 2000 milisegundos
  6. setTimeout('$.fancybox({'+ parametros +'});','1000');
  7. // evito que se ejecuta la redireccion del tag a
  8. return false;
  9. });
  10. });
  #8 (permalink)  
Antiguo 27/05/2010, 11:14
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

Ya funciona pero con la ventana vacia. error 404
La forma de llamar a la funcion es asi como lo hago.
Código PHP:
<ul>
<
li><class="ventana" href="http://www.google.es/">Google</a></li>
</
ul
Ya con algo mas que me digas lo termino, jejeje..!
Que bueno que me va a funcinar.
Esto es lo que tu me has puesto.
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").click(function(){  
  3. // inicio el gif de cargandooo !!
  4. $.fancybox.showActivity();  
  5. // defino los parametros del fancybox
  6. parametros = "width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";  
  7. // ejecuto el lightbox a cuando pasen 2000 milisegundos
  8. setTimeout('$.fancybox({'+ parametros +'});','1000');
  9. // evito que se ejecuta la redireccion del tag a
  10. return false;
  11. });
  12. });
  #9 (permalink)  
Antiguo 28/05/2010, 05:59
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: iframe con funcybox

Aparentemente no está tomando la url del tag, así que se lo puedes pasar vos de esta manera:

Código Javascript:
Ver original
  1. parametros = "href: $(this).attr('href'), width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";

Es decir, que le pasas al parametro "href" del fancybox el valor del atributo href del tag 'a.ventana' de esta manera:
Código Javascript:
Ver original
  1. href: $(this).attr('href')
  #10 (permalink)  
Antiguo 28/05/2010, 07:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

No te molesto mas, asi que lo dejo sin la precarga.
Esta ultima solucion tampoco funciona.
En el iframe da error 404. No encuentra la pagina.
LLevo varios dias buscado en Google la forma de hacer la precarga de iframes con la ultima version del fancybox y no hay nada de nada.
Asi que debe ser muy complicado y es que yo no se nada de javascript.
Solo hago pruebas de quitar y poner de un lado para otro, sin ningun sentido a ver si acierto.

Asi es como he dejado la funcion tal como me has indicado, pero que sigue sin funcionar.

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").click(function(){  
  3. // inicio el gif de cargandooo !!
  4. $.fancybox.showActivity();  
  5. // defino los parametros del fancybox
  6. parametros = "href: $(this).attr('href'), width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";
  7. // ejecuto el lightbox a cuando pasen 1000 milisegundos
  8. setTimeout('$.fancybox({'+ parametros +'});','1000');
  9. // evito que se ejecuta la redireccion del tag a
  10. return false;
  11. });
  12. });

y asi la llamada
Código HTML:
Ver original
  1. <ul>
  2. <li><a class="ventana" href="http://www.google.es/">Google</a></li>
  3. </ul>

De esta forma si funciona pero sin la precarga
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $('a.ventana').fancybox({
  3. 'width' : '75%',
  4. 'height' : '97%',
  5. 'autoScale' : false,
  6. 'transitionIn' : 'none',
  7. 'transitionOut' : 'none',
  8. 'type' : 'iframe'
  9. });
  10. });
Muchas gracias por tu interes.
Saludos

Última edición por corretodo; 28/05/2010 a las 08:12
  #11 (permalink)  
Antiguo 31/05/2010, 06:46
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: iframe con funcybox

proba cambiando esto:

Código Javascript:
Ver original
  1. parametros = "href: $(this).attr('href'), width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";

por:


Código Javascript:
Ver original
  1. parametros = "href: this.href, width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";
  #12 (permalink)  
Antiguo 31/05/2010, 10:44
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: iframe con funcybox

Amigo kokoou siento decirte que no funciona con lo nuevo que me has puesto.
Se ve el icono de la pregarga y al abrir el iframe no encuentra la pagina error 404.

Ahora queda en codigo con todo lo que me has dicho asi:

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $("a.ventana").click(function(){  
  3. // inicio el gif de cargandooo !!
  4. $.fancybox.showActivity();  
  5. // defino los parametros del fancybox
  6. parametros = "href: this.href, width : '75%',height:'75%',titleShow:'false',onClosed: true,autoScale:'false',transitionIn:'none',transitionOut:'none',type: 'iframe'";
  7. setTimeout('$.fancybox({'+ parametros +'});','1000');
  8. // evito que se ejecuta la redireccion del tag a
  9. return false;
  10. });
  11. });

De esta forma tambien funciona pero sin la precarga.

Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox.showActivity();  // Aqui la precarga pero no sale
  4. $.fancybox({
  5. 'width'         : '75%',               
  6. 'height'        : '97%',               
  7. 'autoScale'     : false,               
  8. 'transitionIn'  : 'none',              
  9. 'transitionOut' : 'none',                          
  10. 'href'          : $(this).attr('href'),
  11. 'type'          : 'iframe'
  12. });
  13. return false;
  14. });
  15. });

Y esto otro tambien pero sin la precarga.

Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox.showActivity();  // Aqui la precarga pero no sale
  4. $.fancybox({
  5. 'width'         : '75%',               
  6. 'height'        : '97%',               
  7. 'autoScale'     : false,               
  8. 'transitionIn'  : 'none',              
  9. 'transitionOut' : 'none',                          
  10. 'href'          : this.href,
  11. 'type'          : 'iframe'
  12. });
  13. return false;
  14. });
  15. });

Si se pudiera hacer algo en javascript despues de la linea 3 para que permaneciera un segundo.
Haciendo la precarga de la funcion $.fancybox.showActivity();
Y que luego continue ejecutando el siguiente proceso, pienso que funcionaria.
Yo he puesto esto como una idea, funciona pero habre la pagina de Google en una nueva ventana y no en el Iframe

Código Javascript:
Ver original
  1. function pause(milisegundos)
  2. {
  3. var date = new Date();
  4. var curDate = null;
  5. do { curDate = new Date(); }
  6. while(curDate-date < milidegundos);
  7. }
  8. // fin de la funcion pausa
  9. $(document).ready(function() { 
  10. $('a.ventana').click(function(){
  11. $.fancybox.showActivity();
  12. pause(1000);  // aqui hago que espere 1 segundo. Esto funciona pero se abre la pagina fuera de Iframe
  13. $.fancybox({
  14. 'width'         : '75%',               
  15. 'height'        : '97%',               
  16. 'autoScale'     : false,               
  17. 'transitionIn'  : 'none',              
  18. 'transitionOut' : 'none',                          
  19. 'href'          : this.href,
  20. 'type'          : 'iframe'
  21. });
  22. return false;
  23. });
  24. });

Última edición por corretodo; 31/05/2010 a las 11:35

Etiquetas: iframe
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:06.