Yes, AJAX is the way to go.
Basically, you can write your own callback function for WP’s ajax hook in your theme’s functions.php file. And then your function can return data in any format you choose. I generally return JSON. I’ll walk you through setting it up.
First, since it doesn’t appear that your visitors will be logging in, you will use the following hook with your callback function.
add_action('wp_ajax_nopriv_get_images', 'get_images_callback');
get_images is the $_POST action that you will be using for your form/jQuery ajax method.
Next, you set up your ajax that will handle the request and returned the requested images. WordPress already has a script that handles AJAX. It is called admin-ajax.php, we post to it in the example below.
jQuery(document).ready(function($) {
var params = {
action: 'get_images',
category: 5,
limit: 20
};
jQuery.post(<?php echo admin_url('admin-ajax.php'); ?>, params, function(response) {
// do your magic!
});
});
(Note: There is a better way of declaring the admin url than using a PHP echo statement, but I’m just giving you a quick and dirty example so that you can set this up on your own.)
Finally, write the callback function that you added the action for. We will return JSON, but you can also just opt to return plain unencoded data.
function get_images_callback(){
$category = $_POST('category'); //get the requested category
$limit = $_POST('limit'); //get the requested limit
// your WP Query retrieves the appropriate posts/images and stores data to $images
// you might also return the number of images in $num
// and perhaps you'll return some other data in $data
header('Content-type: application/json');
print json_encode(array('images' => $images, 'number' => $num, 'data' => $data));
die();
}
And there you have it. In your jQuery function, be sure to handle the returned data appropriately. To get the data, you’d just reference them like this: response.images, response.num, or response.data. If images is returned as an array, you’ll have to iterate over it to get to the data, as you would with any other array. ie.
jQuery.each(response.images,function(key,val){
// do stuff with the values
});
(Btw, even with only 15 images, that is one SLOW-loading page. Why not load the actual thumbnails and then call the larger image when the user selects it? …check your thumb sizes…)