Powracanie FancyBox "Nie można załadować żądanej treści. Spróbuj ponownie później." z linkiem

Question

Używam Fancybox do wyświetlania treści liniowej (element div z obrazem połączonym z nową stroną). Element div i image wyświetlają się dobrze w modalu, ale po kliknięciu obrazu, aby przejść do nowej strony, pojawia się komunikat "Nie można załadować żądanej treści. Spróbuj ponownie później." błąd.

fancybox JavaScript jest następujący:

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

i odnosi się do poniższego klipu 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> 

Czy ktoś zobaczyć, co może być przyczyną problemu lub co muszę poprawić?

Dzięki!

Aktualizacja: 19.01.2012 - Przeprowadziłem ten sam test na moim serwerze jako pierwsza odpowiedź (http://estorkdelivery.com/example/example.html) i okazało się, że mam taką samą odpowiedź z powrotem. Wygląda więc na to, że jest coś z moim serwerem.

Nadal potrzebuję pomocy w tym zakresie. Ktoś ma jakieś pomysły?

Dzięki!

Aktualizacja: 1/28/2012 - Pracowałem nad znalezieniem rozwiązania tego problemu, ale zabrakło czasu i poszedłem z zupełnie innym rozwiązaniem. Utrzymuję ten problem otwarty na wypadek, gdyby ktoś inny przeszedł ten sam błąd lub ostatecznie znalazł rozwiązanie. Dzięki!

Answer 1

Twoje podejście ma wiele problemów:

Pierwszy noszą un umysł że fancybox dostaje swoją zawartość z atrybutem href każdego selektora związanego z nim więc łącza

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

powinna być związana z Fancybox za pomocą poniższego skryptu do pracy

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

Dość oczywiste, ale w twoim podejście, łącze wewnątrz otwartej fancybox (, która jest skierowana do yahoo na przykład) nie jest związane z samym fancyboxem; na pewno spróbuje ponownie uruchomić Fancybox, ale bez wskazania, jaka treść powinna być tym razem, stąd błąd "Żądana zawartość nie może zostać załadowana. Spróbuj ponownie później." innymi słowy, link (wewnątrz treści inline) <a href="http://yahoo.com" ... nie jest związany z fancybox.

Jedynym sposobem, który łączy wewnątrz Fancybox może pracować i treść obciążenia dynamiczne (bez wiązania się Fancybox) jest wtedy, gdy obecna treść jest zewnętrznym html dokument i fancybox type została ustawiona iframe (nie twoja sprawa)

drugie, otworzyłeś obraz tak fancybox ustawić type do image domyślnie, ale wtedy są udając załadować inny rodzaj treści na tym samym polu (yahoo na przykład), co wymagałoby, aby ustawić type do iframe i inne opcje takie jak width i height.

trzecie, ponieważ używasz inline treści, proszę mieć świadomość istniejącego błędu w v1.3.x i jego obejście, aby uniknąć dalszych problemów, you can learn more here

Ostatni, ja nie tylko wykłady tutaj bardziej przypomina wyjaśnienie, co się dzieje z twoim problemem ... ale dobrą wiadomością jest to, że musisz dodać kilka linii kodu, aby działało tak, jak chcesz:

1: musisz utworzyć skrypt fancybox dla każdego rodzaju treści, które chcesz otworzyć po raz drugi (oprócz istniejącego) , więc w twoim przykładzie chcesz kliknąć obraz wewnątrz fancybox, a to powinno otworzyć Yahoo ...następnie utworzyć skrypt

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

2: wewnątrz twój ukryty inline zawartość ustawić tej klasy do linku, więc ten kod:

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

teraz powinien wyglądać

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

Zrób to samo dla każdej ukrytej zawartości śródliniowej. Jeśli chcesz otworzyć inny rodzaj treści w fancybox, po prostu odpowiednio utwórz skrypt. Reszta kodu jest OK (nie przeszkadza mi ogień fancybox przy aktywowaniu)

SIDE UWAGI: Miejsca takie jak Google, Yahoo, jQuery i inni nie otworzy się w Fancybox. Upewnij się również, czy masz odpowiednie urządzenie do poprawnego działania fancybox (Twoja strona próbna nie ma żadnych). Aby uzyskać wyjaśnienie, patrz: Unable to load google in iframe in fancybox.

Answer 2

Właśnie utworzony ponownie test na moim komputerze lokalnym i działa dobrze dla mnie (ja prowadził ten z folderu demo z fancybox instalacji):

<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

myślę, że zorientowali się, co się powodując ten problem, przynajmniej dla mnie.

Problem wydaje się występować, gdy klasa na jednym z elementów jest taka sama, jak klasa podręczna.

Na przykład:

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

I masz coś w okienko o tej samej nazwie klasy, na przykład:

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

dostaniesz błąd. Spróbuj zmienić klasę div na coś podobnego do popup-window - to powinno naprawić Twój błąd

Na przykładowej stronie działa ona dla mnie, jeśli nie kliknę. Kiedy klikasz, do jakiej strony ma się trafić? Czy chcesz po prostu przejść do następnego obrazu?

W mojej osobistej preferencji nie zależy mi na aktywacji po najechaniu myszą. Robi się naprawdę niezrozumiale, zwłaszcza gdy większość ludzi instynktownie klika obraz. Ale w twoim przypadku otwiera się po najechaniu, potem instynktownie kliknie, a potem pojawi się błąd.

Czy pojawia się ten sam błąd, gdy używasz tylko tej funkcji, która zwykle obowiązuje?

Jeśli chcesz, spróbuj podać każdemu obrazowi instancję nazwy galerii, taką jak: rel="gallery" i zobacz, co się stanie. Powinieneś otrzymać następne/poprzednie strzałki pokazujące i działające tak, jak byś tego oczekiwał.

Ale szczerze, pozbyłbym się funkcjonalności zawisu w ogóle. Lub przynajmniej pozbyć się mouseout() To prawdopodobnie najbardziej kłopotliwa część.

Wystarczy użyć tego nazwać działania fancybox:

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

ten sposób można pozbyć się wszystkich tych klas, które są prawdopodobnie powodujących problemy.

Mam nadzieję, że to pomaga.

Answer 4

Mam ten sam problem z Fancybox. Nie możesz mieć spacji ani znaków specjalnych w href i div id. Użyj pliku URL, jeśli używasz tytułów stron.

Answer 5

Właśnie wpadłem na ten problem.

Jak się okazuje, adres URL hrefa to wielkość liter EXTRA. (jeśli to możliwe)

Bez względu na podwójne, potrójne sprawdzenie adresów URL href, aby upewnić się, że sprawa jest dokładnie poprawna.

Answer 6

Sprawdzałem wszystkie możliwości i natknąłem się na kwestię wrażliwości na skrzynkę EXTRA, o której wspomniał już @BrettBumeter. W rzeczywistości jest "tak duża wielkość liter", musiałem zmienić ścieżkę URL (href) do moich obrazów z * .jpg na * .JPG (lub jakikolwiek byłby twój typ rozszerzenia pliku). Zmiana tego rozwiązała mój problem.

Answer 7

moje rozwiązanie było:

<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

Nie stosować klasę fancybox do elementu LI, zrób to do elementu.

Answer 9

Jeżeli niektóre obrazy są wyświetlane, a inni nie, mimo że znaczniki są identyczne, a następnie sprawdzić w ten sposób:

1. Spróbuj na małe litery wszystkie litery w nazwie pliku oraz w HTML. Wygląda na to, że w Fancybox jest rozróżniana wielkość liter.
2. Sprawdź, czy obraz ma wszystkie dozwolone uprawnienia. Zauważyłem, że moje zdjęcia nie działały poprawnie na urządzeniach mobilnych, ponieważ na moim komputerze wszyscy otrzymali pozwolenie "bez pozwolenia". Zmieniłem to na "tylko do odczytu" i działało jak czar!

Answer 10

Ja, po przyjęciu powyższej porady, zmieniono ".png" na ".PNG" w href. Zauważ, że nazwy plików są rozszerzeniem pisanym małymi literami, ale działa tylko z rozszerzeniem dużych liter w href (reszta nazwy pliku jest taka sama)

Mam nadzieję, że to pomoże.