基于CodeIgniter实现图片画廊的前后图片列表加载功能

我来帮你搞定这个需求，咱们结合CodeIgniter的工具和你现有的代码，一步步实现前后翻页加载图片的功能：

1. 控制器层：配置分页逻辑 #

首先在你的控制器里，引入CodeIgniter的分页类，处理分页参数和图片列表的获取：

public function gallery() {
    // 加载分页类
    $this->load->library('pagination');

    // 分页核心配置
    $config['base_url'] = base_url('你的控制器/gallery'); // 替换成你的实际控制器方法URL
    $config['total_rows'] = $this->get_total_images(); // 获取目标目录下的图片总数
    $config['per_page'] = 25; // 保持你原本每页25张的设定
    $config['uri_segment'] = 3; // URL中偏移量的位置，比如xxx.com/controller/gallery/25
    // 分页样式优化（可选，适配你的页面风格）
    $config['full_tag_open'] = '<nav><ul class="pagination">';
    $config['full_tag_close'] = '</ul></nav>';
    $config['prev_link'] = '&laquo; 上一页';
    $config['next_link'] = '下一页 &raquo;';

    $this->pagination->initialize($config);

    // 获取当前页的偏移量，默认从0开始
    $offset = $this->uri->segment(3, 0);
    // 拿到当前页要展示的图片列表
    $data['list'] = $this->get_paginated_images($offset, $config['per_page']);
    $data['ip'] = $this->input->get('ip'); // 假设你的$ip是从GET参数获取的，按需调整
    $data['pagination'] = $this->pagination->create_links();

    // 加载视图
    $this->load->view('gallery_view', $data);
}

// 自定义方法：统计指定IP目录下的有效图片数量
private function get_total_images() {
    $ip = $this->input->get('ip');
    $dir = FCPATH . 'TL_PHOTOS/' . $ip . '/'; // FCPATH是CI自带的根目录常量
    if (!is_dir($dir)) return 0;
    
    $files = scandir($dir);
    // 过滤掉.、..和非图片格式的文件
    $image_files = array_filter($files, function($file) {
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        return !in_array($file, ['.', '..']) && in_array($ext, ['jpg', 'jpeg', 'png', 'gif']);
    });
    return count($image_files);
}

// 自定义方法：获取分页后的图片列表
private function get_paginated_images($offset, $limit) {
    $ip = $this->input->get('ip');
    $dir = FCPATH . 'TL_PHOTOS/' . $ip . '/';
    if (!is_dir($dir)) return [];
    
    $files = scandir($dir);
    $image_files = array_filter($files, function($file) {
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        return !in_array($file, ['.', '..']) && in_array($ext, ['jpg', 'jpeg', 'png', 'gif']);
    });
    sort($image_files); // 按文件名排序，保证加载顺序一致
    // 截取分页对应的图片数组
    return array_slice($image_files, $offset, $limit);
}

2. 视图层：修改展示代码并添加分页链接 #

把你现有的视图代码改成下面这样，同时添加上下分页的操作链接：

<!-- 图片画廊容器 -->
<div class="gallery-wrap">
    <?php foreach ($list as $k): ?>
        <a data-fancybox="gallery" href="<?php echo base_url('TL_PHOTOS/' . $ip . '/' . $k); ?>" >
            <img src="<?php echo base_url('TL_PHOTOS/' . $ip . '/' . $k); ?>" 
                 class="img-thumbnail" 
                 width="250" height="250" 
                 style="padding:25px;">
        </a>
    <?php endforeach; ?>
</div>

<!-- 分页链接区域 -->
<div class="pagination-bar mt-4">
    <?php echo $pagination; ?>
</div>

几个关键提示： #

• 我把你原来的相对路径换成了base_url()生成的绝对路径，避免页面跳转后路径出错的问题。
• 分页的样式可以通过CSS调整.pagination类的样式，适配你的页面设计。
• 如果你的图片数据存在数据库里，只需要把get_total_images和get_paginated_images改成数据库查询逻辑即可：用$this->db->count_all_results()统计总数，用limit()和offset()获取分页数据。

3. 可选：滚动懒加载拓展（如果需要） #

如果你想要的是滚动到底部自动加载下一页，而不是点击分页按钮，可以结合jQuery实现：

1. 给分页的下一页链接添加class="next-page"标识，存储下一页的URL。
2. 监听页面滚动事件，当滚动到接近底部时，通过AJAX请求下一页的图片，追加到画廊容器中。
3. 记得重新绑定Fancybox事件，确保新加载的图片也能触发画廊效果。

不过如果是明确的“前后加载”需求，上面的分页按钮方案已经完全够用啦。

内容的提问来源于stack exchange，提问作者Ajzz