jQThumb v2.3.4

Welcome to jQThumb Official Demo Page.

This is a jQuery & Zepto plugin that creates thumbnails from images proportionally and also a fallback for background-size in older browsers. As many of you may know that "background-size: cover;" would solve most of the major issues when dealing with thumbnails. But background-size: cover; does not work in older browsers like IE6, 7 and 8 therefore this is one of the reasons why this plugin was built.

Ever wonder how to support full-width billboard in older browsers that works the same as modern browser? This plugin helps exactly in this. Never assume this plugin only generates thumbnails, in fact this works perfectly with big images like billboards. On top of that, the plugin also comes with lazy-load feature.

$('img').jqthumb({
    classname      : 'jqthumb',             // class name. DEFUALT IS jqthumb
    width          : '100%',                // new image width after cropping. DEFAULT IS 100px.
    height         : '100%',                // new image height after cropping. DEFAULT IS 100px.
    position       : {
        x : '50%',                          // x position of the image. DEFAULT is 50%. 50% also means centerize the image.
        y : '50%'                           // y position of the image. DEFAULT is 50%. 50% also means centerize the image.
    },
    source         : 'src',                 // to specify the image source attribute. DEFAULT IS src.
    show           : false,                 // TRUE = show immediately after processing. FALSE = do not show it. DEFAULT IS TRUE.
    renderPosition : 'before',              // available: "before" and "after".
    onDemand       : false,                 // TRUE = load image only when scolling position has reached the DOM
    onDemandEvent  : 'scroll',              // available: "scroll", "click", "mouseenter". DEFAULT IS "scroll"
    threshold      : 0,                     // used when "onDemand" is set to true AND "onDemandEvent" is set to "scroll". Eg. Start loading the image 200px before scolling position reaches the DOM. DEFUALT IS 0
    responsive     : 20,                    // used by older browsers only. 0 to disable. DEFAULT IS 20
    zoom           : 1,                     // zoom the output, 2 would double of the actual image size. DEFAULT IS 1
    method         : 'auto',                // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto
    reinit         : true,                  // TRUE = to re-init when images is re-initialized for the second time. FALSE = nothing would happen.
    error          : function(dom, imgUrl){ // callback on error, returns image url
        console.log(dom, ' with its url "' + imgUrl + '" is invalid.');
    }
    before         : function(oriImage){    // callback before each image starts processing.
        alert("I'm about to start processing now...");
    },
    after          : function(imgObj){      // callback when each image is cropped.
        console.log(imgObj);
    },
    done           : function(imgArray){    // callback when all images are cropped.
        for(i in imgArray){
            $(imgArray[i]).fadeIn();
        }
    }
});

Support or Contact

Found a bug or you have any suggestions? Please do not hesitate to create issues here. I will get back to you as soon as possible.

Demo

Before processing...

It is now a square shape!