2012-01-01 21 views
2

我試圖做一個畫廊sorta的事情,拆分發布到多個頁面,並用jQuery分頁。有沒有人嘗試類似的東西,你能幫我一些準則來設置它嗎?(更新)如何從帖子的單個*頁*獲取內容?

像這樣的東西和類似畫廊網站上:http://hitfix.com/galleries/most-anticipated-tv-premieres-and-returns-of-2012

我已經成功地使類似的東西,但沒有jQuery的,我也知道用戶得到惱火,當網站有重新加載每個頁面每次。

編輯: 我將添加一個後續問題在這裏:

我可以使用哪些功能,後內獲取單個頁面的內容? 假設我想將我的帖子分成5頁 - 我如何獲得第3頁的內容?

回答

0

有各種各樣的slider/slideshow插件,您可以使用它,但如果你想自己做,那麼你可以設置一個導航欄,像你鏈接到的網站,當其中一個數字被點擊,你可以使AJAX調用PHP腳本輸出所需信息:

HTML--

<ul id="navigation"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li><a href="#">6</a></li> 
</ul> 
<div id="page"></div> 

CSS--

#navigation li { 
    display : inline-block; 

    /*Fix display:inline-block in IE7*/ 
    *display : inline; 
    zoom  : 1; 
} 

jQuery--

$(function() { 

    //cache the `#page` element as it will be needed later 
    var $page = $('#page'); 

    //bind a `click` event handler to all the `<li>` elements that are children of the `#navigation` ul element 
    $('#navigation').children().on('click', function (event) { 
     event.preventDefault(); 

     //you could display a loading animation/message here while the new content is being returned from the server 

     //when making the AJAX call you need to send some data to identify the "page" to output, I used the `id` key and set it's value to the index of the `<li>` element clicked in respect to all the other `<li>`s 
     $.get('path/to/server-side.php', { id : $(this).index() }, function (serverResponse) { 

      //now set the `#page` element's HTML to the response from the server 
      $page.html(serverResponse); 

      //if you played a loading animation/message you can hide it now 
     } 
    }); 
}); 

這裏是一個演示:http://jsfiddle.net/jGujw/(請注意,我不能用AJAX功能測試,所以我存儲在數組中的一些服務器響應)

也可以通過抓取進行分頁AJAX請求中一遍又一遍地重複相同的頁面,並解析serverReponse以僅將所需的元素附加到DOM中。

請注意,.on()是jQuery 1.7中的新增功能,如果您使用的是舊版本,則與.bind()相同。

+0

Thans mate。我對這個詳細的答案感到非常驚喜。我也許問了我的問題太廣泛了,我正在尋找一些指導如何在Wordpress方面做,但這也有幫助,因爲我沒有太多的jQuery經驗(但有更多的使用PHP和WP)。無論如何,我目前的問題是: 我可以使用什麼函數來獲取帖子內單個頁面的內容?假設我想將我的帖子分成5頁 - 我如何獲得第3頁的內容? 我可以在新的...線程/問題中提出這個問題,或者這被認爲是垃圾郵件嗎? – stackhouse 2012-01-01 21:03:48

+0

@stackhouse你可能想標記賈斯珀的問題作爲答案! – 2012-01-24 13:50:37

0

在wordpress的世界裏,你可以訪問所有的wordpress ...但這是你做什麼來獲得這種可見性的問題。以下是我在主頁上使用的代碼片段,以獲取3個最近的帖子並顯示它們的片段。如果你不在WordPress的範圍內,你需要找到一種方法來包含一些wordpress文件。

我相信我提供了一些谷歌搜索,可以讓你整理出來......如果$myposts有3個數組作爲成員,你可以挑選。

<!-- language: php --> 
<? $myposts = get_posts('numberposts=3'); 
     foreach($myposts as $post) : 
     setup_postdata($post); ?> 
<h2 id="page_title"><a class="noblock" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> 
<p class="ccw_light location"><small><?php the_time('l, F jS, Y') ?></small></p> 
         <br style="line-height:5px"> 
         <div class="content_text" id="noblock"> 
           <?php the_content('... continues','','') ?> 
             <span class="right"><small>Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong> |</strong>'); ?></small> 
             </span> 
           </div> 
         </div> 
<br> <!-- <?php trackback_rdf(); ?> --> 
<?php endforeach; ?> 
相關問題