WordPress的動態畫廊

Question

我正在Wordpress中建立一個單一的網頁網站，正如我在my previous question（我正在這個新的理由）中所述。我遵循的The tutorial工作，它從數據庫整齊地拉動內容。 但是當我需要在一個頁面中創建一組動態畫廊時，一個新的挑戰就會展現出來。

所以這裏需要發生的事情：每一個裏面都有一個帶有畫廊的後期標題列表。當我點擊其中一個鏈接時，縮略圖的帖子就會出現在它的正下方。我設法做得很好，但是當點擊縮略圖時，更大的版本應該出現在右側。我應用了相同的代碼，但它不起作用！它只是進入圖像頁面（image.php）。

這裏現在發生的事情：

而這裏的我，直到如今代碼：

• 的index.php（圖庫部分）

  have_posts（））：$近期 - > the_post（）;？>

   <div class="controle"> 
        <h1>A Galeria</h1> 
        <nav id="galerias"> 
        <?php $args = array('post_type'=>'galeria'); 
  
        $myposts = get_posts($args); 
        foreach ($myposts as $post) : setup_postdata($post); ?> 
         <li> 
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
         </li> 
        <?php endforeach; 
        wp_reset_postdata();?> 
        </nav> 
  
        <div id="thumbnails"> 
  
        </div> 
  
  
       </div> 
  
        <div id="conteudo-galeria"> 
         <div id="texto-galeria"> 
  
         </div> 
        </div> 
  
  </div> 
  

• thumbnails.php（調出縮略圖。工作）

  $(document).ready(function() { 
  
  
      var hash = window.location.hash.substr(1); 
      var href = $('#galerias li a').each(function(){ 
       var href = $(this).attr('href'); 
       if(hash==href.substr(0,href.length)){ 
        var aCarregar = 'hash+.html #itens'; 
        $('#thumbnails').load(aCarregar) 
       } 
      }); 
  
      $('#galerias li a').click(function() { 
  
       var aCarregar = $(this).attr('href')+' #itens'; 
       $('#thumbnails').hide('fast',carregarConteudo); 
       $('#carregando').remove(); 
       $('#thumbnails').append('<span id="carregando">Carregando...</span>'); 
       $('#carregando').fadeIn('normal'); 
  
       window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length); 
  
       function carregarConteudo() { 
        $('#thumbnails').load(aCarregar,'',mostrarNovoConteudo); 
       } 
       function mostrarNovoConteudo() { 
        $('#thumbnails').show('normal',esconderCarregando); 
       } 
       function esconderCarregando() { 
        $('#carregando').fadeOut('normal'); 
       } 
  
       return false; 
      }); 
  
  }); 
  

  galeria.php（addapted縮略圖，使圖像不工作）

  $（文件）。就緒（函數（）{

  var hash = window.location.hash.substr(1); 
  var href = $('#itens a').each(function(){ 
      var href = $(this).attr('href'); 
      if(hash==href.substr(0,href.length)){ 
       var aCarregar = 'hash+.html #conteudo-galeria'; 
       $('#conteudo-galeria').load(aCarregar) 
      } 
  }); 
  
  $('#itens a').click(function() { 
  
      var aCarregar = $(this).attr('href')+' #conteudo-galeria'; 
      $('#conteudo-galeria').hide('fast',carregarConteudo); 
      $('#carregando').remove(); 
      $('#atracoes').append('<span id="carregando">Carregando...</span>'); 
      $('#carregando').fadeIn('normal'); 
  
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length); 
  
      function carregarConteudo() { 
       $('#conteudo-galeria').load(aCarregar,'',mostrarNovoConteudo); 
      } 
      function mostrarNovoConteudo() { 
       $('#conteudo-galeria').show('normal',esconderCarregando); 
      } 
      function esconderCarregando() { 
       $('#carregando').fadeOut('normal'); 
      } 
  
      return false; 
  }); 
  

  }）。

iamge.php（從庫中的圖像頁）

<?php get_header(); ?> 

    <!-- Main --> 
    <div class="main"> 

    <div id="conteudo-galeria"> 
    <div id="texto-galeria"> 

    <?php if (have_posts()): while (have_posts()) : the_post(); ?> 

     <!-- imagem --> 

      <?php if (wp_attachment_is_image($post->id)) : $att_image = wp_get_attachment_image_src($post->id, "full"); ?> 
       <img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" alt="<?php $post->post_excerpt; ?>" /> 
      <?php else : ?> 
       <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars(get_the_title($post->ID), 1) ?>"><?php echo basename($post->guid) ?></a> 
      <?php endif; ?> 

     <!-- /imagem --> 

    <?php endwhile; ?> 

    <?php else: ?> 

    <?php endif; ?> 

    </div> 
    </div> 

    </div> 
    <!-- /Main --> 


<?php get_footer(); ?> 

哇，這是很長。謝謝你，如果你有耐心遵循'直到這裏。

PS：JS也應該讓歷史工作，但事實並非如此。這不是現在的優先事項，但如果你們知道無論如何修復它，它將非常感激。

Answer 1

我已經找到了問題！

由於正在監視事件的內容僅在第一個ajax啓動後才加載，所以第二個ajax不知道在哪裏查找它。事情是有新的方法來監視jQuery中的事件，它完全解決了這個問題。 on('click'...處理程序將監視指定的父級內的任何元素。所以第二個js文件（galeria。JS）應該是這樣的：

$(document).ready(function() { 


    $('#thumbnails').on('click','a', function(event) { 

     var aCarregar = $(event.target).attr('href')+' #texto-galeria'; 
     $('#texto-galeria').fadeOut('fast',carregarConteudo); 
     $('#carregando').remove(); 
     $('#conteudo-galeria').append('<span id="carregando">Carregando...</span>'); 
     $('#carregando').fadeIn('normal'); 

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 

     function carregarConteudo() { 
      $('#texto-galeria').load(aCarregar,'',mostrarNovoConteudo); 
     } 
     function mostrarNovoConteudo() { 
      $('#texto-galeria').fadeIn('normal',esconderCarregando); 
     } 
     function esconderCarregando() { 
      $('#carregando').fadeOut('normal'); 
     } 

     return false; 
    }); 

}); 

父，但是需要在加載時的頁面（不能是動態的一樣），所以我不得不改變#itens到#thumbnails。

Answer 2

如果它只是將您重定向到圖像頁面，則問題可能是鏈接上的點擊事件。您可以嘗試阻止用戶點擊鏈接時的默認操作。你可以嘗試改變

$('#itens a').click(function() { 
    .... 

分爲：

$('#itens a').click(function(event) { 
    event.preventDefault(); 
    ...