Friday 2 January 2015

How to display Posts in lightbox with pagination In WordPress

// Create post_lightbox.php template or simple page

<?php
         require_once( './wp-load.php' );
         $post_id = $_REQUEST['post_id'];

         $author_query = array('posts_per_page' => '-1');  
         $author_posts = new WP_Query($author_query);
         if($author_posts->have_posts()):
         while($author_posts->have_posts()) : $author_posts->the_post();  
         ?>
        <p><a  class="inline post-<?php echo get_the_ID();?>" href="#post-<?php echo get_the_ID();?>"><?php the_title(); ?></a></p>
        <div id="post-<?php echo get_the_ID();?>" class="inline-post">
            <?php  wdpv_vote(); ?>   
            <h2 class="inline-header" style="text-align:center;">
                <a href="<?php the_permalink();?>" target="_blank"><?php the_title(); ?></a>
            </h2>
            <div class="userpro-post-stat lightbox-icons">
                <a href="<?php the_permalink(); ?>#comments"><i class="userpro-icon-comment"></i> <?php echo (get_comments_number())?get_comments_number().' Comments':'Leave a Comment'; ?></a> |
                <a href="#"><i class="userpro-icon-time"></i><?php echo get_the_date();?></a> |
                <a href="#"><i class="userpro-icon-user"></i> By <?php the_author(); ?></a>
               
            </div>
                       
            <div class="inline-content">
                 <?php the_content(); ?>
             
            </div>
                   
        </div>
    <?php          
    endwhile;
    else:
    echo '<h5 style="margin-top: 24px;text-align: center;">No Matches Found!</h5>';
    endif;?>
  
==================================================================

<!--open posts in light box-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/colorbox.css" />
    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.colorbox.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function (){
   

 jQuery('.inline-post').on('click',function(event){        
//event.preventDefault();
var id = jQuery(this).attr('href');
var post_id = id.split("-");
 var post_class= 'post-'+post_id[1];
jQuery.ajax({ 
type: "POST",                 
url:  "<?php echo home_url('/');?>post_display_in_lightbox.php", 
   data: 'post_id='+post_id[1],   
   beforeSend: function() {
        // setting a timeout
        jQuery('.lightbox-loading').css('display','block');
    },
   success: function (msg) { 

  jQuery('#all_ajax_posts').html(msg);
   jQuery('.lightbox-loading').css('display','none');

   var mmmm= setInterval(function() {
     jQuery('.'+post_class).trigger('click');
   
  //jQuery(".inline").colorbox({inline:true,rel:'inline', transition:"none", width:"85%", height:"100%",position:'fixed'});
   
}, 500);

jQuery(".inline").colorbox({inline:true,rel:'inline', transition:"none", width:"85%", height:"100%",position:'fixed'});
setTimeout(function(){clearInterval(mmmm); }, 2000);
},
error: function () {                 
  alert('Error');              

});  
       
});
   
});
   
</script>


Note: Download css and js files from colorbox-master site.

No comments:

Post a Comment