Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

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
share|improve this answer
    
I'm at work now so don't have time to explain it thoroughy, but this might help you in the right direction. 2. Loading animation: stackoverflow.com/questions/1305260/… , stackoverflow.com/questions/750358/… –  Aleks Jul 3 '12 at 8:44
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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