Question

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

我正在运行“Folio”主题，我试图了解他们的API，因为我不理解查询/ 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

您有两种选择：

AJAX和PHP：

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

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

创建一个Paginated图库

1 个答案: