Почему страница JQuery загрузки не работает в моей странице

Question

Почему мой FancyBox не работает, когда я заменяю div id=book0 ... и добавить jquery.load как то в моей странице:

<div id="book0" class="withoutborder0"></div> 
<div id="book1" class="withoutborder1"></div> 
<div id="book2" class="withoutborder2"></div> 
<div id="book3" class="withoutborder3"></div> 
<div id="book4" class="withoutborder4"></div> 


$('#book0').load('import.html #book0img'); 
$('#book1').load('import.html #book1img'); 
$('#book2').load('import.html #book2img'); 
$('#book3').load('import.html #book3img'); 
$('#book4').load('import.html #book4img'); 

Вот моя страница с jquery.load
http://www.booclin.ovh/tom/365/book.html

Вот ссылка и код моей страницы без jquery.load, который работает отлично
http://www.booclin.ovh/tom/365/bookb.html

код

$("img").error(function() { $(this).parent().remove(); }); 
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox(); 
console.clear(); 


$('#logohomepage').click(function() { 
$('body').css({ 'overflow': 'auto' }); 
});  

function showDiv() { 
document.getElementById('logohomepage').style.display = "none"; 
document.getElementById('allgalleries').style.display = "block"; 
}  




$("#launcherbook0, #launcherbook0b, #launcherbook0c").on("click", function(){ 
$("a.fancyboxgallerybook0").eq(0).trigger("click"); 
}); 

$("#launcherbook1, #launcherbook1b").on("click", function(){ 
$("a.fancyboxgallerybook1").eq(0).trigger("click"); 
}); 

$("#launcherbook2, #launcherbook2b").on("click", function(){ 
$("a.fancyboxgallerybook2").eq(0).trigger("click"); 
}); 

$("#launcherbook3, #launcherbook3b").on("click", function(){ 
$("a.fancyboxgallerybook3").eq(0).trigger("click"); 
}); 

$("#launcherbook4, #launcherbook4b").on("click", function(){ 
$("a.fancyboxgallerybook4").eq(0).trigger("click"); 
}); 

$("#launcherinfo, #launcherinfob").on("click", function(){ 
$("#infofull").eq(0).trigger("click"); 
}); 







$(".fancybox-lock").bind("mousewheel", function() { return false; }); 









$(function(){ 
$("#closegallerybook0, #closegallerybook1, #closegallerybook2, #closegallerybook3, #closegallerybook4, #infofull").on("click", function(){ $.fancybox.close(); return false; }); 
}); 






$(".fancyboxthumbnailsgallerybook0, .hidemenubook0").click(function(){ 
$(".secondleftpartbook0").show(); 
$(".secondleftpartbook1").hide(); 
$(".secondleftpartbook2").hide(); 
$(".secondleftpartbook3").hide(); 
$(".secondleftpartbook4").hide(); 
$(".partmenuhideninfo").show(); 
}); 

$("#closegallerybook0").click(function(){ 
$(".secondleftpartbook0").hide(); 
$("#book0").show(); 
$("#book1").hide(); 
$("#book2").hide(); 
$("#book3").hide(); 
$("#book4").hide(); 
$("#infofull").hide(); 
}); 






$(".fancyboxthumbnailsgallerybook1, .hidemenubook1").click(function(){ 
$(".secondleftpartbook0").hide(); 
$(".secondleftpartbook1").show(); 
$(".secondleftpartbook2").hide(); 
$(".secondleftpartbook3").hide(); 
$(".secondleftpartbook4").hide(); 
$(".partmenuhideninfo").show(); 
}); 

$("#closegallerybook1").click(function(){ 
$(".secondleftpartbook1").hide(); 
$("#book0").hide(); 
$("#book1").show(); 
$("#book2").hide(); 
$("#book3").hide(); 
$("#book4").hide(); 
$("#infofull").hide(); 
}); 





$(".fancyboxthumbnailsgallerybook2, .hidemenubook2").click(function(){ 
$(".secondleftpartbook0").hide(); 
$(".secondleftpartbook1").hide(); 
$(".secondleftpartbook2").show(); 
$(".secondleftpartbook3").hide(); 
$(".secondleftpartbook4").hide(); 
$(".partmenuhideninfo").show(); 
}); 

$("#closegallerybook2").click(function(){ 
$(".secondleftpartbook2").hide(); 
$("#book0").hide(); 
$("#book1").hide(); 
$("#book2").show(); 
$("#book3").hide(); 
$("#book4").hide(); 
$("#infofull").hide(); 
}); 






$(".fancyboxthumbnailsgallerybook3, .hidemenubook3").click(function(){ 
$(".secondleftpartbook0").hide(); 
$(".secondleftpartbook1").hide(); 
$(".secondleftpartbook2").hide(); 
$(".secondleftpartbook3").show(); 
$(".secondleftpartbook4").hide(); 
$(".partmenuhideninfo").show(); 
}); 

$("#closegallerybook3").click(function(){ 
$(".secondleftpartbook3").hide(); 
$("#book0").hide(); 
$("#book1").hide(); 
$("#book2").hide(); 
$("#book3").show(); 
$("#book4").hide(); 
$("#infofull").hide(); 
}); 






$(".fancyboxthumbnailsgallerybook4, .hidemenubook4").click(function(){ 
$(".secondleftpartbook0").hide(); 
$(".secondleftpartbook1").hide(); 
$(".secondleftpartbook2").hide(); 
$(".secondleftpartbook3").hide(); 
$(".secondleftpartbook4").show(); 
$(".partmenuhideninfo").show(); 
}); 

$("#closegallerybook4").click(function(){ 
$(".secondleftpartbook4").hide(); 
$("#book0").hide(); 
$("#book1").hide(); 
$("#book2").hide(); 
$("#book3").hide(); 
$("#book4").show(); 
$("#infofull").hide(); 
}); 






$(".hidemenuinfo").click(function(){ 
$(".secondleftpartbook0").hide(); 
$(".secondleftpartbook1").hide(); 
$(".secondleftpartbook2").hide(); 
$(".secondleftpartbook3").hide(); 
$(".secondleftpartbook4").hide(); 
$(".partmenuhideninfo").hide(); 
$("#infofull").show(); 
}); 


$("#infofull").click(function(){ 
$("#book0").hide(); 
$("#book1").hide(); 
$("#book2").hide(); 
$("#book3").hide(); 
$("#book4").hide(); 
});  







function toggleOverlay() { 
var overlay = document.querySelector("div"); 
overlay.classList.toggle('hide-overlaymenu'); 
document.body.style.overflow = "hidden"; 
} 

$('#menumodalclose').click(function() { 
$('body').css({ 
'overflow': 'scroll' 
}); 
}); 







$(function() { 
var salt = Math.floor(Math.random() * 1000), 
time; 

function load_script() { 
$('#backgroundhomepage').remove(); 
$.getScript("index/js/backgroundhome.js?s=" + salt, function() { 
$('script:last').attr('id', 'myscript'); 
salt = Math.floor(Math.random() * 1000); 
time = setTimeout(function() { 
load_script(); 
}, 5 * 1000); 
}); 
} 
load_script(); 
}); 


<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/js/modernizr.custom.js"></script> 

<script type="text/javascript"   src="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.js"></script> 

<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/fancybox.js"></script> 

<script id="backgroundhomepage" src="http://www.booclin.ovh/tom/365/index/js/backgroundhome.js"></script> 


<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/css/style.css"> 

<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.css" type="text/css"> 


<div class="hide-overlaymenu"> 

<div class="overlaymenu"> 
<div class="overlaymenu-content"> 

<div class="buttonmenuinside-container"> 
<a id="menumodalclose" class="buttonmenuinside" onclick="toggleOverlay()"> 
<i class="fa fa-toggle-off"></i> 
<i class="fa fa-toggle-on"></i> 
<img style="height:20px; width:20px; opacity:0.5;" src="http://www.starkasia.com/wp-content/uploads/icons/menuclose.png" alt=""> 
</a> 
</div> 


<div class="menucontent"> 
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0" data-fancybox-group="book0" href="javascript:void(0);"> 
BOOK0</a> 

<br/><br/><br/> 
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2" data-fancybox-group="book1" href="javascript:void(0);">BOOK 2</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3" data-fancybox-group="book1" href="javascript:void(0);">BOOK 3</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4" data-fancybox-group="book1" href="javascript:void(0);">ARCHIVE</a><br/> 


<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfo" href="javascript:void(0);">INFO</a> 

</div> 
</div> 
</div> 
</div> 
















<div id="logohomepage" style="display:inline;" onclick="showDiv()"> 

<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0b" data-fancybox-group="book0" href="javascript:void(0);"> 


<span style="width: 100%; max-width:120px; position: absolute; top: 100px; left:-100%; right:-100%; margin:auto;"> 
CLICK ME</span> 

</a> 
</div> 












<div id="allgalleries" style="display:none;"> 

<div class="leftpart"> 
<div class="firstleftpart"> 


<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0c" data-fancybox-group="book0" href="javascript:void(0);">BOOK 0</a> 

<br/><br/><br/> 

<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">BOOK 2</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">BOOK 3</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);">ARCHIVE</a><br/> 


<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfob" href="javascript:void(0);">INFO</a> 

<br/><br/><br/> 



</div>   








<div style="display:none;" class="secondleftpartbook0">  

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a> 

<a style="font-size: 8px;" href="javascript:;"> | </a> 

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a> 


<br/> 

<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook0" class="opengallerybook0" href="javascript:;"> 
THUMBNAILS</a> 
</div> 




<div style="display:none;" class="secondleftpartbook1">  

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a> 

<a style="font-size: 8px;" href="javascript:;"> | </a> 

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a> 


<br/> 

<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook1" class="opengallerybook1" href="javascript:;"> 
THUMBNAILS</a> 
</div> 


<div style="display:none;" class="secondleftpartbook2">  

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a> 

<a style="font-size: 8px;" href="javascript:;"> | </a> 

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a> 


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook2" class="opengallerybook2" href="javascript:;"> 
THUMBNAILS</a> 
</div> 



<div style="display:none;" class="secondleftpartbook3">  

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a> 

<a style="font-size: 8px;" href="javascript:;"> | </a> 

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a> 


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook3" class="opengallerybook3" href="javascript:;"> 
THUMBNAILS</a> 
</div> 



<div style="display:none;" class="secondleftpartbook4">  

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a> 

<a style="font-size: 8px;" href="javascript:;"> | </a> 

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a> 


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook4" class="opengallerybook4" href="javascript:;"> 
THUMBNAILS</a> 
</div> 



<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()"> 
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a> 

</div> 


<div class="rightpart"> 
<div id="globalgalerie"> 


<div id="book0" class="withoutborder0"> 

<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" alt=""/> 
</a> 

<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" alt=""/> 
</a> 

</div> 


<div id="book1" class="withoutborder1"> 

<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" title=""> 
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" alt=""/> 
</a> 

<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" alt=""/> 
</a> 

</div> 


<div id="book2" class="withoutborder2"> 

<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" title=""> 
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" alt=""/> 
</a> 

<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" alt=""/> 
</a> 

</div> 


<div id="book3" class="withoutborder3"> 

<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" alt=""/> 
</a> 


<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" alt=""/> 
</a> 

</div> 


<div id="book4" class="withoutborder4"> 

<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" title=""> 
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" alt=""/> 
</a> 


<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" title=""> 
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" alt=""/> 
</a> 

</div> 



<div id="infofull"> 
<span class="spanbold">INFO</span><br/><br/> 
BLABLABLA 
</div> 

</div> 
</div> 
</div> 

Answer 1

.load() метод assynchroneous ...
Значение имеет задержку, чтобы получить ответ.

Эта задержка достаточно долго, чтобы скрипт выполнялся полностью до получения ответа.

Кроме того, вы инициируете свои экземпляры FancyBox перед вызовом нагрузок.
Таким образом, элементы (анкор), которые вы ему предоставляете, явно отсутствуют.

Так решение изменить эту строку:

$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox(); 

как функция:

function fancyInit(x){ 
    $("#book"+x).find("a.fancyboxgallerybook"+x).fancybox(); 
} 

Затем использовать .load() обратного вызова:

$('#book0').load('import.html #book0img',fancyInit(0)); 
$('#book1').load('import.html #book1img',fancyInit(1)); 
$('#book2').load('import.html #book2img',fancyInit(2)); 
$('#book3').load('import.html #book3img',fancyInit(3)); 
$('#book4').load('import.html #book4img',fancyInit(4)); 

Функция обратного вызова exectutes когда .load(), как успешно завершена.