I think i should share these - Using bootstrap spinner as loader image and also initially setting the ad image to show blurry thumbnail image while the large image is being loaded

Mar 5, 2014 at 2:57 PM
Firstly, i would like to commend this project, its just awesome!
Am using this project in my application in which i use it in displaying quite large images.
The current scenario is to have the loader show on a white blank space while the main image is loaded which wasn't suitable in my case as i would want the user to see something while the large is being loaded (just like the way pinterest and so on does it). So what i did was to edit the jquery.ad-gallery.js file a bit to suit my situation...below is a snippet of where i made changes.

First thing i did was to edit the _createImageData function

var large_img = image_src.replace("/short/", "/large/");
return { thumb_link: thumb_link, image_large: large_img, image: image_src, error: false, preloaded: false, desc: desc, title: title, size: false, link: link };

What i did above is that..my two image links are similar with same names just in a different folder namesly "short" and "large"...short is the folder for the thumbs while large is for the large image. So i just created a variable for my large image by using the replace function and then add to the variables returned.

Secondly, was to edit the showImage function
showImage: function(index, callback) {
      if(this.images[index] && !this.in_transition && index != this.current_index) {
        var context = this;
        var image = this.images[index];
        this.in_transition = true;
        if(!image.preloaded) {
          this.loading(true);
          //if img is not loaded yet, temporarily show the small image using the _showWhenLoaded by passing a param to show d small img
          context._showWhenLoaded(index, callback, 'small');
          this.preloadImage(index, function() {
            context.loading(false);
            //now replace the small image with the loaded large image
            context._showWhenLoaded(index, callback, 'large');
          });
        } else {
          this._showWhenLoaded(index, callback, 'large');
        };
      };
    },
I made some explanatory comment in the snippet, I just edit the _showWhenLoaded function to accept an extra parameter of either small or large to either show the small or large image

Then in the _showWhenLoaded: function(index, callback, imgsizeType) i just added the below snippet
if(imgsizeType=='small'){
            var img = $(new Image()).attr('src', image.image);
        } else if(imgsizeType=='large'){
            var img = $(new Image()).attr('src', image.image_large);
        }
and in the preloadImage i also added this
//img.attr('src', image.image); //replace with the one below
img.attr('src', image.image_large);
Thats basically all!
Please note that my thumbnail images are already dynamically loaded and then injected to a constructed ad-gallery html structure so ad-gallery isn't loading my thumbnails. I have already loaded my thumb images using jquery load() and then constructed ad-gallery html structure and then initiating the ad-gallery.

Its pretty simple and also hacky but it serves it purpose.
Just thot of sharing.