Question

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

我可以通过对每个图库的HTML进行硬编码并设置适当的ID等来实现我想要的效果，但我希望使用Wordpress图库窗口小部件来添加图库和灯箱才能正常工作。

我在Wordpress上使用root框架基础主题并且使用了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);

要实现我想要的功能，我只需要在上面的data-gallery函数中添加str_replace属性，该属性对应于相同的图库ID，如下所示：

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

我可以使用以下方式获取图库ID的第一部分：

$id = get_the_ID();

但我无法获得$unique功能中创建的roots_gallery 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文件。

由于

Answer 1

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

Answer 2

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

我在$unique函数中将roots_gallery变量设为全局变量，然后在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;

无论如何，似乎按我的意愿工作。

干杯

Bootstrap Image Gallery灯箱显示来自多个图库的所有图像。只想显示特定的图库图像

2 个答案: