0

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?

1 Answer 1

0

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
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.