Ajax Slideshow in Post

时间：2012-07-03 作者：Sergey

有没有办法制作ajax幻灯片like this?

每张幻灯片都包含图像和说明，并通过ajax 呼叫

我认为作者撰写此类幻灯片帖子的一个简单方法是使用以下快捷码标记：

[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]
还有一个想法可以让作者的生活更加轻松：

<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>
我怎样才能做到这一点？

1 个回复
最合适的回答,由SO网友:Sergey 整理而成

好吧，这真的很简单，灵活，很棒。

你的单曲。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>
您的脚本。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;
    });
});
您的帖子标记：

<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>
如果你知道如何优化我的JS，请告诉我。

要做的事情：

防止跳转到页面顶部(return false 似乎没有多大帮助）添加加载动画

结束
标签： ajax   slideshow   小码农  

相关推荐

WordPress主题中的AJAX响应-1

我在wordpress主题中使用ajax，但ir响应-1，为什么？如何更正此问题？function videospage(cnt) { var pageno=cnt; jQuery.ajax({ type: \"POST\", url: \"<?php echo admin_url(\'admin-ajax.php\'); ?>\", data: {