Reflections are all the buzz right now, if you don’t have reflections, you’re just not cool, and if you do have reflections, you’re just plain stupid for making out like everyone else… hehe…

Eitherway i’m a huge reflections addict — yes i admit it, i’m an addict — and i tend to use them a bit to much even sometimes, even in webdesign :D

This brings us to an awesome javascript which generates reflections for images on the fly, many of you (two people who’ll read this… lol) already know all about Cow’s reflection.js script. The one thing i’ve wanted from it tho, is being able to set fixed height reflections, rather than the reflections being X% the height of the image in question.

Hence i spent this afternoon haxx0ring reflection.js to add a rheightpx option, which with a little logic, you’ll figure what it does ;)… while i was at it, i also added a rgap option which puts a gap of X pixels between the image and the reflection.

As for bugs, well, the rheightpx option works fine in all browsers except Opera, which for reasons thats completely beyond my understanding, causes some very weird effects… after 2 hours of testing and messing around, i can’t find any reason for why it does it, but maybe Cow will know, and hopefully he’ll implement my changes into his script *hint* :D

Also, the rgap option is a bit sketchy between browsers unfortunately :P

Download:
reflectionpx1.6.1zipimage

And if you’re wondering about what you could possibly use a fixed height for, check this…

librarious bookcase view

…which is the main reason i put effort into this modification today :D

5 Responses to “reflection.js modification… fixed height… hehehe”

  1. sxtxixtxcxh Says:

    btw: that bookcase view for lib.rario.us is still in the works (as is the entire site, but the bookcase is still in a very early stage of development).

  2. Nicolas Morel Says:

    Hello Jim,

    I’m Nicolas.

    I work for a web hosting company and I noticed this image script reflection.js. I’d like to contact you or your friend Khlo about this script, as we are used to inform our customers about interesting applications from the open sourcre scene.

    How could I contact you or him n private about this?

    Looking forward reading from you,

    Best regards,

    Nicolas Morel

  3. Ron J Roy Says:

    I am looking to add rounded_corners_lite.inc to a that has three images and uses reflection.js. The problem is 2 fold. First, I am not well versed in javascript and second, I have spent hours reading and trying to fix the window.onload situation arising from two scripts on one page. Here is my problem: I don’t know how to actually determine the location of this in each script and the many examples of how to work around this has my head spinning. Is there any possible simplified way of understanding how the fix really works? I would be willing to send you all the script if you would be kind enough to assist. Thank you, Ron

  4. Udi Says:

    Hi,

    I am trying to create a reflected image that is in
    an html anchor that has 1px border.
    the img is reflected without the border, which is great
    but it is aligned to the left and thus is 2px short
    (1px for left and 1px for right border)
    i would like to center the result so that the border
    will be on the original and the reflect will be borderless and centered.

    is that possible?

  5. jimeh Says:

    Hey Udi, what you’re trying to do get’s slightly complicated. But you can try styling the canvas element to position it relatively to get it where you want :)

Leave a Reply