Image Reflection Plugin

by Marcus Ekwall

HTML

<img class="reflect" src="http://hoth.entp.com/assets/2010/7/26/jquery_logo_color_onwhite.png" alt="" />

JavaScript

(function($){
    $.fn.reflect = function(options){
        
        var defaults = {
            opacity: 0.5,
            height: 0.5
        };
        
        options = $.extend({}, defaults, options);
        
        this.each(function(){
            var $this = $(this);
                $image = $this.clone(true).css('display', 'block'),
                $container = $('<div>'),
                reflectionHeight = Math.floor($this.height()*options.height),
                reflectionWidth = $this.width(),
                divHeight = Math.floor($this.height()*(1+options.height)),
                classes = this.className.split(' '),
                newClasses = '';
            
            // Fetch classes
            for (j=0;j<classes.length;j++) {
                if (classes[j] != "reflect") {
                    if (newClasses) {
                        newClasses += ' '
                    }
                    newClasses += classes[j];
                }
            }

            // Copy classes & styles to container
            $container[0].style.cssText = this.style.cssText;
            this.className = 'reflected';
            $this.wrap($container.attr('class', newClasses));
            
            // TODO: Feature detection instead
            // IE doesn't support canvases, so we use FlipV filter instead
            if ($.browser.msie) {
                $container.append(
                    $image,
                    $image.clone().css({
                        'filter': 'FlipV progid:DXImageTransform.Microsoft.Alpha(opacity='+(options.opacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options.height*100)+')'
                    })
                );
            } else {
                var canvas = document.createElement('canvas');
                if (canvas.getContext) {
                    var context = canvas.getContext("2d");
                    canvas.style.height = reflectionHeight+'px';
                  ...