Ajax Slideshow in Post

by

OK, this turned out to be really simple, flexible and awesome.

Your single.php:

<div class="post-body">
    <?php the_content(); ?>
    <div class="post-pagination">
        <?php wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink= %'); ?> 
    </div>
</div>

Your script.js:

$(document).ready(function(){
    jQuery('.post-pagination a' ).live('click', function(e){ 
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('.post-body').load(link + ' .post-body ', function(){ 
            jQuery('.post-pagination p').show(); 
        });
        return false;
    });
});

Your post markup:

<img src="https://wordpress.stackexchange.com/questions/57278/photo1.jpg">
<p>desc 1</p>

<!--nextpage-->

<img src="photo2.jpg">
<p>desc 2</p>

<!--nextpage-->

<img src="photo3.jpg">
<p>desc 3</p>

If you know how to optimize my JS, please let me know.

Things to do:

  1. prevent from jumping to the top of the page (return false doesn’t seem to help much).
  2. add loading animation