jquery - 获取 ColorBox 中的当前项目编号

Question

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

Answer 1

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

var currentImageNumber = $.colorbox.element().index();

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

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

请注意，这一切都是在插件之外完成的。为了让它变得超酷，只需 fork 插件并在研究了元素current和index的使用后实施更改。

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,
});