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
preloadRecursive and 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.
works only if the image is already in cache, otherwise you get NaN for image.width & image.height as they haven’t downloaded yet..
In my case, it should be cached already since they are displayed on thumbnails already.
However, there are instances where the first image is not displayed or not displayed properly. This could be the culprit.
Thanks for the heads up.
Lysender – did you update your script to avoid first image not displaying / no displaying correctly?
Thanks. Al
@Alistair – actually no. I don’t work on that project anymore and have no time investigating about the issue.
My solution is to use CSS.
In galleriffic.css, add
width: 100%to the rules fordiv.slideshow imgIn order to prevent the image from being blown up beyond its original dimensions, open jquery.galleiffic.js, find the following:
newSlide.find('a')
.append(imageData.image)
.click(function(e) {
gallery.clickHandler(e, this);
});
and add this line beneath it
newSlide.find('img').css('max-width', imageData.image.width);
@ Chris
I like your CSS solution and the scaling works totally fine. Nevertheless I got a little problem. There are two quotation marks in the code most likely created by jquery.galleriffic.js They cause the images to drop deep down below the navigation.
They are not visible in FireBug but I can see them in Safari Web Inspector.
Here is like my relevant code looks like in Safari Web Inspector:
Any idea how to get rid of these quotation marks?
I am almost there but stuck with these little f___ers!!!
Any help apreciated.
Ah, I did not do any changes to jquery.galleriffic.js
Thanks, Peter
once again the code without the chevrons hoping it will show up this time:
got it! had to delete some unused title”” from jquery
the only thing that seems not to work anymore is that I can’t click on the image to go to the next one. Only the navigation buttons still work.
… and here we are. Thanks to my not-understanding of the jquery code it took that long.
Eventually it was only a ” ” too much that caused the quotation marks.
Now everything works fine as it should.
Good thing it works now for you.