Blueimp Gallery - 缩略图指示器问题

Question

我使用 blueimp gallery 的 jQuery 版本。我在幻灯片页面上使用延迟加载来在用户滚动时加载缩略图。由于在初始页面加载时并未加载所有缩略图，并且折叠下方的缩略图不会显示在 blueimp 画廊的缩略图指示器中，因此我在 link 标签上设置了 data-thumbnail 属性，如下所示：

<a href="photos/1-full.jpg" data-thumbnail="photos/1-thumb.jpg">
  <img data-original="photos/1-thumb.jpg" alt="Image 1" />
</a>

不过，它似乎仍然试图从 image 标签的 src 属性加载缩略图，这是 Lazy Load 设置的占位符图像。

我做的对吗？

Answer 1

这实际上涉及更改 blueimp Gallery 脚本本身。变化如下：

--- a/js/blueimp-gallery-indicator.js
+++ b/js/blueimp-gallery-indicator.js
@@ -58,10 +58,10 @@
                 thumbnail;
             if (this.options.thumbnailIndicators) {
                 thumbnail = obj.getElementsByTagName && $(obj).find('img')[0];
-                if (thumbnail) {
-                    thumbnailUrl = thumbnail.src;
-                } else if (thumbnailProperty) {
+                if (thumbnailProperty) {
                     thumbnailUrl = this.getItemProperty(obj, thumbnailProperty);
+                } else if (thumbnail) {
+                    thumbnailUrl = thumbnail.src;
                 }
                 if (thumbnailUrl) {
                     indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")';
             }

然后将此更改传播到任何缩小的文件。

Blueimp Gallery - 缩略图指示器问题

Blueimp Gallery - Thumbnail Indicator Issue

jquery

blueimp

jquery-lazyload