Reflection.js for mootools

Reflection.js for jQuery

Version: 1.11
Category: jQuery Javascripts

Introduction

This is an improved version of the reflection.js script rewritten for the jQuery javascript library. It allows you to add instant reflection effects to your images in modern browsers, in less than 2 KB.

Demo

BlocksiMac

Arthur in the garden

Features

Compared to the original reflection.js, this script has the following added features:

Performance

Like the original reflection.js, this script is much faster than the script.aculo.us Reflector script (which is not suited for production use), because it does not create a large number of image zones (one for each pixel line). Instead, it uses the canvas tag available in most modern browsers, and DirectX image transformation filters in Internet Explorer, so the reflection image is drawn natively in one step.

Compatibility

This script works in all browsers supporting the canvas tag: Firefox 1.5+, Opera 9+, Safari 2+, Camino, Google Chrome and Internet Explorer 9+. It also works in Internet Explorer 6-8 by using an alternative drawing technique.

In older browsers, the script will degrade automatically (the images will remain untouched).

WARNING
Firefox 2.0.0.10 broke the canvas.drawImage() javascript function and therefore this particular version does not work with this script. Firefox 2.0.0.11 and more recent will work.

It works with all image formats, but reflections of animated GIFs will not be animated: the first frame will be used for the reflection. There is no way to make a dynamic animated reflection for GIF images using javascript.

Requirements

Reflection.js for jQuery (obviously) requires the jQuery library, version 1.2.3 or more recent.

Usage

Setup

Just include the script in the header of your page, after the inclusion of the jQuery library:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>

Adding reflections

Reflections can be added to any image tag over any kind of background (even image backgrounds!). There are two ways of adding a reflection:

1) Using HTML, by applying a CSS class named “reflect” to your images:

<img src="test.jpg" alt="" class="reflect" />

This will use the default reflection parameters (see below). You can apply multiple classes to an image (separated by spaces), the script will detect if “reflect” is one of them.

2) Using javascript, by calling the reflect() method on a jQuery selector. Examples:

$("#photo1").reflect(options);

or

$("#gallery img").reflect(options);

“options” is an optional argument similar to the other options arguments in jQuery. The following options are available:

If you call this method more than once for the same image, the previous reflection will be automatically replaced by the new one.

Important: If you use javascript to add the reflection effect, you can call these methods either as soon as the DOM is ready (using the jQuery function) or by placing the call directly in a javascript block below the image you want to reflect. You don’t need to delay the call after the window “load” event. Your images will appear reflected as soon as they complete loading, even if they were not fully loaded when the javascript method was called. This is the main difference between this script and the original reflection.js.

Removing reflections

You can remove a reflection using javascript, by calling the unreflect() method on a jQuery selector. Example:

$("#photo1").unreflect();

CSS limitations

When adding the reflection effect, the script wraps the image inside a <div> block and adds the reflection to the same block, just below the original image. The class and style attributes of the image will be set blank and applied to the div instead, so the whole block will show like the original image. This operation is reverted when removing the reflection.

This means that you can style the mirrored images using CSS classes and using their style attribute, but you can not style the img tag directly.

For example, when reflected, the following image will not display properly because it is using a CSS rule mentioning the img tag:

CSS:

#content img {
   float: left;
   margin: 20px;
}

HTML:

<img src="..." alt="" class="reflect" />

Instead, you must use a CSS class without referring to the img tag (or use the style attribute) and it will display like expected:

CSS:

#content .leftimage {
   float: left;
   margin: 20px;
}

HTML:

<img src="..." alt="" class="leftimage reflect" />

Also, the reflection will display properly with block-style images, but not with inline-style images. If you apply it to an inline-style image, it will be transformed to a block-style image. Most websites use only block-style images, so it should not be a problem.

Finally, you must not specify the height of the reflected image using a CSS class or style property, because the height will increase when the reflection will be applied. Set the width and height attributes on the <img> tag instead if you want to (it’s optional).

Download

Reflection.js for jQuery is free software released under MIT License.
If you like it, talk about it and promote it by linking to this page.

reflection-jquery.zip [2.90KB]
Reflection.js for jQuery v1.11
Last updated: 07/05/2013 23:52
Downloads: 33152

Changelog

v1.11 (2013-05-08)

v1.1 (2011-05-25)

v1.03 (2009-11-21)

v1.02 (2008-12-17)

v1.01 (2008-12-16)

v1.0 (2008-12-15)


Your opinion about this software?

  1. Looks very handy! Thanks for sharing.


    Rob    16/12/2008 09:30    #
  2. Great, really useful as it degrades nicely in old browsers.
    Thanks!!


    Rob    16/12/2008 09:44    #
  3. Lovely!
    However I am wondering if it is possible to add a small space fe. 2px between the picture and its reflection. Designwise this would look more natural.
    Cheers, Dick


    — Dick Dekker    16/12/2008 21:32    #
  4. Hello Dick,

    Thank you for your suggestion. In the new release I’ve just uploaded, the “reflected” class is applied to the img tag when the image is reflected. So, you can add a 2px space between the image and reflection by adding the following rule to your CSS:

    img.reflected {
    margin-bottom: 2px;
    }

    However if you do this, the reflection will be truncated by 2px at the bottom because the total height of the box is fixed to be: image height + reflection height. The height of the box must be fixed to prevent a problem with Internet Explorer: a huge margin taking up space at the bottom of the reflection.


    Christophe Beyls    17/12/2008 01:41    #
  5. Looks GREAT in IE 7! Doesn’t seem to work correctly on Chrome. Even your demo page doesn’t render correctly.


    — marvin    19/12/2008 04:35    #
  6. Nope, it works fine in Chrome, at least in the final version (1.0.154.36). Something must be broken in your Chrome browser.


    Christophe Beyls    20/12/2008 05:49    #
  7. Excellent!

    Works great on Chrome, FF2, FF3, IE7, IE8

    I don’t have IE6 to test….


    David Hale    03/01/2009 19:10    #
  8. I’m happy to read that it works in IE8 Beta because I have not tested it (I only test non-beta browsers). I’ve read that Microsoft made some breaking changes regarding opacity emulation in IE8 so I was afraid that these changes could break the reflection effect too.

    I test IE6 (first version) in a virtual machine and it works.


    Christophe Beyls    03/01/2009 23:04    #
  9. I was wondering if there is a known way to overlay some text over the reflected bit. I tried a div with absolute positioning and a negative margin-top, which worked to a degree – the div was indeed placed over the reflection. However, the left edge of the div was aligned with the center of the reflection rather than the entire div being centered with the center of the reflection.

    Tried playing with a few other attributes on the text div (float, relative position, etc) but never found anything that successfully centered text on top of the reflection.

    I’m trying to center the title of the picture over the reflection so that it has a bit more of an “ooh” factor.

    Any ideas how this might be accomplished?

    Or perhaps consider it as an possible future feature of the module to use title=”“ or something to overlay some text while building the reflection area?


    — Imu    08/01/2009 01:42    #
  10. I’m using your cool plugin with jQuery 1.3rc2 and in
    IE7 a transparent png image isn’t displayed properly,
    as a transparent shadow iin the ong image is
    rendered as black area in the reflection.


    — THasmo    13/01/2009 18:19    #
  11. I’m interested in using the script for a site containing thousands of images dynamically stored as jpeg. As all images have been saved with a fixed size of 250×250 pixels, white space has been added to keep proportions. Will it be possible to have the js “remove” the white space so that the reflection is moved towards the object and not only placed under the image (which could be e.g. 50 pix larger than the object).

    Thanks! ;)


    — Nik    31/01/2009 11:47    #
  12. Thanks for this!!


    — Mr AJL    10/02/2009 18:07    #
  13. I am using jcarousel lite, showing 1 image that autoscrolls every 4 seconds or theres a next/prev button. I have 4 images all work great when reflected, but now and again the image looses its reflection, the height stays the same and the white area is still clickable, when it scrolls off to the left it regains it’s reflection.

    $(document).ready( function(){ $(function() { $(”.magwrap img”).reflect({height:0.3,opacity:0.4});
    });

    Any help would be great, else hand code the image sin photoshop.!


    — MarkC    26/02/2009 17:52    #
  14. I’ll try some preload script.
    I did manage to get the reflection showing on all images constantly but the reflection was only 1 px in height.


    — MarkC    27/02/2009 10:13    #
  15. Thank you for a nice script!

    However, it’s not working in Safari 4 Beta (5528.16). At least not for me. I got an empty space below the image, but no reflection. Same code works in other browsers so I guess the code is fine.


    — Mackan    28/02/2009 15:14    #
  16. I used Safari 4 Beta (528.16) under Windows XP and it’s working fine with the latest version of jQuery (1.3.2). See for yourself on this website.


    Christophe Beyls    02/03/2009 23:35    #
  17. Worked like a charm!

    Thanks a ton!


    — Ram    13/03/2009 13:07    #
  18. Hi what do you mean by this sentens “after the inclusion of the jQuery library:” I have download the libary but i don’t know how to include it in my html page. En do i have to define a stylesheet also ?


    — Ranald    28/03/2009 20:57    #
  19. Hey Christophe,

    Thanks for the work on reflections. I am integrating it into a jQuery plugin for a flicker fisheye control. I have one outstanding issue that perhaps you can help with.

    Within a non IE environment you are using a canvas object to create the reflection. Do you know if it is possible to resize a canvas object, like a normal image, without having to render it again. In IE my percentage sizing works fine on the reflection but not in browsers that require the canvas object.

    Any help would be greatly appreciated.

    Cheers
    Keith Chadwick


    Keith Chadwick    11/04/2009 17:11    #
  20. Great plugin dude.

    Ill try it right away.


    RaphaelDDL    14/04/2009 22:03    #
  21. Hello, thanks for this wonderful script!

    I saw in the source code of the reflection.js file that the height is calculated in % .
    is there a way to give a fixed height? 30 px for exemple.


    — Kald    04/05/2009 17:03    #
  22. Thank you for imparting this wonderful scripts to the public. I will use this for my future templates.


    JAKE    12/05/2009 00:39    #
  23. thanks – good script.


    — Shimmy    15/05/2009 14:55    #
  24. Doesn’t seem to work with a border on the image – the border gets removed?

    Reply from the author: no, if you apply a border to an image using a CSS class as explained in the docs, the class will then be applied to the block which wraps both the image and the reflection. So the border will appear around the image and reflection.


    Sam    18/05/2009 19:13    #
  25. Hi,

    IE6 issue when using iepngfix or something like that on transparent image with drop shadow, the iepngfix doesn’t apply on reflection.

    any feedback when the png that has transparent background and drop shadow for example, IE6 issue, where else.

    your comment or direction would be greatly appreciated.

    Reply from the author (25/06/2009): I would say: it's time to upgrade from a 8-years-old browser crippled with bugs. I don't know how pngfix works and I really don't want to spent more time on IE6 issues in 2009. The script works in IE6, it's already a miracle. IE7 and IE8 implement PNG reflections properly.


    — Marijan    05/06/2009 19:26    #
  26. Just download the upgrade to Safari 4 and the reflections has stopped working.

    Safari has implemented -webkit-gradient which can work with images – check out the link here. http://webkit.org/blog/182/css-reflections/

    Would be good to update the reflections script with a browser sniffer and implement the appropriate method for backward compatibility

    Thanks!

    Reply from the author (25/06/2009): I'm using Safari 4.0 (build 530.17), which is the latest current version, under Windows 7 and it works perfectly fine (version 1.02 of the script with jQuery 1.3.2). I'm going to test it on a Mac later this evening. It's probably a Safari bug.
    I don't think it's worth using the new non-standard -webkit-box-reflect CSS property because Webkit already implements the standard canvas tag properly and the canvas rendering is already very fast. The only benefit would be to be able to reflect animated gifs with an animated reflection (maybe?). But I might add it in the future if more browsers implement it.


    — HQ    22/06/2009 13:22    #
  27. Hi, and thank you for this amazing and simple script… :)

    I have a little problem seting it up correctly:
    i installed the version 2, but it moves my content about 10 or 15px right and down, do you have an idea about what that might be?
    I’m using it with the “jquery tools/ Scrollable”: http://www.flowplayer.org/tools/demos/scrollable/navigation.html

    Thanks a lot for your help


    — Reda    23/06/2009 19:59    #
  28. Reda, what browser are you using?

    Are you using a document type of strict?

    Are you using RESET.CSS to set IE back on track?


    — Bob    02/07/2009 16:49    #
  29. Hi again :)

    As I asked before:

    I saw in the source code of the reflection.js file that the height is calculated in % .
    is there a way to give a fixed height in pixel? 30 px for exemple.

    Thanks.


    — Kald    28/07/2009 14:01    #
  30. I’ve got another question. It seems reflection.js get margin, border and padding when parent div have ones. How can avoid reflections to copy/clone css parents attributes?


    — Kald    28/07/2009 15:33    #
  31. Thanks for your plugin. it is working miracles. am planning to intergrate in many of my sites. Thank you.


    Moses    29/07/2009 09:48    #
  32. Very helpfull, but i would like to know if this script work with jquery.carousel3d.js because for me it’s not working.
    However, thank you for this work


    Mary    29/07/2009 16:49    #
  33. Hi great plugin, but i would like to know can u use it in combination with jcarousel plugin. I have tried but without any result.

    Greetz


    Rene    30/07/2009 13:06    #
  34. +1 for adding a caption display over the reflection :)


    — guix    04/08/2009 17:34    #
  35. Userful Tips, and this is used in many site.. thanks of the codes


    Encode Infotech    13/08/2009 12:25    #
  36. Hi,
    If I want to set a link on the reflected image, I get some very odd results. Is this case supported ?

    Thanks


    Gravis    16/08/2009 22:21    #
  37. Is there a way to style a border around the image and have the reflection – reflect the image and border? I have added a class called imagestyle to the img tag along with the reflect class, but it just seems to place a border around the whole thing? am I thinking this is not possible?

    Reply from the author:You can apply a CSS class to the image that will be reflected, for example a class named "foo". Then you can style both the image and the reflection identically using the following CSS rule:

    .foo img, .foo canvas { ... }

    However, if the image is not reflected this CSS rule will have no effect.


    Andrew Minton    13/09/2009 11:33    #
  38. Nice posts there – thank’s for the interesting information.


    Oleg    01/10/2009 00:23    #
  39. Excellent posts, thank’s.


    Gard    01/10/2009 21:52    #
  40. very useful thanks


    — sam    03/10/2009 15:58    #
  41. just the first time i’m downloadind this software. After trying it i will give you my impressions


    — afdome    11/10/2009 19:08    #
  42. Hello everybody,

    first of all, thank you for this amazing light script ;)

    I’d just like to know if it’s possible to always have the same reflection height no matter the height of the image…

    Thanks a lot
    Reda


    — Reda    04/11/2009 14:51    #
  43. nobody got an answer??? :((


    — Reda    17/11/2009 09:58    #
  44. Hello Reda,

    I will add a feature that allows you to specify the height of the reflection in pixels (fixed height) instead of a percentage in a future update before the end of the week.


    Christophe Beyls    18/11/2009 18:04    #
  45. Thank you soooooooo much Christophe, i’m sure you’ll make a thousand of people happy with this new update…
    thank you again.


    — Reda    19/11/2009 10:21    #
  46. Hi, I need to center reflected images, three in one paragraph.
    Any ideas?


    vasava    21/11/2009 20:54    #
  47. Christophe, i don’t know how to thank you ;)
    Cheers


    — Reda    23/11/2009 14:22    #
  48. Hi, sorry to bother you again.
    i’ve just realized that i have a little problem but i cant solve it by myself!
    in the home page http://iifiir.org/new/index-home.php, i have 3 tabs on the online shop, if you click on “comptes-rendus de conférences”, you’ll notice that the reflect doesn’t work properly because the content of this second tab is initially hidden.
    do you know how i can fix this issue??

    Thank you soooo much
    Reda


    — Reda    23/11/2009 15:53    #
  49. Reda,

    You probably have a javascript block which shows the content of the second tab on click. Try to call the reflection using javascript in this javascript block: (”#tab2 img”).reflect({height: 40}); after showing tab2 for example.


    Christophe Beyls    23/11/2009 20:14    #
  50. Thank you for your reply.
    I tried to use a callback function: $(”#nav_fridoc ul”).tabs(”#panes_fridoc > div”, {effect: ‘fade’, onClick: function(event, tabIndex) { $(“img.reflect”).reflect(); }}); as mentioned here: http://flowplayer.org/tools/tabs.html#callbacks but it didn’t work :(

    i can’t use (”#tab2 img”) as you asked me to do coz i don’t have different id for the different tabs :(
    I don’t know if you have noticed that the reflect shown in tabs 2 is the reflection of the original image size!!
    any suggestions a,d/or ideas?


    — Reda    24/11/2009 12:47    #
  51. You should avoid using resized images.
    If you do, you must specify both width and height on the images, not just the width like you do now. Otherwise the script does not know how to resize the images properly.


    Christophe Beyls    24/11/2009 16:38    #
  52. but even in the first tab, the images are resized with only the width and it works fine. the problem is the second tab where reflection doesn’t work well because it’s initially a hidden content.
    is there any other way to fix this issue??
    Thanks once again for your time


    — Reda    25/11/2009 10:59    #
  53. But I just gave you the solution! Add height or resize your images manually! Then it will work in all cases.


    Christophe Beyls    25/11/2009 23:59    #
  54. no, i was talking about making reflection work with a hidden content (tab2), because in some browsers, it doesn’t show any reflect in the elements of tab2. i tried as you said to call reflection after showing tab2, but didn’t manage to make that happen!! any ideas?


    — Reda    26/11/2009 09:58    #
  55. Its So Hard For Me To Use it in my web page


    Antalya Nakliye    30/11/2009 12:31    #
  56. thanks! this is the only reflect.js i could get working in wordpress that also worked correctly on safari/win


    — ian    02/12/2009 16:42    #
  57. Hi
    Is there anyway to control the gradient of the reflection.
    currently mine fades out sharply at the bottom rather than being a smooth fade out over the entire reflection:
    http://img109.imageshack.us/img109/1227/screenshot096.png


    — ian    03/12/2009 11:03    #
  58. If you’re having a problem centering your images properly, try this line of code (replaces line 58 in the javascript file):

    $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: “hidden”, display: “block”, margin: “0px auto”});

    It should center the wrapper in whatever block element its in. So like if you have something like <div style=“text-align: center;”>image here</div> the above code should fix it. :)


    Zoic    08/01/2010 21:08    #
  59. Hi, I’m having problems with image borders. The old version used to display them in IE but not FF. However I can’t get this version to display a border at all!? Any ideas?

    This is the site I’m trying to use it on www.pluraweb.com

    Thank you


    Ben    25/01/2010 16:23    #
  60. Can you show me the css style for this image? I am a newby for CSS.

    Thank you


    — beckmann    25/01/2010 18:45    #
  61. I am looking in the code….

    on line 34 and 36 you have a [0]

    like this line:
    reflection = $(”<canvas />”)0;

    Just curious, why is the [0] needed?

    Thanks, I use the reflection, its great.


    — Eliazer Braun    08/02/2010 15:29    #
  62. Thank you for your job, Christophe.

    All works fine except one thing – can’t set a visible link (border) around the image only (not the reflection). Like regular HTML link. Tried all I could – no luck. Could you advise?


    — Pil    23/02/2010 13:16    #
  63. Hi, Thanks for your great job.

    I’ve got a question for you.
    I use your reflection script on a menu and on hover, the image of the menu is changed. my script works on FF but not on IE and opera.

    my script is:

    $(document).ready(function(){

    $(”#content img”).mouseover( function() { var changeSrc = $(this).attr(“src”); changeSrc = changeSrc.replace(’.menu.png’, ‘’); $(this).attr(“src”, changeSrc + ‘.hover.png’); $(this).reflect({height:200,opacity:0.5}); });

    $(”#content img”).mouseleave( function() { var changeSrc = $(this).attr(“src”); changeSrc = changeSrc.replace(’.hover.png’, ‘’); $(this).attr(“src”, changeSrc + ‘.menu.png’); $(this).reflect({height:200,opacity:0.5}); });

    });

    and HTML

    <div class=“floatLeft” id=“about me”> <a href=”#”><img class=“reflect” src=“moi.menu.png” alt=“moi” /></a> <img style=“display:none;” class=“reflect” src=“moi.hover.png” alt=“moi” /> </div>

    i put the second image “hidden” because it needs to be loaded else the image does not appears a the first hover.

    The problem on IE and Opera is that the images disappears on hover and never come back :/.

    Can you help me?
    Thanks :)


    — Zelf    25/02/2010 03:17    #
  64. Hi,

    it is possible to add this cool feature to the jquery gallery galleriffic (http://www.twospy.com/galleriffic/)? I tried it, but my js knowledge isn’t good enough. It only reflects the thumbnails, but doesn’t work for the big image. Can someone help me?

    Greetz,
    Tim


    Tim    05/03/2010 19:23    #
  65. Hi,

    I’m trying something similar to Tim, except that I’m trying to show the reflections on images pulled up with slimbox2. The thumbnail reflection works fine, but the image pulled up in the lightbox doesn’t show the reflection. Thoughts?


    Stu    05/03/2010 23:10    #
  66. Hi,
    Thanks for this script. Any ideas on how to accomplish the same effect when the image is just a ‘background image’ within the CSS and there is no implicit reference to the image in the actual HTML?
    Cheers.


    Mags    22/04/2010 07:31    #
  67. Works great. Making reflections manually in Fireworks was getting on my nerves! Plugin works fine on IE6 too.

    Thanks for contributing this.


    Professor Cloud    23/04/2010 19:59    #
  68. That is an amaizing script!
    I have no idea how Canvas things work but would it be possible to apply a “skew” on reflection? for example {skew: 30} would mean that the bottom of reflection is skewed right 30px. Negative numbers would skew left.


    — thomaz    18/05/2010 08:29    #
  69. I need some help with this script. I absolutely love it and it works very well…except one thing. In IE8, when you have an <img> surrounded by <a> tags, the picture doesn’t link. It will just give you the normal pointer and when you hover you see that it’s a link but it’s physically not allowing me to click it. I did some investigating with the IE Developer Tools and I stumbled across this interesting way that IE is rendering the code:
    My Code:
    “<div><a href=”#”><img src=”#” class=“reflect”></a></div>”

    The way it’s turning out in IE:
    “<div><a href=”#”><span class=“reflect”><img src=”#” class=“reflected”><img src=”#”></span></a></div>

    Obviously this will be very confusing for the delicate browser, does anybody know a work around for this? It’s very frustrating, and I HAVE to have the image link. I am using the latest JQuery and all of the latest code and still can’t get it. Thanks!


    — Chris    27/05/2010 19:50    #
  70. It would be nice to have a isReflected method to check against before using unreflect.
    Ahh just realized that I can use jQuerySelection.is(’.reflected’);
    nice :)


    — dotnetCarpenter    28/05/2010 12:46    #
  71. You know, it would be really helpful (to me at least) if your demo wasn’t embedded in a compressed JS file so newbies like me could examine the code easier. Is the demo supposed to show off your skillz, or be helpful?


    — Mark L    01/06/2010 01:08    #
  72. @Chris:
    hy, i had got the same problem. i solved it!

    html:
    <a href=”#”> <span><img src=“bild.gif” class=“reflect ropacity33 rheight10”/></span>
    </a>

    css:
    a{ display: inline-block; }
    span{padding: 0px; display: inline-block;}
    img{margin: 0px; padding: 0px;}

    and now you have a link around your image in all browser and you can add a margin in the a-class.

    good luck!


    — kristin    10/06/2010 10:20    #
  73. Very nice plugin, and small as well. For my needs I had to modify the plugin slightly: I removed the inline setting of border to 0 because I needed a border on my image and I positioned the canvas bit absolutely because I needed it to have no layout height in its container (had a glow behind the image positioned absolutely). I also added a border thickness and offset parameter to position the canvas properly relative to the image border and to offset the canvas from the main image, respectively. If you want details on how I did this specifically, feel free to contact me.


    Toby Mackenzie    14/06/2010 15:29    #
  74. Thank you for developing this script and sharing it freely. I am using it with an adaptation I made to better work with hidden layers. In IE7-8 an image inside a hidden layer doesn’t have a width or height, leading to the script messing up.

    Solution:
    Replace “g=c.width,f=c.height” with “ni=new Image();ni.src=c.src;var g=c.width||ni.width,f=c.height||ni.height”

    BTW: Could you please share the non-minified version?


    — Albin Larsson    15/06/2010 20:11    #
  75. What a time saver this is, I was doing it all in photoshop, gave this a try instead and it’s great, need to customise a little to fit in with another module, but so far it’s working wonders, thanks


    Price    19/06/2010 11:19    #
  76. @Kristin

    Doesn’t seem to be working still, but I will try to take an in depth look at it later. I am also using a very large, CMS that was built in house so it tends to be a little odd on accepting some stuff. I already had the HTML setup the way you had pretty much, I added the spans in, and added the CSS in but like I said, I will try it again later, thanks for your help!


    — Chris    21/06/2010 17:44    #
  77. @Mark L: I will share the demo script source as well if you want, It’s just minified to load quicker. So far I shared the source of all my scripts but this one because I did not see the usefulness.

    I think I will publish a small update soon, addressing issues with hidden layers and maybe the clickable issue in IE8 if I can find a fix.


    Christophe Beyls    11/07/2010 14:13    #
  78. This is excellent but I tried implementing it to the Nivo Slider so each image in the slider could have a reflection but it didn’t work and broke the Slider.

    Is it possible to implement the reflection to the Nivo Slider, I’m hoping so.

    Here is where the Nivo Slider can be found…

    http://nivo.dev7studios.com/

    Thanks,

    Mike


    — Mike    27/07/2010 01:11    #
  79. Had a requirement where I need the reflection to be position-based, so I added an option to do so:

    if(options.byPosition) { $(reflection).appendTo(‘body’).css({ position: ‘absolute’, top: $(img).offset().top + $(img).height(), left: $(img).offset().left }); } else { wrapper = $(/^a$/i.test(img.parentNode.tagName) ? “<span />” : “<div />”).insertAfter(img).append([img, reflection])0; wrapper.className = img.className; $.data(img, “reflected”, wrapper.style.cssText = img.style.cssText); $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: “hidden”}); }

    Works great. Thanks for the awesome plugin


    Cody Swann    31/07/2010 22:12    #
  80. See this page: http://lucasxiihk.iblogger.org/2010/08/latidos-de-angel/ the reflection script doesn’t work correctly in Chrome (7.0.503.0 dev), but the original reflections.js works fine D:


    LucasXIIHK    31/08/2010 19:59    #
  81. love love love !!!
    thx thx thx!
    supah dupah great plugin!!!


    — edude    15/09/2010 21:05    #
  82. Did anyone solve the issue with IE and a link and span wrapped around the image?

    e.g. <a href=”#”><span><img src”##” class=“reflect” /><span></a>

    In IE the image isn’t clickable.


    — Andy    27/09/2010 08:45    #
  83. Great script. Thanks


    — Michael    29/09/2010 13:32    #
  84. This is a snip to get up and running, but I have a small problem with the effect that I’m trying to achieve, Any help would be appreciated.
    Basically I have a list of thumbnails, on mousing over each item in the list a featured thumbnail appears. I would like the reflection on this, however often the reflection doesn’t change and I still have the reflection of the previous item. Does that make sense?
    Thanks for your efforts on this and freely sharing such a useful plugin.


    — Andrew    08/10/2010 18:46    #
  85. I didn’t read all the comments so hopefully I’m not reposting, but…

    TO ADD A BORDER TO YOUR IMAGE

    simply put your image in a div and style that div with a background color of whatever border color you want. Then give it padding of however wide your border should be. This worked for me at my gallery.


    Aaron    28/10/2010 08:40    #
  86. I have an issue whenever I use this script with a photo there is a white pin line frame around sides and top. This makes it impossible to use on black background . Any ideas? I tried using the background and pad but it still happens to all the photos.


    — cdickinson66    06/11/2010 03:00    #
  87. Great Script. Would it be possible to extend the library to accept canvas elements in addition to image. I have a canvas object I would like to make reflective. Instead of converting it to an image which then gets converted back to a canvas, I could directly use the canvas element


    Chris    16/11/2010 00:33    #
  88. I added some lines of code to support reflections for images that are scaled using CSS:

    if (options.useLayoutSize) {

    imageWidth = $(img).innerWidth();

    imageHeight = $(img).innerHeight();

    }

    Just add them within the doReflect() function just before calculating the reflectionHeight. (line 2 of the function)

    Great plugin, good work!


    bechte    04/01/2011 15:21    #
  89. Is there a way to have every image in a slide show reflect (cycle.lite.js)? The first one is fine, in the next one (01 below) the image disappears and the reflection snaps to the top of where the image should be. 02 displays as normal without the reflect tag. A working example isn’t live for obvious reasons. Example below:

    <head>
    <script type=“text/javascript”>

    $(function() { $(’#SlideShow’).cycle({ prev: ‘#prev’, next: ‘#next’, timeout: 0, });

    </script>
    </head>

    <body>
    <div class=“MediaIcon02”><a class=“MediaControls” id=“next” href=”#”>►</a></div>

    <div id=“SlideShow” class=“SlideShow-TawneyCommon”>
    <img src=“images/S_TawneyCommon.jpg” class=“reflect” />
    <img src=“images/S_TawneyCommon_stage01.jpg” class=“reflect” />
    <img src=“images/S_TawneyCommon_stage02.jpg” />
    </div>
    </body>

    Any help very much appreciated for what is already a great (and popular!) script.

    Thanks in advance.


    Damian Kemp    30/01/2011 13:48    #
  90. first thanks for sharing this wonderfull script

    on page load this script not working after clicking on refresh then this script is working.

    FF, safari not at all working.

    please any one can help me how to make this script to work


    — Srini    02/02/2011 12:03    #
  91. How to customize reflection size?


    akim    23/02/2011 08:55    #
  92. Wonderful script. Wish you had a Donate button. Anyway, I’ve struggled at length with a very obscure issue: the image I’m trying to create a reflection for is inside an a tag which has the display:none attribute set, as I wish to fade the whole thing in slowly. In IE8, the reflection script fails to add a reflection. In Safari, it forces the image to display immediately (faster than I want it to be shown). So in IE8, I get a nice fade, but without the reflection, while in Safari, I get the opposite, a reflection without the fade.


    Joel Anderson    27/02/2011 01:42    #
  93. You have a lot of useful information for webmasters. Thank you so much that we have the opportunity to come to you and learn many new things! Once again a big thank you!


    Climfort    04/03/2011 23:33    #
  94. I want to apply this to an image being used as a form submit button.

    <input type=“image” src=“button_image.jpg”>

    Since the object is not really a “img” it doesn’t work. I’m hoping you have a suggested workaround or maybe you can add this to the next version of the script. Thank-you!


    — john    14/03/2011 03:56    #
  95. I ended up getting an undesireable result in IE9 so I adjusted this if(a.browser.msie) to this if(a.browser.msie&&a.browser.version.slice(0,1)!=9)


    — Wayne    24/03/2011 20:04    #
  96. I had a problem with alignment, but found the solution, so I post it here, so others don’t need to search for 1 hour, like I did:

    When class=“reflect” is applied to an image, there can be alignment problems with several methods (like margin-left:auto; margin-right:auto; or align=“center” in the above table cell). The solution is to add the following tags to center the image: style=“margin-left:auto; margin-right:auto; display:table-cell;”

    the >display:table-cell< is the most important. Example can be seen here: http://www.buy-hosting.net/hosting-providers/1+and+1-contact-info.html in the 1&1 logo. Feel free to check out the source code.


    Michael    12/04/2011 10:42    #
  97. i have kind of a problem… i made myself a cool rotating galery (looks alot like imageflow, but alot less code) in chrome , mozilla works realy fine – i managed to put easily animations on the canvas, but this does’t work in ie…from the reflection.js code i actualy found out (at least i think i have) that you basicly create an aditional img from the original (as a reflection) and not a canvas like in other browsers…thing is i cannot apply the same animations on this img (resize it like i want it).. do anybody have some sugestions on how to do this? thanks in advance!


    miki stressu    17/04/2011 17:49    #
  98. found a solution for my problem..i just needed to edit the script…inserted a class to the reflected img (and removed the height and width of it)..now i can manage the reflected image like i want it…


    miki stressu    17/04/2011 21:20    #
  99. Wonderful script but anyoane have an ideea how to use this reflection with jqDock?

    Ty


    Fane    02/06/2011 12:55    #
  100. Hi, really nice, but i have a question.
    How can i change the reflection after changing the image? This does not work:

    $(”#photo1”).reflect({height:76,opacity:0.5});

    $(’#change’).click(function(){
    $(”#photo1”).unreflect();
    $(”#photo1”).attr(“src”, “folder2.jpg”);
    $(”#photo1”).reflect({height:76,opacity:0.5});
    });


    — Paradise    26/06/2011 04:27    #
  101. Ok, i got it:
    $(’#change’).click(function(){ $(”#photo1”).attr(“src”, “folder2.jpg”).load(function() { $(this).reflect({height:76,opacity:0.5}); });
    });


    — Paradise    26/06/2011 05:27    #
  102. Further to the comment about webkit browsers not working correctly, I have the same problem in both chrome and safari on both mac and windows 7.

    The reflection is generated in the right place and at the right height but there is no transparency. It works perfectly on all the other browsers I have tested it on though. Any thoughts what might cause this?


    — Sunya    29/06/2011 11:11    #
  103. Why the unreflect() doesn’t remove the reflection?


    — Idan    31/07/2011 12:52    #
  104. When I add the class=“reflect” I can get the default properties, but when I try to change the reflection properties with jquery it doesn’t seem to work as I loose all reflections. Can anyone see what I am missing here?

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <script type=“text/javascript” src=”/Scripts/jquery-1.4.4.js”></script>
    <script type=“text/javascript” src=”/Scripts/reflection.js”></script>

    <script type=“text/javascript”> $(document).ready(function () { $(”#test”).reflect({height: 40}); });
    </script>

    <html xmlns=“http://www.w3.org/1999/xhtml”>
    <head> <title></title>
    </head>
    <body>
    <img id=“test” src=”/images/support/DT.png” />
    </body>
    </html>


    — Justin    04/08/2011 02:19    #
  105. Hi. I have a question. if i am making a reflection on one object like obj.reflection(0.3,0.8), and the i am trying to animate it like this obj.animation({left:”+=50px”},500); other animation works like animate the width it dosen’t work . can someone explain it to me . Thank you


    — virusi    19/08/2011 13:49    #
  106. Hi
    I am using the script : with explorer 9 work well, with firefox 4 one image (from a gallery) not display the reflection. The strange is that only one image not reflect. If you like i will give the link to see the page.
    Thanks


    — ale    15/09/2011 16:53    #
  107. Is there any way to use jQuery to reflect a FULL DIV and NOT an image? It seems like there are a billion and a half image-reflect scripts out there and not a single script for reflecting HTML content. I want to reflect a calendar that changes dynamically every day.


    — Jt    28/10/2011 19:24    #
  108. Not working in IE8 :(


    — Jennifer    24/11/2011 09:28    #
  109. The reflection is not parallel with a skew diagonal image


    — Jennifer    24/11/2011 10:26    #
  110. I have serious problems to make that work in IE7 and IE8. It also seems like there is a space in between the image and the reflection in Firefox, that I cannot remove and I have no clue, where this is coming from. Any hints anyone? Thank you!


    Webdesigner in Berlin    10/12/2011 22:42    #
  111. It’s easy to get this plugin working with jCarousel or jCarouselLite.

    First, create a javascript function for your reflections:

    function jreflect()
    { $(’#copytop ul li img’).reflect( { height: 0.25, opacity: 0.2 });
    }

    Then reference the function to create the initial reflections:

    $(document).ready(function()
    { jreflect();
    });

    Then when you load jcarousel just use itemLoadCallback and onBeforeAnimation to reference the jreflect function:

    $(’#copytop ul’).jcarousel( { animation: 1000, wrap: ‘circular’, itemLoadCallback: { onBeforeAnimation: jreflect } });

    I’ve got it working great.


    — Jason Neal    16/12/2011 20:24    #
  112. Hello There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your useful info. Thanks for the post. I??™ll certainly comeback.


    flash chat room    30/01/2012 14:29    #
  113. prejudice I wanted to use this effect in a reflection of a slideshow jquery that already uses the class to change an image, you can not use a class instead of ID? As I suggested to solve the problem. thanks


    — Tobias    08/02/2012 16:49    #
  114. The download link is not working…


    — Rogério Brum    10/02/2012 11:51    #
  115. Had a strange problem.

    Something like
    <div id=“pageFooterGameBand”>
    <img src=“CUT_IMAGES/game1.jpg” style=“width:125px;” class=“reflect”>
    <img src=“CUT_IMAGES/game2.jpg” style=“width:125px;” class=“reflect”>
    <img src=“CUT_IMAGES/game3.jpg” style=“width:125px;” class=“reflect” >
    </div>

    displays only one image, cant see the other two. Any idea whats going wrong ? This is on FF 10.0.2


    — Alec    22/02/2012 16:00    #
  116. the height and width of it)..now i can manage the reflected image like i want it……inserted a class to the reflected img (and removed


    Cooker Spares    29/02/2012 12:35    #
  117. hey very nice post. but i want something different from this can you help me.

    i need you help.

    actually i want to show this hover opver popus on my ads. i mean i want to use it in my ad network ads.

    which will contain a link to my ad network ‘“ads by topmse”

    it is similar to google

    i only need this for images type ads,

    plz help me throwgh my email id.

    thanks in advance.


    topmse    18/03/2012 08:13    #
  118. Great plugin. I love it. The reflection looks fantastic and natural, especially when i use it fro images with transperant background.


    Ina    10/04/2012 16:01    #
  119. What is mean with the sentence:
    “It also works in Internet Explorer 6-8 by using an alternative drawing technique.”


    SuchmaschinenOptimierer    16/04/2012 10:20    #
  120. effects to your images in modern browsers, in less than 2 KB.


    Glasgow Seo    27/04/2012 06:16    #
  121. For some reason the image reflection is above my image… why is that? Can someone help please?? Thanks!


    — Savion    29/04/2012 22:16    #
  122. Oh and my image in positioned absolutely…


    — Savion    29/04/2012 22:37    #
  123. be loaded before seeing all reflections being applied at the same time. This provides a much better user experience.


    you make my dreams come true lyrics    02/05/2012 08:51    #
  124. this is nice but i tried to change the scale of the image to lower but the scale of the reflection did not changed, if i want to change the scale of the image how can i make the reflection equal to the scale of the image?


    — rann    07/06/2012 13:27    #
  125. I need to be able to pass the style and class attributes to apply to the wrapper div that is created due to a race condition in IE9 and getting parent. Do you have a unminified version available?


    — Keith Chadwick    07/06/2012 16:00    #
  126. Nice jQuery version! Turns out the original Reflection.js v2.0 had issues with IE8 and IE9 and no fix in sight. I tried the jQuery version here and it’s faster, cleaner and the bug is gone as well.

    Great job, thanks!

    Julien


    Julien    04/07/2012 23:56    #
  127. Great, keep up the good work and I am looking forward for new features.


    Video Chat    12/07/2012 14:46    #
  128. Hi Christophe,

    Thanks for sharing this awesome script!

    I was looking for a similar effect on jQuery dot com, but found yours instead. Just amazing what a tiny script can give an extra touch to an image just by simply adding a class.

    Great job!

    For those who are trying to get the images inline:

    Don’t touch the original reflection.js

    The script wrappes a div with the class “reflect” around the image and its reflection:

    <div class=“reflect”>< [image][canvas] ></div>

    You can easily create a css definition for displaying the images inline:

    <style> div.reflect { display: inline-block; } </style>

    I thought it was worth to share.

    Regards,
    John


    — John    05/08/2012 12:31    #
  129. Just to add…

    If you are planning to link the images (e.g. for lightbox purposes), then the script wraps the image and its reflection in a span element.

    In this case you have to apply the inline method this way:

    @<style> span.reflect { display: inline-block; } </style>@

    or to be safe in both cases:

    @<style> div.reflect, span.reflect { display: inline-block; } </style>@

    For Reference

    note: I’m just experiencing with jQuery, so don’t judge me too hard ;-)


    — John    05/08/2012 14:29    #
  130. Truly like being here, please keep me updated on the latest here.
    Chris Harris


    Workers comp bill    11/08/2012 19:42    #
  131. I read all problems that people wort about ie,and i came across with this problem and i found what bother to ie. if you activat the plugin when you div was in disply none, it will not work/. even if it not the specific div,but in the cover.


    — reut    15/08/2012 09:35    #
  132. I am so glad to visit this amazing blog, it is really outstanding.


    Accounting software for small business    17/08/2012 06:46    #
  133. Great work


    — Great work    05/09/2012 01:57    #
  134. not so bad…


    neti pot death    13/09/2012 16:18    #
  135. I have installed this script here: http://www.keybook.de/ueber-keybook/

    In Chrome, Firefox, Safari, Opera it works fine but in Internet Explorer 7,8,9,10 the images are hidden. Can help me anyone?

    Greetings, Alexander


    Alexander    04/11/2012 15:11    #
  136. I tested: The JavaScripts Flexslider 2 and the reflection Script are not the issue. The issue is the flexslider CSS file with the param display: none; but only the in the Internet Explorer 7/8/9.


    Alexander    04/11/2012 19:55    #
  137. i have problem with IE 8 only but will try to fix it.


    drehi    21/11/2012 19:40    #
  138. @Albin Larrson
    Comment: http://www.digitalia.be/software/reflectionjs-for-jquery#c001910

    Thank you so much for that code snippet! I pulled my hair out for 3 days over this issue why IE9 wouldn’t correctly load anything but the first image.

    I used this reflection.js code to apply an image reflection to my Views Slideshow frontpage slideshow. For some reason this script as-is worked fine in FireFox and Chrome, but IE9 broke it, and now it works flawlessly across all browsers with your modifications.


    — Matt    04/02/2013 04:43    #
  139. if you want to have a 2px space between the img and the reflection!!

    change this:
    $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: “hidden”}); img.style.cssText = “display: block; border: 0px;”;

    into thos:

    $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight + 2, overflow: “hidden”}); img.style.cssText = “display: block; border: 0px; margin-bottom: 2px;”;


    Nico    05/02/2013 22:24    #
  140. Interesting post and thanks for sharing. Some things in here I have not thought about before.Thanks for making such a cool post which is really very well written.will be referring a lot of friends about this.Keep blogging.


    lawyer website    13/02/2013 17:55    #
  141. Had a bit of trouble this morning getting reflections to display in IE8 with jQuery 1.9…

    In reflection.js there is a user agent check performed on line 45 (uncompressed version), using jQuery.browser which was removed in 1.9. It caused the code to jump out at this point as the object did not exist, and therefore never applied the reflection. After commenting out this line, it now applies correctly!

    Feature detection (jQuery.support) is recommended to be used instead although on first glance there isn’t an obvious equivalent to replace the above IE check with.


    — Will    16/02/2013 11:09    #
  142. I’m afraid, it doesn’t work at all in IE7…


    Buy Hosting    21/02/2013 09:51    #
  143. I’m using Safari 6.0.3 on a Mac and the script does not show the image the first time the page loads. If I refresh the page the image shows with the reflection. Works fine on Firefox and Chrome. Any suggestions?


    — sho    09/04/2013 19:52    #
  144. The reflection on the cat’s picture above doesn’t work on IE10 Windows 8.
    It works however with Firefox and chrome, and IE9.
    Any idea what is the compatibility issue with IE10 on Windows 8?
    Thanks for your help


    — Lio    27/04/2013 11:33    #
  145. If we have two classes in img tag, reflection doesn’t work. My problem is I want to do image scroll as well as I want reflection. But If I have two classes reflection will not work. I don’t know what to do? Can anyone help me?

    <img class=“reflect abc” src=”“ alt=”“ />
    this is syntax.


    — Anup    31/05/2013 19:10    #
  146. beautiful jqery thanks :) my work will be very useful


    Kız Yurdu    27/06/2013 10:58    #
  147. I noticed on our site if the width of the image being reflected is odd, the script adds a pixel to the canvas element and containing div in order to make it even – causing the reflection to be wider than the image.

    Looks really odd. :/

    Can be seen here


    — Daniel Bishop    01/07/2013 20:44    #
  148. thanks blog good


    Seslendirme    02/07/2013 17:18    #
  149. thanks admin for me


    Karavan    08/07/2013 11:20    #
  150. Your Post is exceptionally accommodating and you gave exceptionally great insight in your post. I am extremely cheerful to read your post.


    mitcheljames    10/07/2013 09:28    #
  151. Excellent tool – thanks for making MIT :)


    Jeremy    06/08/2013 22:36    #
  152. Your plugin looks nice, though I’d like it to reflect an entire div and not only the image it is containing (I didn’t test it out yet). Cause I’m using Html/css + img to generate my output, it’s lighter than having to use an entire image.


    — Hugo    20/08/2013 17:44    #
  153. is there a possibility to make that responsive? I have problems if I resize the window. Using max-width and max-height for the image works, but then the reflection does not fit as it doesn’t change the size.


    — Peter    03/09/2013 15:18    #
  154. super


    — nancy    09/10/2013 08:21    #
  155. really good thanks


    masaj salonları    28/10/2013 09:55    #
  156. thanks admin for nice


    Kolej    01/11/2013 10:38    #
  157. thanks admin


    Çankaya Anaokul    05/11/2013 11:28    #
  158. There is a problem with reflection.js and SMThemes’ Soundess theme where the reflection does not display when the page is reloaded. Soundess uses a dynamic content loading scheme which does not refresh the page. Here are steps to see the problem:

    1. Goto the website listed here. Scroll down to see the reflection on the image displays correctly following the “Book Us Now” link.
    2. Click on the main menu Home tab (to reload the Home page)
    3. Scroll down again. Notice the reflection no longer displays.

    Any thoughts on how to fix this? I am using the HTML call to the reflection CSS class. Thanks


    Jeff R    17/12/2013 22:39    #
  159. Success! I changed the code to use a Jquery call instead of the HTML and all is well now.


    Jeff R    17/12/2013 23:40    #
  160. Using max-width and max-height for the image works, but then the reflection does not fit as it doesn’t change the size. thanks


    tüp bebek    06/02/2014 12:31    #
  161. I made an unofficial v1.12 that is compatible with Zepto as well as jQuery

    I used it successfully with this 3D carousel

    Christophe, I hope you accept my changes as a patch to your very handy plugin :)


    Ildar Sagdejev    10/02/2014 09:16    #
  162. Using max-width and max-height for the image works, but then the reflection does not fit as it


    estetik merkezleri    04/03/2014 09:55    #
  163. Goto the website listed here. Scroll down to see the reflection on the image displays correctly following the “Book Us Now” link.


    Özel Okullar Ankara    19/03/2014 08:40    #

Leave a comment



( Mandatory, will not be shown on the site )


( Facultative, will be shown )


Textile enabled. Textile Help.