ajax call for galleria galleries

Question

Я хочу использовать субтитры onclick, которые имеют разные галереи галерей в каждом (не всплывающие). У меня есть галерические галереи на отдельных html-страницах, и теперь я хочу сделать вызов ajax на моей странице витрины, чтобы открыть галерею, щелкнув субтитры.

Куда я иду не так?

Это код моей страницы PHP до сих пор:

<? 
$main_content .= ' 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="galleria/galleria-1.2.9.min.js"></script> 

      <style> 
      #galleria{ width: 700px; height: 400px; background: #000; } 
      </style> 


      <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#agricultural").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("AgriculturalSlideshow.html"); 
      }); 
      $("#commercial").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("CommercialSlideshow.html"); 
      }); 
      $("#community").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("communityslideshow.html"); 
      }); 
      $("#industrial").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("industrialslideshow.html"); 
      }); 
      $("#recreational").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("recreationalslideshow.html"); 
      }); 
      $("#underconstruction").click(function() { 
       changeProduct($(this), $(this)); 

$("#galleria").load("underconstructionslideshow.html"); 
      }); 

     function changeProduct(menu, obj){ 
      $(".productMenu").css({"color":"#000000"}); 
      $(".prodContent").hide(); 
      $(menu).css({"color":"#a50000"}); 
      $(obj).fadeIn(); 
     } 
     }); 
    </script> 
    <div style="padding-top:0px; padding-bottom:50px;"> 
     <div class="pageHeader"> 
      SHOWCASE 
     </div> 
     <div class="content"> 
     <div style="padding:20px 0px 20px 0px;"> 
      <span class="productMenu" id="agricultural" style="cursor:pointer; padding-right:20px; color:#a50000">AGRICULTURAL</span>  
      <span class="productMenu" id="commercial" style="cursor:pointer; padding-right:20px;">COMMERCIAL</span> 
      <span class="productMenu" id="community" style="cursor:pointer; padding-right:20px;">COMMUNITY</span> 
      <span class="productMenu" id="industrial" style="cursor:pointer; padding-right:20px;">INDUSTRIAL</span> 
      <span class="productMenu" id="recreational" style="cursor:pointer; padding-right:20px;">RECREATIONAL</span> 
      <span class="productMenu" id="underconstruction" style="cursor:pointer; padding-right:20px;">UNDERCONSTRUCTION</span>    
     </div> 
     <div id="galleria"> 
     </div> 
     <script> 
      Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js"); 
      Galleria.run("#galleria"); 
     </script> 




     <div style="clear:both; text-align:justify; text-align-last:justify;padding-top:50px;"> 
      AGRICULTURAL | COMMERCIAL | RESIDENTIAL & GARAGES | GOVERNMENT | INDUSTRIAL | INSTITUTIONAL | RECREATIONAL 
     </div> 
     <div style="clear:both"></div> 
    </div>'; 
?> 

Answer 1

Вы должны использовать URLs не пути к файлам в Ajax запросов так ../AgriculturalSlideshow.html не работает. Вы должны использовать URL-адрес без ../.

Либо абсолютный URL-адрес с http://, либо правильный относительный URL-адрес.

И ваш jquery click eventбыл перезаписанonclick attribute. Поэтому вызовите changeProduct внутри вашего обработчика событий jquery и удалите атрибут onclick из элементов span.

Там были также отсутствуют точку с запятой в changeProduct:

 function changeProduct(menu, obj){ 
     $(".productMenu").css({"color":"#000000"}); 
     $(".prodContent").hide(); 
     $(menu).css({"color":"#a50000"}); 
     $(obj).fadeIn(); 
    } 

Посмотрите на этой скрипке: http://jsfiddle.net/YqFEn/2/

Я хотел бы предложить вам использовать инструменты разработчика Chrome или поджигатель (Firefox) для отладки JavaScript , Таким образом, вы можете легко проверить синтаксические ошибки или запросы ajax.

Кстати, параметры menu и obj точно такие же, поэтому что-то не будет работать, как ожидалось. Но запросы ajax должны работать.

Для ваших дополнительных проблем

Вы можете добавить окно Div ниже субтитров, а затем загрузить все галереи в этом сНе поле.

<div id="gal_content"></div> 

и корректировать load заявления:

$("#gal_content").load("AgriculturalSlideshow.html");