FancyBox restituisce "Il contenuto richiesto non può essere caricato. Riprova più tardi." con collegamento

Question

Sto utilizzando Fancybox per visualizzare il contenuto in linea (un div con un'immagine collegata a una nuova pagina). Il div e l'immagine vengono visualizzati bene nel modale, ma quando l'immagine viene cliccata per andare alla nuova pagina, ottengo "Il contenuto richiesto non può essere caricato. Riprova più tardi". errore.

Il javascript Fancybox è la seguente:

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

E si applica al seguente clip 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> 

Chiunque vede quello che potrebbe essere la causa del problema o che cosa devo correggere?

Grazie!

Aggiornamento: 1/19/2012 - Ho eseguito lo stesso test sul mio server come prima risposta (http://estorkdelivery.com/example/example.html) e ho riscontrato che ho ottenuto la stessa risposta. Quindi sembra che sia qualcosa con il mio server.

Ho ancora bisogno di aiuto con questo problema. Qualcuno ha qualche idea?

Grazie!

Aggiornamento: 28/01/2012 - Ho lavorato per trovare una soluzione a questo problema, ma ho esaurito il tempo e sono andato con una soluzione completamente diversa. Sto mantenendo questo problema aperto nel caso in cui qualcun altro esegua lo stesso errore o alla fine trovi una soluzione. Grazie!

Answer 1

Il tuo approccio ha molti problemi:

Prima essere muniti mente un che Fancybox ottiene il suo contenuto dall'attributo href di qualsiasi selettore legata ad esso in modo che il collegamento

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

sia soggetta a fancybox tramite il seguente script per lavorare

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

Abbastanza ovvio ma nel vostro approccio, il collegamento all'interno della fancybox aperta (che si rivolge a yahoo per esempio) non è associato a fancybox stesso; proverà a licenziare Fancybox di sicuro ma senza alcuna indicazione di quale contenuto dovrebbe essere questa volta, quindi l'errore "Il contenuto richiesto non può essere caricato. Riprova più tardi." in altre parole, il collegamento (all'interno del contenuto in linea) <a href="http://yahoo.com" ... non è associato a fancybox.

L'unico modo che collega all'interno fancybox in grado di lavorare e il contenuto del carico in modo dinamico (senza essere vincolato a fancybox) è quando il contenuto corrente è un html documento esterno e fancybox type è stato fissato a iframe (non il tuo caso)

in secondo luogo, si apre un'immagine in modo fancybox impostare il type a image per impostazione predefinita, ma poi si fanno finta di caricare un diverso tipo di contenuti sulla stessa macchina (yahoo per esempio), che richiederebbe di impostare type a iframe e altri opzioni come width e height.

Terzo, dal momento che si sta utilizzando contenuto in riga, si prega di essere a conoscenza di un bug esistente nella versione 1.3.x e la sua soluzione per evitare ulteriori problemi, you can learn more here

Ultima, non sto solo insegnavo qui, è più come la spiegazione di ciò che sta accadendo con il tuo problema .... ma la buona notizia è che devi solo aggiungere alcune linee di codice per farlo funzionare nel modo desiderato:

1: è necessario creare uno script fancybox per ogni tipo di contenuto che si desidera aprire la seconda volta (in aggiunta a quello esistente) , quindi nel tuo esempio vuoi fare clic sull'immagine all'interno di fancybox e questo dovrebbe aprire yahoo ...quindi creare questo script

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

2: all'interno del tuo contenuto in riga nascosta impostata quella classe al link, in modo da questo codice:

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

ora dovrebbe apparire come

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

fare lo stesso per ogni contenuto nascosto nascosto. Se vuoi aprire un altro tipo di contenuto in fancybox, basta creare uno script di conseguenza. Il resto del codice è OK (non mi preoccupa per sparare fancybox al passaggio del mouse)

LATO NOTE: siti come Google, Yahoo, jQuery e alcuni altri non si aprirà in fancybox. Assicurati inoltre di avere il corretto DOCTYPE per far funzionare correttamente fancybox (la tua pagina di esempio non ne ha). Vedere Unable to load google in iframe in fancybox per la spiegazione.

Answer 2

Ho appena ricreato il test sulla mia macchina locale e funziona bene per me (ho eseguito questo dalla cartella demo del Fancybox installazione):

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

Answer 3

Credo di aver capito che cosa è causando questo problema, almeno per me.

Il problema sembra verificarsi quando hai una classe su uno dei tuoi elementi che è la stessa della classe popup.

Per esempio:

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

E avete qualcosa nel vostro popup con lo stesso nome della classe, per esempio:

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

Si otterrà l'errore. Prova a cambiare la classe div a qualcosa come popup-window - che dovrebbe correggere il tuo errore

Nella tua pagina di esempio, funziona per me se non clicco. Quando clicchi, a quale pagina dovresti essere portato? Vuoi che passi alla prossima immagine?

Nella mia preferenza personale, non mi interessa l'attivazione su hover. Diventa davvero confuso, soprattutto quando la maggior parte delle persone va a fare clic istintivamente su un'immagine. Ma nel tuo caso si apre al passaggio del mouse, quindi fanno clic istintivamente, quindi ottieni l'errore.

Si ottiene lo stesso errore quando si utilizza semplicemente la funzionalità come si applica normalmente?

Se si desidera, provare a assegnare ad ogni immagine un'istanza del nome della galleria in questo modo: rel="gallery" e vedere cosa succede. Dovresti ottenere le frecce successiva/precedente che appaiono e funzionano come ti aspetteresti.

Ma sinceramente, mi sbarazzerei della funzionalità di passaggio del mouse. O almeno sbarazzarsi del mouseout() Questa è probabilmente la parte più fastidiosa.

Basta usare questo per chiamare le azioni Fancybox:

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

In questo modo è possibile sbarazzarsi di tutte quelle classi che sono probabilmente causando i problemi.

Spero che questo aiuti.

Answer 4

Ho lo stesso problema con Fancybox. Non è possibile avere spazi o caratteri speciali in href e div id. Utilizzare un slug URL se si utilizzano titoli di pagina.

Answer 5

Mi sono appena imbattuto in questo problema.

Come risulta, l'href url è EXTRA case sensitive. (se possibile)

Indipendentemente dal doppio, controlla tre volte il tuo href urls per assicurarti di avere esattamente il caso corretto.

Answer 6

Stavo verificando tutte le possibilità e mi sono imbattuto nel problema della maiuscola EXTRA come menzionato da @BrettBumeter. In effetti, è "così sensibile alle maiuscole e minuscole", ho dovuto rivedere il percorso dell'URL (href) per le mie immagini da * .jpg a * .JPG (o qualunque sia l'estensione del tipo di file). Alterare questo ha risolto il mio problema.

Answer 7

la mia soluzione era:

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

Answer 8

Non applicare la classe fancybox al vostro elemento LI, lo fa al vostro Un elemento.

Answer 9

Se alcune delle immagini stanno mostrando e altri non lo sono, anche se il margine di profitto è identico, quindi controllare questo:

1. Prova in minuscolo tutte le lettere del nome del file e nel codice HTML. Fancybox sembra essere abbastanza case sensitive.
2. Verificare se l'immagine ha tutte le autorizzazioni consentite. Ho notato che le mie immagini non funzionavano correttamente sui dispositivi mobili perché sul mio computer, il permesso di tutti era impostato su "nessun permesso". Ho cambiato questo in "sola lettura" e ha funzionato come un incantesimo!

Answer 10

I, dopo aver preso il consiglio precedente, ha modificato ".png" in ".PNG" nell'href. NOTA che i nomi dei file sono un'estensione minuscolo ma funziona solo con l'estensione maiuscola nell'href (resto del nome file uguale)

Spero che questo aiuti.