Question

默认情况下，当您为项目组打开ColorBox弹出窗口时，它会显示整个组中当前项目的数量以及项目总数。如何在客户端获得这些价值？

Answer 1

根据您的配置，您可以（通常）获取当前显示图像的索引号（从0开始），如下所示：

var currentImageNumber = $ .colorbox.element（）。index（）;

要获取当前显示在颜色框中的图像数量（假设您正在显示组图像，例如Colorbox网站中的examples），您可以使用以下内容句：

var imagesGroupLength = $ .colorbox.element（）。siblings（）。length + 1;

请记住在某处存储（缓存）这些值以减少计算时间。

Answer 2

您的问题很有趣 - 这些值（收集中的总数，当前显示的项目的实例编号）已经客户端 - 除非您在服务器上执行ColorBox插件。

以下思路基于ColorBox网站中使用的第一个示例，这是一个非常简单易用的案例。您的情况可能有所不同。

收集尺寸

轻松完成如下操作，其中“。group1”是资产的集合，console.log包含在验证中。

var a = $('.group1').length;
console.log(a);

获得显示实例的数量

使用与先前案例中使用的相同的测试设置轻松完成如下操作。

$('.group1').on( 'click', function () {
  var h = $(this).attr('href');
  console.log(h);
});

Var“h”包含一个href，然后您将遍历该集合以查找具有该href的条目。

请注意，还有其他（更好！）方法可以做到这一点。例如，如果集合中的每个项目都有一个ID，那么您可以简单地说

var h = this.id

请注意，这都是在插件外部完成的。为了使其更酷，只需分析插件并在研究元素当前和索引元素的使用后实施更改。

Answer 3

在此设置中，我使用jquery-colorbox@1.6.4（请参见a-image的用法）：

<ul class="image-set">
  <li>
    <img src="img url here">
    <a href="img url here too" class="d-none a-image" title="img name"></a>
  </li>
  ... other <li> items ...
</ul>

我有此代码获取当前颜色框的当前项目编号：

$(window).on('resize orientationchange', () => {
    $.colorbox.close();
    console.log('current colorbox item number:\n', $('.a-image').index($.colorbox.element()));
});

我的答案是（我确切地指出了可以得到当前商品编号的工作代码）：

$('.a-image').index($.colorbox.element())

其中$('.a-image')是用于将颜色框初始化为例如针对我的情况：

this.colorbox = $('.a-image').colorbox({
  rel: 'a-image', open: false, maxWidth: '100%', maxHeight: '100%',
  slideshow: true, slideshowAuto: false, slideshowSpeed: 2000,
});

获取ColorBox中的当前项目编号

3 个答案: