创建分页图片库

Question

我正在尝试在“Galleria”图片库脚本 (galleria.io) 之上创建一个分页图片库

我正在运行“Folio”主题，并且我试图了解他们的 API，因为我不太了解 query/js。所以基本上这就是我正在使用的：

他们的 API (http://galleria.io/docs/1.2/api/methods/#manipulation)

他们在我的页面上的电话：

<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> 

我编写了以下内容以从目录中提取我的图像并将它们列在此处显示的正确 div 中：

   <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>

浏览器需要一年时间来加载所有 400k 图像，我需要使用上面的方法创建一个分页系统。API 参考说：

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.

如http://galleria.io/docs/1.2/references/optimize/所示

当我意识到我会被“你没有做任何研究！”的打击！好吧，我已经尝试了一整天，但我不知道从哪里开始让这个工作。任何包含使分页工作的示例代码的建议将不胜感激。我已经看了一整天，阅读了所有可能的网站，在论坛上问过，什么都没有。

谢谢！

Answer 1

你有两个选择：

1. AJAX 和 PHP：

   对 PHP 脚本进行 AJAX 调用，该脚本会从您的目录中返回具有给定页码的一系列图像。然后使用.splice() 功能清除您当前的图库并使用.push() 重新填充它。

2. 仅 PHP

   获取您当前的 PHP 代码并计算数组中的图像数量。然后将该数组的一个范围发送到画廊进行显示。

   （伪代码）

   $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] . "' />";
   }