javascript - example - FancyBox regresando "El contenido solicitado no se puede cargar. Por favor, inténtelo de nuevo más tarde. "Con enlace
fancybox open (10)
Acabo de encontrarme con este problema también.
Como resultado, la url href es EXTRA a mayúsculas y minúsculas. (si eso es posible)
Independientemente del doble, revise tres veces sus URL href para asegurarse de que tiene el caso exactamente correcto.
Estoy usando Fancybox para mostrar contenido en línea (un div con una imagen vinculada a una nueva página). El div y la imagen se muestran bien en el modal, pero cuando se hace clic en la imagen para ir a la nueva página, aparece "El contenido solicitado no se puede cargar. Inténtelo de nuevo más tarde". error.
El javascript FancyBox es el siguiente:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
Y se aplica al siguiente clip de HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p><a href="http://website.com/template/view/18">1G2A</a></p>
<div style="display: none;"><div id="hover-image_0"><a href="http://website.com/template/view/18"><img src="http://website.com/file/id:64/ext:.png" class="img" /></a></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p><a href="http://website.com/template/view/17">17</a></p>
<div style="display: none;"><div id="hover-image_1"><a href="http://website.com/template/view/17"><img src="http://website.com/file/id:61/ext:.png" class="img" /></a></div></div>
</li>
¿Alguien ve lo que podría estar causando el problema o lo que necesito corregir?
¡Gracias!
Actualización: 19 de enero de 2012 : realicé la misma prueba en mi servidor que la primera respuesta ( http://estorkdelivery.com/example/example.html ) y descubrí que obtuve la misma respuesta. Así que parece que es algo con mi servidor.
Todavía necesito ayuda con este problema. ¿Alguien tiene alguna idea?
¡Gracias!
Actualización: 28/01/2012 - He estado trabajando para encontrar una solución para este problema, pero me he quedado sin tiempo y he optado por una solución completamente diferente. Mantengo este problema abierto en caso de que alguien más se encuentre con el mismo error o finalmente encuentre una solución. ¡Gracias!
Acabo de recrear su prueba en mi máquina local y funciona bien para mí (lo ejecuté desde la carpeta de demostración de la instalación de FancyBox):
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
<a href="http://www.yahoo.com">Go to Yahoo</a></p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
<a href="http://www.google.com">Go to Google</a></p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
Creo que he descubierto qué está causando este problema, al menos para mí.
El problema parece ocurrir cuando tienes una clase en uno de tus elementos que es la misma que la clase emergente.
Por ejemplo:
<a class="popup" href="#">Open the popup</a>
Y tienes algo en tu ventana emergente con el mismo nombre de clase, por ejemplo:
<div class="popup">some text</div>
Obtendrás el error. Intente cambiar la clase div a algo como popup-window , que debería corregir su error
En su página de ejemplo, funciona para mí si no hago clic. Cuando haces clic, ¿a qué página se debe llevar? ¿Quieres que vaya solo a la siguiente imagen?
En mi preferencia personal, no me preocupo por la activación en el hover. Se vuelve realmente confuso, especialmente cuando la mayoría de la gente hace clic de forma instintiva en una imagen. Pero en su caso, se abre al pasar el mouse, luego se hace clic de forma instintiva y luego aparece el error.
¿Obtiene este mismo error cuando está usando la funcionalidad como se aplica normalmente?
Si lo desea, intente dar a cada imagen una instancia de nombre de galería como: rel="gallery" y ver qué sucede. Debería hacer que las flechas siguiente / anterior se muestren y funcionen como cabría esperar.
Pero honestamente, me gustaría deshacerme de la funcionalidad de hover por completo. O al menos deshazte del mouseout () Esa es probablemente la parte más molesta.
Solo usa esto para llamar a las acciones de fancybox:
$("a[rel=gallery]").fancybox();
De esa manera, puede deshacerse de todas aquellas clases que probablemente estén causando los problemas.
Espero que eso ayude.
Estaba comprobando todas las posibilidades y me encontré con el problema de la sensibilidad de mayúsculas EXTRA como mencionó @BrettBumeter. De hecho, es "muy sensible a las mayúsculas y minúsculas", tuve que volver a escribir la ruta URL (href) de mis imágenes desde * .jpg a * .JPG (o cualquiera que sea la extensión del tipo de archivo). Al alterar esto se solucionó mi problema.
No aplique la clase fancybox a su elemento LI, hágalo a su elemento A.
Si algunas de las imágenes se muestran y otras no, aunque el marcado sea idéntico, verifique esto:
- Intente en minúsculas todas las letras en el nombre de archivo y en el html. Fancybox parece ser bastante sensible a las mayúsculas y minúsculas.
- Compruebe si la imagen tiene todos los permisos permitidos. Noté que mis imágenes no funcionaban correctamente en el móvil porque en mi computadora, el permiso de todos estaba configurado como "sin permiso". ¡Cambié esto a "solo lectura" y funcionó a la perfección!
Su enfoque tiene muchos problemas:
En primer lugar, tenga en cuenta que fancybox obtiene su contenido del atributo href de cualquier selector vinculado a él, por lo que el enlace
<a class="fancybox" href="{target}" ...
debe estar vinculado a fancybox a través del siguiente script para poder trabajar
$(''.fancybox'').fancybox();
Bastante obvio, pero en su enfoque, el enlace dentro del fancybox abierto ( que apunta a yahoo por ejemplo ) no está vinculado al fancybox en sí mismo; seguro que intentará volver a encender Fancybox, pero sin ninguna indicación de cuál debería ser el contenido esta vez, de ahí el error " El contenido solicitado no se puede cargar. Inténtelo de nuevo más tarde ". en otras palabras, el enlace (dentro del contenido en línea) <a href="http://yahoo.com" ... no está obligado a fancybox.
La única forma en que los enlaces dentro de fancybox pueden funcionar y cargar contenido dinámicamente (sin estar vinculado a fancybox) es cuando el contenido actual es un documento html externo y el type fancybox se configuró en iframe (no en su caso)
En segundo lugar , abrió una imagen de manera que fancybox configuró el type a image por defecto, pero luego simula que carga un tipo diferente de contenido en el mismo cuadro (yahoo por ejemplo), lo que requeriría configurar el type en iframe y otras opciones como width y height .
Tercero , ya que está utilizando contenido en línea, tenga en cuenta un error existente en v1.3.x y su solución para evitar más problemas, puede obtener más información aquí
Por último , no solo estoy dando una conferencia aquí, es más como la explicación de lo que está pasando con su problema ... pero la buena noticia es que solo necesita agregar algunas líneas de código más para que funcione como usted quiere. :
1: necesita crear un script de fancybox para cada tipo de contenido que quiera abrir la segunda vez (además de su actual), por lo que en su ejemplo desea hacer clic en la imagen dentro de fancybox y eso debería abrir yahoo ... luego crear este script
$(''.fancyframe'').fancybox({
''type'':''iframe'',
''width'': 600, //or whatever you want
''height'': 300
});
2: dentro de su contenido en línea oculto, establezca esa clase en el enlace, por lo que este código:
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
ahora debería verse como
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Haga lo mismo para cada contenido en línea oculto. Si desea abrir otro tipo de contenido en fancybox, simplemente cree un script en consecuencia. El resto de tu código está bien (no me molesta disparar fancybox al pasar el mouse)
NOTAS LATERALES : sitios como google, yahoo, jquery y algunos otros no se abrirán en fancybox. También asegúrese de tener el DOCTYPE adecuado para que fancybox funcione correctamente (su página de muestra no tiene ninguna). Consulte No se puede cargar google en iframe en fancybox para obtener una explicación.
Tengo el mismo problema con Fancybox. No puedes tener espacios o caracteres especiales en href y div id . Use un slug de URL si está usando títulos de página.
Yo, después de tomar el consejo anterior, cambié ".png" a ".PNG" en el href. TENGA EN CUENTA que los nombres de los archivos son una extensión en minúscula, pero solo funciona con la extensión en mayúscula en el href (resto del nombre de archivo igual)
Espero que esto ayude.
mi solucion fue:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
''padding'' : 0,
''autoScale'' : false,
''transitionIn'' : ''none'',
''titleShow'' : false,
''showCloseButton'': true,
''titlePosition'' : ''inside'',
''transitionOut'' : ''none'',
''title'' : '''',
''width'' : 640,
''height'' : 385,
''href'' : this.href,
''type'' : ''iframe'',
''helpers'' : {
''overlay'' : {''closeClick'': false}
}
});
return false;
});
});
</script>