Bootstrap Image Gallery 灯箱显示来自多个画廊的所有图像。只希望显示特定的画廊图像

Posted 2023-05-08

【中文标题】Bootstrap Image Gallery 灯箱显示来自多个画廊的所有图像。只希望显示特定的画廊图像

【英文标题】：Bootstrap Image Gallery lightbox displaying all images from multiple galleries. Want only specific gallery images displayed

【发布时间】：2014-11-20 20:16:49

【问题描述】：

我已经部分成功地在我的网站上集成了 Bootstrap 图片库 (http://blueimp.github.io/Bootstrap-Image-Gallery/)，但是如果我在一个页面/帖子上有多个画廊，当点击图片并且灯箱打开时，轮播会循环浏览每个画廊的所有图片.我想要的是让灯箱循环浏览被点击的特定画廊的图像。

我可以通过硬编码每个画廊的 html 并设置适当的 ID 等来实现我想要的，但我想使用 Wordpress 画廊小部件来添加画廊并让灯箱正常工作。

我在 Wordpress 上使用了根框架基础主题，并使用了 gallery.php 文件，但无济于事。在gallery.php 文件中有一个roots_gallery 函数，该函数的一部分基于画廊的帖子ID 创建一个div 类ID，然后还有一个特定于该画廊的唯一编号ID。 gallery.php 文件中的代码行如下：

$unique = (get_query_var('page')) ? $instance . '-p' . get_query_var('page'): $instance;
$output = '<div class="gallery gallery-' . $id . '-' . $unique . '">'; 

在同一个gallery.php 文件中有一个roots_attachment_link_class 函数，它使用str_replace 函数来更改每个图库图像的标签以添加一个缩略图类，如下所示：

function roots_attachment_link_class($html) 
  $postid = get_the_ID();
  $html = str_replace('<a', '<a class="thumbnail img-thumbnail"', $html);
  return $html;

add_filter('wp_get_attachment_link', 'roots_attachment_link_class', 10, 1);

为了实现我想要的，我只需要在上面的 str_replace 函数中添加一个 data-gallery 属性，它对应于相同的画廊 ID，如下所示：

$html = str_replace('<a', '<a class="thumbnail img-thumbnail" data-gallery=".blueimp-gallery-[gallery ID], $html);

我可以通过以下方式获取画廊 ID 的第一部分：

$id = get_the_ID();

但我无法获得在roots_gallery 函数中创建的$unique ID 部分。我试过这个：

  $id = get_the_ID();
  static $instance = 0;
  $instance++;
  $unique = (get_query_var('page')) ? $instance . '-p' . get_query_var('page'): $instance;

  $html = str_replace('<a', '<a class="thumbnail img-thumbnail" data-gallery=".blueimp-gallery-' .$id . '-' . $unique . '"', $html);
  return $html;

$instance 部分在roots_gallery 函数中使用，但在这里它为每张图片提供了一个唯一的 ID，这意味着灯箱只显示那一张图片。

我不是专业的 php 编码器，所以这可能是基本的东西，但我现在已经摸不着头脑了，所以非常感谢任何帮助。如果需要，我可以提供完整的gallery.php 文件。

谢谢

【参考方案1】：

查看variable scope 上的 PHP 手册。您可能会幸运地将$instance 保存到一个新的全局变量中，然后您可以在锚标记中的roots_attachment_link_class() 中引用该变量。

【参考方案2】：

认为我已经破解了它，感谢 cfx 为我指明了正确的方向。确实相当简单，但在我有限的编码经验中，我倾向于远离全局变量，但这正是我需要的。

我在roots_gallery 函数中将$unique 变量设为全局变量，然后在roots_attachment_link_class() 函数中引用它。

在roots_gallery:

global $unique; 
$unique = (get_query_var('page')) ? $instance . '-p' . get_query_var('page'): $instance; 

在roots_attachment_link_class():

global $unique;

$html = str_replace('<a', '<a class="thumbnail img-thumbnail" data-gallery=".blueimp-gallery-' .$id . '-' . $unique . '"', $html);
return $html;

无论如何，到目前为止似乎都在按我的意愿工作。

干杯