Ajax Slideshow in Post

Question

Is there a way to make an ajax slideshow like this?

Each slide contains an image and description and is loaded via ajax call.

I suppose an easy way for an author to make up such slideshow post is to use the following shortcode markup:

[slideshow]
    [slide1]
        <img src="photo1.jpg"/>
        <p>desc 1</p>
    [/slide1]
    [slide2]
        <img src="photo2.jpg"/>
        <p>desc 2</p>
    [/slide2]
    [slide3]
        <img src="photo3.jpg"/>
        <p>desc 3</p>
    [/slide3]
[/slideshow]

There is also one more idea that would make life of authors even easier:

<img src="photo1.jpg">
<p>desc 1</p>
<!-- nextpage -->
<img src="photo2.jpg">
<p>desc 2</p>
<!-- nextpage -->
<img src="photo3.jpg">
<p>desc 3</p>

How can I achive anything like this?

Answer 1

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="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