Creating a Paginated Image Gallery

Question

I am trying to create a paginated image gallery building on top of the "Galleria" image gallery script (galleria.io)

I am running the "Folio" theme, and I trying to understand their API, as I do not understand query/js that well as it is. So basically here is what I am working with:

Their API ( http://galleria.io/docs/1.2/api/methods/#manipulation )

And their call on my page:

<script> 

// Load the classic theme
Galleria.loadTheme('galleria/themes/folio/galleria.folio.min.js');

// Initialize Galleria
$('#galleria').galleria({

dummy: '/images/noimage.jpg',
showInfo: false,
transition: 'pulse',
thumbCrop: 'width',
imageCrop: false,
carousel: false,
show: false,
easing: 'galleriaOut',
fullscreenDoubleTap: false,
_webkitCursor: true,
_animate: true
});

</script> 

I have written the following to pull my images from a directory and list them in the proper div which is shown here:

   <div id="galleria">
       <?php
     $a = array();
       $dir = '../public/uploads/2012/01';
       if ($handle = opendir($dir)) {
       while (false !== ($file = readdir($handle))) {
         if (preg_match("/\.png$/", $file)) $a[] = $file;
        elseif (preg_match("/\.jpg$/", $file)) $a[] = $file;
       elseif (preg_match("/\.jpeg$/", $file)) $a[] = $file;
      }
     closedir($handle);
      }
      foreach ($a as $i) {
       echo "<img src='" . $dir . '/' . $i . "' />";
      }
?>
    </div>

The browser takes a year to load all 400k images, and I need to create a paginated system using the above.. The API reference says:

3. DON’T ADD TOO MANY IMAGES AT ONCE

There are no limits to how many images you can add, but after 30 it can clog the pipes on load, especially in IE. Use a reasonable amount of images at first, then try the .load(), .splice() and .push() methods to add/remove image data on the fly.

As shown on http://galleria.io/docs/1.2/references/optimize/

As I realize I am going to get pummeled with "you didn't do any research!" Well I have tried all day and I do not know where to start to get this working. Any suggestions with included sample code for making the pagination work would be highly appreciated. I've looked all day and read on about every site possible, asked on forums, nothing.

Thank you!

Answer 1

You have two options:

1. AJAX and PHP:

   Make an AJAX call to a PHP script that returns a range of images from your directory with a given page number. Then use the .splice() function to clear your current gallery and .push() to repopulate it.

2. Only PHP

   Take your current PHP code and count the number of images in the array. Then send a range of that array to the gallery for display.

   (pseudo-ish code)

   $number_of_images = count($a);
   for($i = $number_of_images_per_page * $page_number; $i < $number_of_images_per_page; $i++){
       if($i == $number_of_images)
           break;
       echo "<img src='" . $dir . '/' . $a[$i] . "' />";
   }