如何使用php jquery ajax从文件夹加载更多图像

Question

我有多个文件夹，所有文件夹中最多包含20张图像。 在我的html页面中，我想显示前5张图像并显示单击以查看更多15张图像，当用户单击该链接时，它将显示下15张图像

但直到现在我一次只能获取所有图像，这是我的代码

     <?php
    $dirname = "img/outlets/".$service_type."/".  $outlet_name ."/snaps/";
    $images = glob($dirname."*.jpg");
    foreach($images as $image)
   {
     ?>
   <a href="<?php echo $image ?>" class="imageHover">
   <img src="<?php echo $image ?>" class="img-responsive" />
   </a>
   <?php 
   } 
     ?>

Answer 1

很抱歉没有提供全部支持，但是我认为您应该询问或研究“分页”。 您要问的是分页的定义。

实际上，您在问：“如何执行分页？”

http://codular.com/implementing-pagination

http://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928

这是一些代码，您可以尝试实现简单的分页

try {

// Find out how many items are in the table
$total = $dbh->query('
    SELECT
        COUNT(*)
    FROM
        table
')->fetchColumn();

// How many items to list per page
$limit = 20;

// How many pages will there be
$pages = ceil($total / $limit);

// What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
    'options' => array(
        'default'   => 1,
        'min_range' => 1,
    ),
)));

// Calculate the offset for the query
$offset = ($page - 1)  * $limit;

// Some information to display to the user
$start = $offset + 1;
$end = min(($offset + $limit), $total);

// The "back" link
$prevlink = ($page > 1) ? '<a href="?page=1" title="First page">&laquo;</a> <a href="?page=' . ($page - 1) . '" title="Previous page">&lsaquo;</a>' : '<span class="disabled">&laquo;</span> <span class="disabled">&lsaquo;</span>';

// The "forward" link
$nextlink = ($page < $pages) ? '<a href="?page=' . ($page + 1) . '" title="Next page">&rsaquo;</a> <a href="?page=' . $pages . '" title="Last page">&raquo;</a>' : '<span class="disabled">&rsaquo;</span> <span class="disabled">&raquo;</span>';

// Display the paging information
echo '<div id="paging"><p>', $prevlink, ' Page ', $page, ' of ', $pages, ' pages, displaying ', $start, '-', $end, ' of ', $total, ' results ', $nextlink, ' </p></div>';

// Prepare the paged query
$stmt = $dbh->prepare('
    SELECT
        *
    FROM
        table
    ORDER BY
        name
    LIMIT
        :limit
    OFFSET
        :offset
');

// Bind the query params
$stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();

// Do we have any results?
if ($stmt->rowCount() > 0) {
    // Define how we want to fetch the results
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $iterator = new IteratorIterator($stmt);

    // Display the results
    foreach ($iterator as $row) {
        echo '<p>', $row['name'], '</p>';
    }

} else {
    echo '<p>No results could be displayed.</p>';
}

} catch (Exception $e) {
echo '<p>', $e->getMessage(), '</p>';
}

简单的PHP分页脚本

Answer 2

如果我对您的理解正确，则希望第一页显示5张图像。 然后，在单击链接后，您希望同一页面显示剩余的图像（从5开始直到文件夹中的图像数量–在您的情况下可能是20）。

为了清楚起见，我有点冗长。 我还让您按照代码的指定回显了文件路径，但是想必您想将它们转换为URL。 我留给你。

尝试这样的事情：

<?php 

$dirname = "img/outlets/".$service_type."/".  $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");

$initial_images = 5; // However many you want to display on the inital load

// Get the starting image and the end image array keys
if($_GET['show_all_images']){ // Check the the browser sent a query parameter
    // We've been asked to display more

    // Get the array index of the first image. Remember that arrays start at 0, so subtract 1
    $first_image_index = $initial_images - 1; 

    // Get the array index of the last image
    $last_image_index = count($images);
}
else{
    // We're on the inital load

    $first_image_index = 0;
    $last_image_index = $initial_images - 1;
}

// Iterate the glob using for. We want to specify an array key, so it's easier here to use for rather than foreach (which is the right solution most of the time)
for ($i=$first_image_index; $i < $last_image_index; $i++):?>

    <a href="<?php echo $images[$i] ?>" class="imageHover">
    <img src="<?php echo $images[$i] ?>" class="img-responsive" />
    </a>

<?php endfor;?>

    <?php if($_GET['show_all_images']): // Display a 'show less' link?>
    <a href="?">Show less</a>
<?php else: ?>
    <a href="?show_all_images=true">Show more</a>
<?php endif; ?>

Answer 3

一种简单的方法是将图像命名为以索引结尾。 示例为img_1。

然后，当用户单击“查看更多”时，可以使用ajax提取最后15张图像。

但是这种方法是非常基本的并且不能扩展。 正如其他答案所建议的，您可以将分页与索引图像名称方法混合使用