Question

I have a photo gallery I’m developing using WP as a means for content management. I’m relying heavily on some jQuery plugins to manage the UI styling and manipulation (via sorting). My problem is there are too many damn posts! 737, and each has a thumbnail which is displayed on the page. This inevitably bogs down any browser. Especially since the sorting plugin “clones” the images when it sorts them.
The posts are built using a Wp_query script;

<?php
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $post_per_page = 15; // (-1 shows all posts) SETS NUMBER OF IMAGES TO DISPLAY!
  $do_not_show_stickies = 1; // 0 to show stickies
  $args=array(
    'post_type' => array ('post'),
    'orderby' => 'rand',
    'order' => 'ASC',
    'paged' => $paged,
    'posts_per_page' => $post_per_page
  );
    $pf_categorynotin = get_post_meta($wp_query->post->ID, true);
    if($pf_categorynotin){
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'slug',
                'terms' => $pf_categorynotin,
                'operator' => 'NOT IN'
            )
        ); //category__in
    }
  $temp = $wp_query;  // assign orginal query to temp variable for later use
  $wp_query = null;
  $wp_query = new WP_Query($args);
  //Begin LOOP #1
  if( have_posts() ) :
        echo '<ul id="applications" class="applications pf_item3">';
        $r = 0;
        while ($wp_query->have_posts()) : $wp_query->the_post();
            $post_cat = array();
            $post_cat = wp_get_object_terms($post->ID, "category");
            $post_cats = array();
            $post_rel = "";
            for($h=0;$h<count($post_cat);$h++){
                    $post_rel .= $post_cat[$h]->slug.' ';
                    $post_cats[] = $post_cat[$h]->name;
                }
        $r++;
        echo'<li data-id="id-'. $r .'" data-type="'.$post_rel.'" >';
        if (get_post_meta($post->ID, 'port_thumb_image_url', true)) { ?>
    <a  class="tozoom" href="<?php echo get_post_meta($post->ID, 'port_large_image_url', true); ?>" rel="example4" title="<?php echo $post->post_title; ?>">
    <img src="<?php echo get_post_meta($post->ID, 'port_thumb_image_url', true); ?>" class="portfolio_box" alt="<?php the_title(); ?>" width="199px" height="134px" /></a>
        <?php } ?>
            </li>
        <?php endwhile ?>
             </ul>

and the items are sorted by their html5 tags with a menu in the sidebar.

You can see it working here;
http://marbledesigns.net/marbledesigns/products

Right now it randomly loads 15 posts and displays them. I want to be able to reload posts based on my selection from the menu (via categories) and then update the list of images without refreshing the page. I want to be able to change not only which posts from which category are displayed, but also the posts per page as well.

I think AJAX is the way to do this, but I don’t want to undo a whole bunch of code in the menu in order to get it working. Right now the menu is styled radio buttons. Isn’t there a way I can take the same input from that form and update the parameters of the loop?

Looking for an efficient solution! Please help!

Answer 1

I’m going to abandon this method for reasons of time restriction. I’ve decided to use AJAX as a way to pull the list form the linked page and display it on the current one.

I followed this tutorial,
http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html
changed a couple names in the ajax.js script and it worked great!