我正在尝试添加wp-link-pages 功能到我的帖子中，我将图片拆分为多个页面。我已经有了next和prev按钮，其功能是用javascript编写的。如果我想从图1跳到图14，我觉得很难。所以我不知道如何实现这个wordpress，因为我是一个傻瓜。下面是我用来将帖子图像拆分为多个页面的代码。
<?php
global $post;
if (has_post_thumbnail( $post->ID ) )
{
$id = get_post_thumbnail_id( $post->ID );
$exclude = $id;
}
$attachments = get_children( array(\'post_parent\' => $post->ID,
\'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'order\' => \'DESC\',
\'orderby\' => \'menu_order DESC\', \'exclude\' => $exclude) );
$imgid = 1;
foreach($attachments as $attachment){
?>
<div class="comix" style="display:none; margin:0 auto; position:absolute;"><h2>Page <?php echo $imgid; ?></h2><img src="<?php echo $attachment->guid;?>" style="margin:0 auto;" /><br /><p><?php echo $attachment->post_content;?></p></div>
<?
$imgid++;
}
?>
我有这个导航
<div class="navigation" style="bottom:100px;"><a href="#" class="prev" ><img src="<?php echo get_template_directory_uri();?>/images/arrow-prev1.png" style="2px solid #EE1C25 ; width: 100px; height: 100px;" /></a><div style="float:right; cursor:pointer;"><a href="#" class="next" ><img src="<?php echo get_template_directory_uri();?>/images/arrow-next1.png" style="2px solid #EE1C25 ; width: 100px; height: 100px;" /></a></div><div class="clear"></div></div>
其功能由以下javascript提供
<script>
jQuery(document).ready(function($){
//comicles
nextClicked = false;
prevClicked = false;
$(\'.getstarted-content > div.comix\').hide();
$(\'.getstarted-content > div.comix:first-child\').fadeIn();
$(\'.getstarted-content > div.comix:first-child\').addClass(\'activeComicle\');
var Height = $(\'.activeComicle > img\').css(\'height\');
$(\'ul.getstarted li\').click(function(){
$gscontent = $(\'img\', this).attr(\'class\');
$(\'.getstarted-content > div.comix\').fadeOut();
$(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
$(\'.getstarted-content div#\'+$gscontent+"").fadeIn();
$(\'.getstarted-content div#\'+$gscontent+"").addClass(\'activeComicle\');
});
$(\'.prev\').hide();
$(\'.prev\').click(function(){
if(prevClicked == false){
prevClicked = true;$(\'.getstarted-content > div.comix\').fadeOut();
obj = $(\'div.activeComicle\').prev();
$(obj).fadeIn();
$(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
$(obj).addClass(\'activeComicle\');
$(\'.next\').show();
if($(obj).prev().html() == null || $(obj).prev().html()==\'\'){
$(\'.prev\').hide();
}
var Height = $(\'.activeComicle > img\').height();
$(\'#photos\').css(\'height\', \'\'+(Height+75)+\'\');
prevClicked = false;
}
//prevcheck();
//nextcheck();
window.scrollTo(0,0);
return false;
});
$(\'.next\').click(function(){
if(nextClicked == false){
nextClicked = true;
$(\'.getstarted-content > div.comix\').fadeOut();
obj = $(\'div.activeComicle\').next();
$(obj).fadeIn();
$(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
$(obj).addClass(\'activeComicle\');
$(\'.prev\').show();
if($(obj).next().html() == null || $(obj).next().html()==\'\'){
$(\'.next\').hide();
}
$(\'#photos\').height($(\'.activeComicle > img\').height()+75);
nextClicked = false;
}
window.scrollTo(0,0);
return false;
});
setTimeout(init, 2000);
});
function init(){
jQuery(\'#photos\').css(\'visibility\', \'visible\');
jQuery(\'#loading\').css(\'visibility\', \'hidden\');
jQuery(\'#photos\').height(jQuery(\'.activeComicle > img\').height() + 75);
}
</script>
我正在努力实现以下目标
<< Previous Page | 1 | 2 | 3 | 4 | Next Page >>
我希望我是清楚的。任何帮助都将不胜感激。
最合适的回答,由SO网友:Venkateshwaran Selvaraj 整理而成
我在回答我自己的问题。
下面是我编写的javascript，它可以100%平滑地工作。
<script>
$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
$(\'html,body\').stop();
}
});
pageSize = 1;
showPage = function(page) {
$(".comix").hide();
$(".comix").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1)
$("#pagin li").click(function() {
$("#pagin li").removeClass("current");
$(this).addClass("current");
$(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);
showPage(parseInt($(this).text()))
});
$(\'#pagin li\').each(function(i) {
if ( i === 1 ) {
$(this).addClass(\'current\');
}
});
var $first = $(\'li:first\', \'ol\'),
$last = $(\'li:last\', \'ol\');
$(document).keydown(function(e){
if (e.keyCode === 39) {
var $next, $selected = $(".current");
$next = $selected.next(\'li\').length ? $selected.next(\'li\') : $first;
$selected.removeClass("current");
$next.addClass("current");
$(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);
showPage(parseInt($next.text()))
}
});
$(document).keydown(function(e){
if (e.keyCode === 37) {
var $prev, $selected = $(".current");
$prev = $selected.prev(\'li\').length ? $selected.prev(\'li\') : $last;
$selected.removeClass("current");
$prev.addClass("current");
$(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);
showPage(parseInt($prev.text()))
}
});
</script>
