Question

我正在使用Swipebox插件构建自定义图像/视频库，但我只需要一个图像/视频计数器，现有的Swipebox脚本无法提供。

我希望图像/视频计数器与您在悬停时可以看到的PREV按钮结合使用。

我没有小提琴，因为我有更多的css和脚本分开制作，并且不知道它是否会像小提琴一样工作。

Here is the link并忽略开头用于测试所有内容的大缩略图，但我没有计数器脚本。

任何人都可以帮助我，这一定非常容易。

从jquery.swipebox.js脚本中，您可以看到计数器的位置：

<footer id="swipebox-bottom-bar">\
  <ul>\
    <li><a href="#" id="swipebox-prev" class="prev"><span>1/5</span></a>
    </li>\
    <li><a href="#" id="swipebox-next">Next</a>
    </li>\
  </ul>\
</footer>\

Answer 1

最简单的方法是直接在插件代码中进行更改，因为您需要的所有信息都已存在。

我做的是

更改了HTML模板，为计数器添加新ID。这些ID将用作持有者。

<footer id="swipebox-bottom-bar">\
  <ul>\
    <li>
       <a href="#" id="swipebox-prev" class="prev">
         <span>
           <span id="swipebox-current-slide"></span>/
           <span id="swipebox-all-slides"></span>
         </span>
      </a>
    </li>\
    <li><a href="#" id="swipebox-next">Next</a></li>\
  </ul>\
</footer>\

在方法内的 build 函数中添加以下行以显示总幻灯片数

$('#swipebox-all-slides').text(elements.length);

注意：在html附加到正文

后添加

在方法内的 setSlide 函数中添加以下行以更改活动幻灯片编号

$('#swipebox-current-slide').text(index + 1);

您可以在删除上一个/下一个按钮中已禁用类的行之后添加它。

You can test it here（小提琴中的链接是外部的;当页面改变时它们会刹车）

jQuery swipebox插件中的图库图像计数器

1 个答案: