Galleriffic Scale Images – A Quick Hack (jQuery)

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.

11 thoughts on “Galleriffic Scale Images – A Quick Hack (jQuery)”

  1. works only if the image is already in cache, otherwise you get NaN for image.width & image.height as they haven’t downloaded yet..

  2. 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.

  3. Lysender – did you update your script to avoid first image not displaying / no displaying correctly?

    Thanks. Al

  4. @Alistair – actually no. I don’t work on that project anymore and have no time investigating about the issue.

  5. My solution is to use CSS.

    In galleriffic.css, add width: 100% to the rules for div.slideshow img

    In order to prevent the image from being blown up beyond its original dimensions, open jquery.galleiffic.js, find the following:

    .click(function(e) {
    gallery.clickHandler(e, this);

    and add this line beneath it

    newSlide.find('img').css('max-width', imageData.image.width);

  6. @ 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:

    <a href="#1" title rel="nofollow">

    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

  7. once again the code without the chevrons hoping it will show up this time:

    <div class="slideshow-container">
    <div id="slideshow" class="slideshow">
    <span class="image-wrapper current" style="opacity: 1;">
    <a class="advance-link" title="" href="#6" rel="history">
    <img alt="" src="img/fit002.jpg">
  8. 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.

  9. … 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.

Leave a reply

Your email address will not be published. Required fields are marked *