Introduction to PHP Development with Ajax (II.)

The implementation of the navigation

Although tables list some of the images in the table of contents, users also need a way to see the pictures that don't appear in the table. To truly implement the pager, you need a set of standard links: home, Prev, Next, and last.

Listing 3. Page-Pager Navigation

Append Navigation
$output = ' Min ($limit _start $limit _step-1, Count ($images)).
' of '. Count ($images). ' <br/> ';

$prev _start = max (0, $limit _start-$limit _step);
if ($limit _start > 0) {
$output. = Get_table_link (' << ', 0, $limit _step);
$output. = ' | ' . Get_table_link (' Prev ',
$prev _start, $limit _step);
} else {
$output. = ' << | Prev ';
}

Append Next button
$next _start = min ($limit _start $limit _step, Count ($images));
if ($limit _start $limit _step < count ($images)) {
$output. = ' | ' . Get_table_link (' Next ', $next _start, $limit _step);
$output. = ' | ' . Get_table_link (' >> ', (count ($images)-$limit _step), $limit _step);
} else {
$output. = ' | Next | >> ';
}

$output. = '
Finally, write the Get_image_link () and Get_table_link () functions to let the user expand the thumbnail into a complete image (see Listing 4). Notice that the script index.php (and the expand.php to be created later) are called only in these two functions. This makes it easy to change the functionality of the link. In fact, when you integrate with Sajax below, only these two functions need to be modified.

Listing 4. Get_image_link, Get_table_link implementation

function Get_table_link ($title, $start, $step) {
$link = "index.php?start= $start &step= $step";
Return ' <a href= '. $link. ' > '. $title. ' </a> ';
}

function Get_image_link ($title, $index) {
$link = "expand.php?index= $index";
Return ' <a href= '. $link. ' > '. $title. ' </a> ';
}

Enlarge picture

Now you have a paging device available to provide users with some thumbnail images. The second feature of the album is to allow users to click on thumbnails to view the full picture. The Get_image_link () function calls the expand.php script, and we'll write it now. This script passes the index of the file that the user wants to expand, so you must list the directory here and get the appropriate file name. The subsequent operation is simple, just create the disease output image tag.

Listing 5. Get_image function

function Get_image ($index) {
$images = get_image_list (' images ');

Generate Navigation

$output. = ' ';
return $output;
}