Forgive me for I have sinned. I have edited the jQuery gallerific plugin to give me the scaling of image capability. Below are the code changes that I made. I found out that I need to put in on two locations so here we go.
According to the source code, the jQuery galleriffic that I’m using is version 2.0. I need a feature that scales the image into uniform width and that the height will adjust accordingly based on the original dimension. Applying a simple Math from the basic formula:
orig_width x orig_height : new_width x new_height
and that new_width is given, the final formula is:
new_height = (orig_height * new_width) / orig_width
So here is the code changes. We need to add codes to the methods
refresh with the code that looks like these:
(Note: This is a quick hack, so code quality does not matter. You can optimize or refactor later).
// search for the instance of this code var image = new Image(); // and below it looks like these: image.alt = imageData.title; image.src = imageData.slideUrl; // Now add these to scale the image var origWidth = image.width; var origHeight = image.height; var newWidth = this.scaleWidth; var newHeight = parseInt((parseInt(origHeight) * parseInt(newWidth) / parseInt(origWidth))); image.height = newHeight; image.width = newWidth;
That’s it, remember that it is located in two locations. You can refactor them of course so that there will be only one function call perhaps, or whatever.