I have simple code in wordpress archive post loop to make a grid view and I want to add 3column-grid / 2column-grid (toggle) switcherHere is my main code:\[code\]<?php get_header(); ?><div id="content-archive" class=".grid col-940"><?php if (have_posts()) : ?> <?php get_template_part( 'loop-header' ); ?> <!--// show archive posts in 3 columns --> <?php $c=0; while (have_posts()) : the_post(); $c++; if ( $c == 3 ) { $style = 'col-300wrap fit'; $c = 0; } else $style='col-300wrap'; ?> <?php responsive_entry_before(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class($style); ?>> <?php responsive_entry_top(); ?> <div class="post-entry"> <?php if ( has_post_thumbnail()) : ?> <a href="http://stackoverflow.com/questions/15714152/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > <?php the_post_thumbnail('medium', array('class' => 'archive')); ?> </a> <?php endif; ?> <div class="trumpai"><?php the_excerpt(); ?></div> <?php wp_link_pages(array('before' => '<div class="pagination">' . __('Pages:', 'responsive'), 'after' => '</div>')); ?> </div><!-- end of .post-entry --> <?php get_template_part( 'post-meta' ); ?> <?php get_template_part( 'post-data' ); ?> <?php responsive_entry_bottom(); ?> </div><!-- end of #post-<?php the_ID(); ?> --> <?php responsive_entry_after(); ?> <?php endwhile; get_template_part( 'loop-nav' ); else : get_template_part( 'loop-no-posts' ); endif; ?> </div><!-- end of #content-archive --><?php get_footer(); ?>\[/code\]I need to add this function to show 2 column grid:\[code\]<!--// show archive posts in 2 columns --><?php $c=0; while (have_posts()) : the_post(); $c++; if ( $c == 2 ) { $style = 'col-400wrap fit'; $c = 0; } else $style='col-400wrap';?>\[/code\]Beside I need infinite-scroll(plugin) to be active.How can I combine the code for toggle (aka) grid/list view with infinite scroll and without building two loops (unless toggle button click) to save bandwith? I found this solution, but I dont know how to combine whole code:\[code\]/* *grid.php: <?php echo "grid loop";?> *list.php: <?php echo "list loop";?> */$(document).ready(function(){ $('#toggle-grid').click(function(){ // hide both loops $(".view").hide(); // check if loop aleady has been generated if ($("#grid").html() != "") { $("#grid").show(); } else { // otherwise fetch loop $.get("grid.php", function(data) { $("#grid").html(data).show(); }); } });$('#toggle-list').click(function(){ // hide both loops $(".view").hide(); // check if loop aleady has been generated if ($("#list").html() != "") { $("#list").show(); } else { // otherwise fetch loop $.get("list.php", function(data) { $("#list").html(data).show(); }); } });});\[/code\]as code author Stefanbar sayed: the php code would execute on the server side before returning a result back to the js method. The js method will wait until something gets returned.Any suggestions?
Grid-list view + infinite scroll
- Thread starter 5i89
- Start date