加载上一个或下一个图像而不重新加载页面答案

【问题标题】：Load previous or next images without reloading page加载上一个或下一个图像而不重新加载页面
【发布时间】：2021-03-15 19:55:31
【问题描述】：

我正在构建一个简单的画廊系统，主要使用 PHP 和 MySQL。其中一个要求是使用键盘箭头键移动到下一个图像。

执行此操作时，下一个或上一个图像应加载到图像div 中，而无需重新加载整个页面。

显示哪张图片的选择基于 PHP GET，使用如下 URL 结构，其中 273 是数据库中的照片 ID：

/photos/photo.php?id=273

这是存放图像的代码：

<div class='single-image-container'>
    <img src='/photos/" . $row["event_id"] . "/" . $row["filename"] . "' />
</div>

当按下右箭头键时，是否有一种简单的方法可以通过增加 GET 中的值来将下一个图像加载到 div 'single-image-container' 中？图片文件名格式为event_id-id.jpg，即1983-101.jpg、1983-102.jpg等。

目标也是用更新后的 id 更新浏览器 URL。

我对这个有点不知所措，想知道是否有人有一些指示。谢谢。

【问题讨论】：

方法很多，可能是最简单的使用jQuery来改变img src属性，比如here。
看起来不错，但不知道如何获取与正在显示的图像相关的下一张/上一张图像。
您可以在 JS 变量中跟踪当前 ID 或点击 AJAX 目标以获取可以迭代的列表。
您好，您打印所有图像，然后加载页面隐藏所有图像，期望第一张。然后使用下一个/上一个按钮显示所需的图像

标签： javascript php mysql image-gallery

【解决方案1】：

没有没有办法（除了 iframe 巫术）。 Php 是一种服务器端编程语言。如果您想从服务器获取新数据，您必须先重新加载页面。但没问题，有javascript。您可以直接使用 php 加载所有图像，并使用 javascript 隐藏不必要的图像。然后您可以构建自己的控件（这并不难）或从数百个 javascript 滑块库中选择一个。

如果您想自己尝试，这将帮助您： https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/

但是本教程中的滑块不支持键盘。但你可以使用它：addEventListener("keydown", event => https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

如果你想要一个图书馆。我经常使用滑动滑块并且知道它很容易使用。 https://splidejs.com/

【讨论】：

不能结合javascript和PHP吗？所以 javascript 获取下一张图片的请求，然后运行 PHP / MySQL 查询来检查要获取的图片，然后加载它？或者用jquery做这个？首先加载所有图片会很疯狂，因为有些相册会包含数百张图片。
为了更好地理解您的问题：您想要滑块还是灯箱？在一个滑块中，数百张图像真的很难容纳。但也许我误解了你的问题，你实际上想要一个带灯箱的画廊，所以一页上的所有图像，当你点击一个时，它会填满屏幕。你想用箭头键导航吗？通常您可以使用 Javascript 操作 <img> 标签的 src：link（但请不要使用 onclick，您应该始终使用 addeventlistener）
没有灯箱，只有在移动设备上滑动图像的滑块会产生相同的效果来加载下一张图像（类似于 Facebook）。在桌面上，无法察觉到滑块效果。
好的，然后尝试使用 javascript 操作 src 属性。创建一个包含所有链接的 javascript 数组。如果它们发生变化，也许用 PHP 呈现其中的链接是有意义的。然后你可以随时更改 src。如果图像很大，它可能无法顺利运行。然后你可能需要提前加载一些图像。祝你好运！