function jquery call twice or doesn't work

Question

I've a menu when I click on an item, it loads a page in a div "content". I tried two ways to do but I don't find a good issue. First way: I've a jquery funcion Gallery() (it's to make a menu slider) that I call in the page loaded but it call it every time the page is loaded so it doesn't work well. Second way: this function is called in my page html "index.php" where is the div "content", it works only for a part because it can't define some variables (like $('#gallery ul li.vizu').length). Please help! I don't know what to do!

function Gallery() {

 var marge = 10;
 function showSlide(direction) {
  var SlideWidthP = $('#gallery ul li.active').prev().width();
  var SlideWidthN = $('#gallery ul li.active').width();
  left = ( direction == 1 ) ? "+=" + (SlideWidthN+marge) : "-=" + (SlideWidthP+marge);
  $('#gallery').stop( true, true ).animate({left: left}, 800);
  };
 
 $('.previous').click(function (e) {
  e.preventDefault();
  if ($('#gallery ul li').eq( 0 ).hasClass('active')){
   $('#gallery ul li').hasClass('active')
   }else{
   $('#gallery ul li.active').removeClass('active').prev().addClass('active');
   showSlide(1);
  }  
 });

 $('.next'). click(function (e) {
  e.preventDefault();
  if ($('#gallery ul li').last().hasClass('active')){
   $('#gallery ul li').hasClass('active')
   }else{
   $('#gallery ul li.active').removeClass('active').next().addClass('active');
   showSlide(-1);
  }
 });
 
 var VizuCount = $('#gallery ul li.vizu').length;
 var TextCount = $('#gallery ul li.text').length;
 var PlanCount = $('#gallery ul li.plan').length;
 var VizuWidth = 
  $('#gallery ul li.vizu').each(function(){
   $Vizuwidth=$('#gallery ul li.vizu').width()+marge;
   })
 var TextWidth = 
  $('#gallery ul li.text').each(function(){
   $Textwidth=$('#gallery ul li.text').width()+marge;
   })
 var PlanWidth = 
  $('#gallery ul li.plan').each(function(){
   $Planwidth=$('#gallery ul li.plan').width()+marge;
   })
 var VizuLenght= VizuCount*$Vizuwidth;
 var TextLenght= TextCount*$Textwidth;
 var PlanLenght= PlanCount*$Planwidth;
 
 $('#boutons .icoImage').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:0},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.vizu').first().addClass('active');
 });
 $('#boutons .icoTexte').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:-VizuLenght},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.text').first().addClass('active');
 }); 
 $('#boutons .icoPlan').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:-(VizuLenght+TextLenght)},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.plan').first().addClass('active');
 }); 
 
 
}
function Menu2(){
 var marge = 10;
 var VizuCount = $('#gallery ul li.vizu').length;
 var TextCount = $('#gallery ul li.text').length;
 var PlanCount = $('#gallery ul li.plan').length;
 var VizuWidth = 
  $('#gallery ul li.vizu').each(function(){
   $Vizuwidth=$('#gallery ul li.vizu').width()+marge;
   })
 var TextWidth = 
  $('#gallery ul li.text').each(function(){
   $Textwidth=$('#gallery ul li.text').width()+marge;
   })
 var PlanWidth = 
  $('#gallery ul li.plan').each(function(){
   $Planwidth=$('#gallery ul li.plan').width()+marge;
   })
 var VizuLenght= VizuCount*$Vizuwidth;
 var TextLenght= TextCount*$Textwidth;
 var PlanLenght= PlanCount*$Planwidth;
 
 $('#boutons .icoImage').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:0},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.vizu').first().addClass('active');
 });
 $('#boutons .icoTexte').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:-VizuLenght},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.text').first().addClass('active');
 }); 
 $('#boutons .icoPlan').click(function (e) {
  e.preventDefault();
  $('#gallery').animate({left:-(VizuLenght+TextLenght)},800);
  $('#gallery ul li.active').removeClass('active');
  $('#gallery ul li.plan').first().addClass('active');
 }); 
}
//loadPage
function loadPage(url){ 
 $('#content').load(url,Loader); 
 };
Loader =
 function(){
  if($('#gallery').length){
       $('#menu2').show();
   $('#gallery ul li').first().addClass('active');
   Gallery(); //here it called for the First Way
   }else{
   $('#menu2').hide();
   }
   
 };

<!--Page INDEX.PHP!-->
<body onload=loadPage('<?=WEBROOT;?>page/<?=$accueil['nicename']?>')>

<div id="header" class="col-12">
</div><!--header-->
<div id="navigation" class="col-3">
<div id="logo">
<table>
<td>
<a href="index.php">
  <img src="img/logo.png"/> </a></td>
  </table>
</div><!--logo-->
<div id="mainmenu" class="col-2">
<?php foreach($menu as $menuitem):?>
    <ul class="menu">
    
     <li> <a href="Javascript:loadPage('<?=WEBROOT;?>page/<?=$menuitem['wnicename']?>');"><?=$menuitem['name']?></a></li>
            </ul>
            <ul class="sousmenu">
                <?php 
    foreach($sousmenu as $sousmenuitem):
      if ($sousmenuitem['id_parent']== $menuitem['id']){
       ?>
     <li>
     <a href="Javascript:loadPage('<?=WEBROOT; ?>page/<?=$sousmenuitem['wnicename'] ;?>');"><?=$sousmenuitem['name']?></a></li>
     <?php }
                          endforeach; ?>
                       </ul>
                       <?php endforeach; ?>
</div><!--mainmenu-->
</div><!--navigation-->
<div id="menu2">
  <div id="nomProj">      
         <?php //echo $_SESSION['worksname']?>
        </div><!--nomProj-->
     <div id="boutons">
      <a class="icoImage" href="#" title="Visuels"></a>
            <a class="icoTexte" href="#" title="Description"></a>
            <a class="icoPlan" href="#" title="Plans"></a>
     <div id="fleches">
        <a href="#" class="previous"></a>
 <a href="#" class="next"></a>
    </div><!--fleches-->
    </div><!--boutons-->
 </div><!--menu2-->
 

<div id="content" class="col-12">

</div><!--content-->
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/mainmenu.js" type="text/javascript"></script>
<script src="js/gallery.js" type="text/javascript"></script> 
<script type="text/javascript">
  if($('#gallery')){Gallery()};
</script><!--here it called for the Second Way
  
<!--Page LOADED!-->
<?php                                        
if ($work['gallery']==1){
 echo '<div id="gallery"><ul>';
 foreach($vizu as $v):
  echo '<li class="vizu"><img src="' . WEBROOT2 .'img/works/'. $v['name']. '" height="500px"></li>';
  endforeach;
 foreach($texte as $t):
  echo '<li class="text"><img src="' . WEBROOT2 .'img/works/'. $t['name']. '" height="500px"></li>';
  endforeach;
 foreach($plan as $p):
  echo '<li class="plan"><img src="' . WEBROOT2 .'img/works/'. $p['name']. '" height="500px"></li>';
  endforeach;;
 echo "</ul></div>";
 }else{
 echo '<div id="page">'.$work['content'].'<div>';
 }
?>