FancyBox retourne "Le contenu demandé ne peut pas être chargé. Réessayez plus tard. "Avec le lien

Votre approche comporte de nombreux problèmes:

Tout d'abord , ne pense pas que fancybox obtient son contenu de l'attribut href de n'importe quel sélecteur qui lui est lié, de sorte que le lien

 <a class="fancybox" href="{target}" ... 

Devrait être lié à fancybox via le script suivant pour fonctionner

 $('.fancybox').fancybox(); 

Assez évident, mais dans votre approche, le lien à l'intérieur de la fancybox ouverte ( qui cible Yahoo, par exemple ) n'est pas lié à fancybox lui-même; Il essaiera de tirer à nouveau Fancybox mais sans indication de ce que le contenu devrait être cette fois, d'où l'erreur " Le contenu demandé ne peut pas être chargé. Veuillez réessayer ultérieurement ". En d'autres termes, le lien (dans le contenu en ligne) <a href="http://yahoo.com" ... n'est pas lié à fancybox.

La seule façon de lier les liens dans la fancybox peut fonctionner et charger du contenu de manière dynamique (sans être lié à fancybox) est lorsque le contenu actuel est un document html externe et le type fancybox a été configuré pour iframe (pas votre cas)

Deuxièmement , vous avez ouvert une image afin que fancybox définisse le type à l' image par défaut, mais vous prétendez charger un type de contenu différent sur la même boîte (yahoo par exemple), ce qui nécessiterait de définir le type dans iframe et d'autres options comme width et height .

Troisièmement , puisque vous utilisez le contenu en ligne, prenez connaissance d'un bogue existant dans v1.3.x et sa solution de contournement pour éviter d'autres problèmes, vous pouvez en apprendre plus ici

Enfin , je ne suis pas seulement en train de donner des conférences ici, mais plutôt l'explication de ce qui se passe avec votre problème … mais la bonne nouvelle est que vous avez juste besoin d'ajouter d'autres lignes de code pour que cela fonctionne comme vous le souhaitez :

1: vous devez créer un script de fancybox pour chaque type de contenu que vous voulez ouvrir la deuxième fois (en plus de celui existant), alors dans votre exemple, vous souhaitez cliquer sur l'image à l'intérieur de fancybox et cela devrait ouvrir Yahoo … alors Créez ce script

 $('.fancyframe').fancybox({ 'type':'iframe', 'width': 600, //or whatever you want 'height': 300 }); 

2: dans votre contenu en ligne caché, définissez cette classe sur le lien, donc ce code:

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

Maintenant devrait ressembler

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

Faites de même pour chaque contenu en ligne caché. Si vous souhaitez ouvrir un autre type de contenu dans fancybox, créez simplement un script en conséquence. Le reste de votre code est correct (ne me dérange pas de tirer sur fancybox sur le vol stationnaire)

NOTES LATÉRALES : des sites comme google, yahoo, jquery et d'autres ne seront pas ouverts dans fancybox. Assurez-vous également que le DOCTYPE approprié pour fancybox fonctionne correctement (votre exemple de page n'en contient). Voir Impossible de charger google dans iframe dans fancybox pour des explications.

Je pense que j'ai compris ce qui cause cette question, du moins pour moi.

Le problème semble se produire lorsque vous avez une classe sur l'un de vos éléments qui est identique à la classe popup.

Par exemple:

 <a class="popup" href="#">Open the popup</a> 

Et vous avez quelque chose dans votre popup avec le même nom de classe, par exemple:

 <div class="popup">some text</div> 

Vous recevrez l'erreur. Essayez de changer la classe div à quelque chose comme popup-window – cela devrait corriger votre erreur

Dans votre page d'exemple, cela fonctionne pour moi si je ne clique pas. Lorsque vous cliquez sur, quelle page êtes-vous censée être prise? Voulez-vous que vous alliez à la prochaine image?

Dans ma préférence personnelle, je ne me soucie pas de l'activation sur le vol stationnaire. Cela devient vraiment déroutant, surtout lorsque la plupart des gens vont cliquent instantanément sur une image. Mais dans votre cas, il s'ouvre sur le vol stationnaire, puis ils cliquent instantanément, puis vous obtenez l'erreur.

Est-ce que vous obtenez cette même erreur lorsque vous utilisez les fonctionnalités comme cela s'applique normalement?

Si vous voulez, essayez de donner à chaque image une instance de nom de galerie comme rel="gallery" : rel="gallery" et voir ce qui se passe. Vous devriez obtenir les flèches suivantes / précédentes qui s'affichent et fonctionnent comme vous l'attendiez.

Mais honnêtement, je me débarrasser de la fonctionnalité de survol. Ou au moins se débarrasser de la souris () C'est probablement la partie la plus gênante.

Utilisez simplement ceci pour appeler les actions de la fancybox:

$("a[rel=gallery]").fancybox();

De cette façon, vous pouvez vous débarrasser de toutes ces classes qui causent probablement les problèmes.

J'espère que cela vous aidera.

Je viens de résoudre ce problème aussi.

Dans l'affirmative, l'URL href est sensible aux minuscules. (Si cela est possible)

Quel que soit le double, vérifiez trois fois vos URL pour vous assurer que vous avez exactement le cas.

Ma solution était:

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

Si certaines des images s'affichent et que d'autres ne le sont pas, même si le balisage est identique, vérifiez ceci:

1. Essayez de minuscules toutes les lettres dans le nom de fichier et dans le html. Fancybox semble être très sensible à la casse.
2. Vérifiez si l'image dispose de toutes les autorisations autorisées. J'ai remarqué que mes images ne fonctionnaient pas correctement sur mobile car sur mon ordinateur, l'autorisation de tout le monde était "sans autorisation". J'ai changé cela pour "lire seulement" et ça a fonctionné comme un charme!

Je viens de recréer votre test sur ma machine locale et ça marche bien pour moi (je l'ai couru dans le dossier de démonstration de l'installation 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> 

J'ai eu le même problème avec Fancybox. Vous ne pouvez pas avoir d'espaces ou de personnage spécial dans href et div id . Utilisez une limace d'URL si vous utilisez des titres de page.

J'ai vérifié toutes les possibilités et j'ai rencontré le problème EXTRA de sensibilité aux cas comme l'a mentionné @BrettBumeter. En fait, il est "beaucoup sensible à la casse", j'ai dû revier le chemin d'accès URL (href) à mes images de * .jpg à * .JPG (ou quelle que soit votre extension de type de fichier). En modifiant cela, j'ai résolu mon problème.

N'appliquez pas la classe fancybox à votre élément LI, faites-le à votre élément A.

Moi, après avoir pris les conseils ci-dessus, j'ai changé ".png" en ".PNG" dans le href. REMARQUE que les noms de fichier sont une extension minuscule, mais cela ne fonctionne qu'avec l'extension des majuscules dans le href (reste du nom de fichier même)

J'espère que cela t'aides.