web-dev-qa-db-fra.com

FancyBox retournant "Le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard." avec lien

J'utilise Fancybox pour afficher du contenu en ligne (un div avec une image liée à une nouvelle page). La div et l'image s'affichent correctement dans le modal, mais lorsque l'on clique sur l'image pour accéder à la nouvelle page, le message "Le contenu demandé ne peut pas être chargé. Veuillez réessayer ultérieurement." Erreur.

Le javascript de FancyBox est le suivant:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

Et s'applique au clip HTML suivant:

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

Est-ce que quelqu'un voit ce qui pourrait causer le problème ou ce que je dois corriger?

Merci!

Mise à jour: 19/01/2012 - J'ai effectué le même test sur mon serveur que la première réponse ( http://estorkdelivery.com/example/example.html ) et j'ai constaté que j'avais le même résultat. réponse en retour. Donc, il semble que ce soit quelque chose avec mon serveur.

J'ai toujours besoin d'aide avec ce problème. Quelqu'un a des idées?

Merci!

Mise à jour: 28/01/2012 - Je cherchais une solution à ce problème, mais le temps me manquait et je suis parti avec une solution complètement différente. Je garde ce problème ouvert au cas où quelqu'un d'autre rencontrerait la même erreur ou finirait par trouver une solution. Merci!

javascriptjqueryfancybox
27
Yazmin

Votre approche a de nombreux problèmes:

First n'oublions pas que fancybox tire son contenu de l'attribut href de tout sélecteur qui lui est lié, de sorte que le lien

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

devrait être lié à fancybox via le script suivant afin de fonctionner

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

C'est assez évident, mais dans votre approche, le lien à l'intérieur de la fancybox ouverte (qui cible yahoo par exemple) n'est pas lié à la fancybox elle-même; il tentera à nouveau de déclencher Fancybox avec certitude, mais sans indication de ce que le contenu doit être cette fois, d'où l'erreur "le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard.". en d'autres termes, le lien (à l'intérieur du contenu en ligne) <a href="http://yahoo.com" ... n'est pas lié à fancybox.

La seule façon dont les liens dans fancybox peuvent fonctionner et charger le contenu de manière dynamique (sans être lié à fancybox) est lorsque le contenu actuel est un document html externe et que fancybox type a été défini sur iframe (pas votre cas)

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

Troisième, étant donné que vous utilisez du contenu en ligne, veuillez vous tenir au courant d'un bogue existant dans la v1.3.x et de sa solution de contournement pour éviter d'autres problèmes, vous pouvez en apprendre plus ici

Last, je ne fais pas que donner des conférences ici, cela ressemble plus à une explication de ce qui se passe dans votre problème ... mais la bonne nouvelle est qu'il vous suffit d'ajouter quelques lignes de code supplémentaires pour que cela fonctionne. la façon que tu veux:

1: vous devez créer un script fancybox pour chaque type de contenu que vous souhaitez ouvrir pour la deuxième fois (en plus de votre existant), de sorte que dans votre exemple, vous souhaitez cliquer sur l'image dans fancybox et que cela devrait ouvrir yahoo ... puis créer ce script

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

2: dans votre contenu en ligne masqué, 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 la même chose pour chaque contenu en ligne masqué. 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 OK (ne me dérange pas de déclencher Fancybox en vol stationnaire)

SIDE NOTES: des sites comme Google, Yahoo, JQuery et d’autres ne s’ouvriront pas dans Fancybox. Assurez-vous également que vous avez la bonne variable DOCTYPE pour que fancybox fonctionne correctement (votre page d’échantillon n’en contient aucune). Voir Impossible de charger Google dans l'iframe dans fancybox pour des explications.

27
JFK

Je pense avoir compris la cause de ce problème, du moins pour moi.

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

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 aurez l'erreur. Essayez de changer la classe div en 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, à quelle page êtes-vous censé être dirigé? Voulez-vous qu'il passe simplement à l'image suivante?

Dans mes préférences personnelles, l'activation en vol stationnaire ne m'intéresse pas. Cela devient vraiment déroutant, surtout quand la plupart des gens vont cliquer instinctivement sur une image. Mais dans votre cas, il s'ouvre en vol stationnaire, puis ils cliquent instinctivement, vous obtenez alors l'erreur.

Vous obtenez cette même erreur lorsque vous utilisez simplement la fonctionnalité telle qu’elle s’applique normalement?

Si vous le souhaitez, essayez de donner à chaque image un exemple de nom de galerie tel que: rel="gallery" et voyez ce qui se passe. Vous devriez faire en sorte que les flèches next/prev apparaissent et fonctionnent comme prévu.

Mais honnêtement, je me débarrasserais complètement de la fonctionnalité de survol. Ou du moins, débarrassez-vous de la souris () C'est probablement la partie la plus gênante.

Utilisez simplement ceci pour appeler les actions de fancybox:

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

De cette façon, vous pouvez vous débarrasser de toutes les classes qui sont probablement à l'origine des problèmes.

J'espère que ça aide.

2
Jeremy Miller

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>
1
T.Todua

Je viens de rencontrer ce problème aussi.

Il s'avère que l'URL href est EXTRA sensible à la casse. (si c'est possible)

Quoiqu'il en soit, vérifiez trois fois vos URL href pour vous assurer que le cas est parfaitement correct. 

1
Brett Bumeter

Si certaines images sont visibles et d'autres pas, même si le balisage est identique, vérifiez ceci:

  1. Essayez de mettre toutes les lettres du nom de fichier et du code HTML en minuscule. 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 photos ne fonctionnaient pas correctement sur mobile car sur mon ordinateur, l'autorisation de tout le monde était réglée sur "pas d'autorisation". J'ai changé cela en "lecture seule" et cela a fonctionné comme un charme!
1
Lodott1

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

0
Garrett

Après avoir suivi le conseil ci-dessus, j’ai changé ".png" en ".PNG" dans le href. NOTE que les noms de fichier sont une extension minuscule mais que cela ne fonctionne qu'avec une extension majuscule dans le href (reste du nom du fichier même) 

J'espère que cela t'aides.

0
Drew Paul

Je viens de recréer votre test sur mon ordinateur local et cela fonctionne bien pour moi (je l'ai exécuté à partir du 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>
0
Orin

Mon problème était de donner un chemin inapproprié à l’image, par exemple; 

<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>

Bien que les images se soient bien chargées localement, cela ne pouvait se faire en ligne . Corriger le chemin a résolu le problème.

<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
0
7guyo

J'étais en train de vérifier toutes les possibilités et j'ai rencontré le problème de sensibilité à la casse EXTRA comme l'a mentionné @BrettBumeter . .jpg à * .JPG (ou quelle que soit l’extension de votre type de fichier) . Ce problème a été résolu.

0
baron