Reflection.js

#  | #  | Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.

## Contents

- Setting Up
- Using It
- Customizing Reflections
- Reflect-o-matic
- Scripting Reflections
- Known Issues
- Improvements
- Changelog
- Credits

## Setting Up

Upload reflection.js and include it into your webpage.

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

## Using It

To add a reflection just add a class="reflect" to the image. View source to see example.

The reflection will automatically fade into the background colour.

If you run a forum, you can modify your templates and add class="reflect" to the avatar HTML code to add reflections.

## Customizing Reflections

By default, the reflection will have a height 50% of the original image. Thus the height of an image with a reflection will be 1.5 times the height of the original image. The default opacity of reflections is 50%.

- Varying the Height
  You can vary the height of a reflection by adding rheight followed by the desired height in percent to the CSS class list.

  To use a reflection 33% the height of the original image:

  `class="reflect rheight33"`

  Example:

  `class="reflect rheight33"` | `class="reflect rheight66"` | `class="reflect rheight100"`

  Tip: Especially for larger photographs, small reflections work really well (try 10%).

- Varying the Opacity
  You can vary the opacity of a reflection by adding ropacity followed by the desired opacity in percent to the CSS class list.

  To use a reflection with 30% opacity:

  `class="reflect ropacity30"`

  Example:

  `class="reflect ropacity33"` | `class="reflect ropacity66"` | `class="reflect ropacity100"`

You can combine these two options. To create a 80% height 40% opacity reflection use:

`class="reflect rheight80 ropacity40"`

## Reflect-o-matic

You can use the reflect-o-matic tool to preview and automatically generate the HTML code for reflections.

The bookmarklet may also save you time whilst browsing the web and generating reflections.

## Scripting Reflections

If you want tons of flexibility, use scripted reflections. You can make your reflections respond to user actions (e.g. changing the reflection opacity when the image is hovered over) or add reflections to scripts such as Lightbox.

`Reflection.add(image, options);`

> Adds or modifies a reflection to an image using Javascript. If the image is already reflected but the specified opacity or height has changed, the reflection will be changed accordingly.

> image should be an image element.

> options can contain a value for opacity or height. Both values should be between 0 and 1.

> `Reflection.add(document.getElementById("ohboy"), { height: 3/4, opacity: 2/3 });`

`Reflection.remove(image);`

> Removes the reflection from an image.

> `Reflection.remove(document.getElementById("orly"));`

`Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;`

> Changes the default height and opacity of reflections. The default value for both settings is 0.5.

## Known Issues

- Reflections of animated images only work correctly in Internet Explorer.
- If you reflect an image near the bottom of a page/div in IE, blank space may be created.

## Improvements

If you've made any changes or bug fixes to reflection.js, feel free to publish and distribute them. If you contact me through my blog I can also include the changes in the main reflection.js download.

## Supported Browsers

- Internet Explorer 5.5+
- Mozilla Firefox 1.5+
- Google Chrome (all versions)
- Safari 2+
- Opera 9+

## Changelog

Version 2.0

- Add support for Google Chrome

Version 1.9

- Fixed issue in Firefox 3, Safari 3.1 where reflection would skip an image

Version 1.8

- Check for document.getElementsByClassName before overwriting
- Improved aesthetics of reflection of scaled images in IE
- Fixed issue where in IE standards mode, reflection appeared next to image.
- Bundled a copy of reflect-o-matic for ease of use

Version 1.7

- Make reflected images work with hyperlinks in Internet Explorer

Version 1.6

- Don't create a <div> in browsers not supporting canvas but supporting JS
- Fix gap between image and reflection in XHTML Strict

Version 1.5

- Fix issue with reflection not appearing for wide images
- Add scriptable reflections - Reflection.add(), Reflection.remove()
- Make reflection of images with specified dimensions better
- Fix Safari issue
- Removed wholeimage class
- Created Test Suite

Version 1.0

- Add Internet Explorer support
- Remove prototype.js dependency (filesize down from 32KB to 4KB)
- Code cleanup

Version 0.4

- Fix problem with floated images, borders, etc.
- Removed unnecessary linebreak

Version 0.3

- Fix for Safari in standards compliant mode

Version 0.2

- Fix for Safari

Version 0.1

- Initial Release

## Credits

Original idea and inspiration for the script came from Romain Guy's Crystal CD Case. Sitharus made it all work in Safari. Andreas Linde helped make the script work better with CSS styles. Tralala at vBulletin.org did a great job of finding bugs with reflection in Safari and fixed them! Niels Leenheer provided a fix for an issue in Opera 8.5 where Reflection.js may move images around. "Withinreach" informed me about an issue with XHTML Strict. "Kiyanwang" provided pointers towards a fix for clickable images and reflections in IE. "Jstengel" solved a problem where in IE Strict Mode, reflections appeared next to the image. "Koen" provided a fix for scaled images in IE. alinear provided a workaround to the script reflecting every second image in browsers with a native getElementsByClassName implementation. Levenez pointed us in the direction of a patch for Google Chrome support. Thanks and Kudos!

A big thank you to everybody who has left their thoughts and comments. Your feedback has been invaluable.

cow.neondragon.net