我已经集成了Bootstrap图像库(http://blueimp.github.io/Bootstrap-Image-Gallery/)在我的网站上部分成功,然而,如果我在一个页面/帖子上有多个画廊,当点击图像并打开灯箱时,旋转木马会循环浏览每个画廊的所有图像。我想要的是灯箱只在点击的特定图库的图像中循环。
我可以通过为每个库硬编码HTML并设置适当的ID等来实现我想要的,但我想使用Wordpress库小部件来添加库,并使灯箱正常工作。
我在Wordpress上使用了基于根框架的主题,并使用了gallery.php文件,但没有用。在gallery.php
文件中,有一个roots_gallery
函数,该函数的一部分基于库的post 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
文件。
感谢
查看PHP关于变量作用域的手册。您可能会幸运地将$instance
保存到一个新的全局变量中,然后可以在锚标记的roots_attachment_link_class()
中引用该全局变量。
我想我已经破解了它,感谢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;
到目前为止,似乎正在按我的意愿工作。
干杯