JCycle Reflection

by Apple Ilagan

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow">
<div><img class="reflect" src="http://malsup.github.com/images/beach1.jpg" /></div>
<div><img class="reflect" src="http://malsup.github.com/images/beach2.jpg" /></div>
<div><img class="reflect" src="http://malsup.github.com/images
/beach3.jpg" /></div>
<div><img class="reflect" src="http://malsup.github.com/images/beach4.jpg" /></div>
<div><img class="reflect" src="http://malsup.github.com/images/beach5.jpg" /></div>    
</div>

CSS

body {background:url(http://www.brothersonthefly.com/wp-content/uploads/2013/08/wood-textures-desktop-free-wallpaper.jpg);}
.slideshow {background:none !important;}
.slideshow > div {height:350px; width:auto;}
.slideshow > div img {height:350px; width:auto;}
.slideshow img.reflect {background:none !important;}

JavaScript

(function ($) {
    $.fn.reflect = function (options) {

        var defaults = {
            opacity: 0.5,
            height: 0.1
        };

        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';
                    canvas.style.width = reflectionWidth + 'px';
                   ...