0

I am trying to add wp-link-pages function to my post where I have images split into many pages in that single post. I already have next and prev button whose functionality is written javascript. I find it difficult if I wanna skip from image1 to image14. So I am not sure how to achieve this wordpress as I am a nooby. Here is the code I am using to split the post images into multiple pages.

<?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++;
                        }

                    ?>

I have this navigation

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

whose functionality is given by the following 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>

I am trying to achieve something like

<< Previous Page | 1 | 2 | 3 | 4 | Next Page >> 

I hope I am clear. Any help would be highly appreciated.

0

I am answering my own question.

Here is the javascript that I wrote which works 100% smooth.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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