jqueryblueimpjquery-lazyload

Blueimp Gallery - Thumbnail Indicator Issue


I use the jQuery version of blueimp gallery. I use Lazy Load on the slideshow page to load the thumbnails as the user scrolls. Since all thumbnails are not loaded at the initial page load and thumbnails below the fold won't display at the blueimp gallery's thumbnail indicator, I set data-thumbnail attribute on the link tags like this:

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

However, it still seems to try to load the thumbnail from src attribute of the image tag, which is the placeholder image set by Lazy Load.

Am I doing it right?


Solution

  • This actually involves changing the blueimp Gallery script itself. The changes are as below:

    --- 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 + '")';
                 }
    

    And then propagating this change to any minified files.