| 1 | /*! |
|---|
| 2 | reflection.js for jQuery v1.1 |
|---|
| 3 | (c) 2006-2011 Christophe Beyls <http://www.digitalia.be> |
|---|
| 4 | MIT-style license. |
|---|
| 5 | */ |
|---|
| 6 | |
|---|
| 7 | (function($) { |
|---|
| 8 | |
|---|
| 9 | $.fn.extend({ |
|---|
| 10 | reflect: function(options) { |
|---|
| 11 | options = $.extend({ |
|---|
| 12 | height: 1/3, |
|---|
| 13 | opacity: 0.5 |
|---|
| 14 | }, options); |
|---|
| 15 | |
|---|
| 16 | return this.unreflect().each(function() { |
|---|
| 17 | var img = this; |
|---|
| 18 | if (/^img$/i.test(img.tagName)) { |
|---|
| 19 | function doReflect() { |
|---|
| 20 | var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient; |
|---|
| 21 | reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height); |
|---|
| 22 | |
|---|
| 23 | reflection = $("<canvas />")[0]; |
|---|
| 24 | if (reflection.getContext) { |
|---|
| 25 | context = reflection.getContext("2d"); |
|---|
| 26 | try { |
|---|
| 27 | $(reflection).attr({width: imageWidth, height: reflectionHeight}); |
|---|
| 28 | context.save(); |
|---|
| 29 | context.translate(0, imageHeight-1); |
|---|
| 30 | context.scale(1, -1); |
|---|
| 31 | context.drawImage(img, 0, 0, imageWidth, imageHeight); |
|---|
| 32 | context.restore(); |
|---|
| 33 | context.globalCompositeOperation = "destination-out"; |
|---|
| 34 | |
|---|
| 35 | gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); |
|---|
| 36 | gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")"); |
|---|
| 37 | gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); |
|---|
| 38 | context.fillStyle = gradient; |
|---|
| 39 | context.rect(0, 0, imageWidth, reflectionHeight); |
|---|
| 40 | context.fill(); |
|---|
| 41 | } catch(e) { |
|---|
| 42 | return; |
|---|
| 43 | } |
|---|
| 44 | } else { |
|---|
| 45 | if (!$.browser.msie) return; |
|---|
| 46 | reflection = $("<img />").attr("src", img.src).css({ |
|---|
| 47 | width: imageWidth, |
|---|
| 48 | height: imageHeight, |
|---|
| 49 | marginBottom: reflectionHeight - imageHeight, |
|---|
| 50 | filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")" |
|---|
| 51 | })[0]; |
|---|
| 52 | } |
|---|
| 53 | $(reflection).css({display: "block", border: 0}); |
|---|
| 54 | |
|---|
| 55 | wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0]; |
|---|
| 56 | wrapper.className = img.className; |
|---|
| 57 | $.data(img, "reflected", wrapper.style.cssText = img.style.cssText); |
|---|
| 58 | $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"}); |
|---|
| 59 | img.style.cssText = "display: block; border: 0px"; |
|---|
| 60 | img.className = "reflected"; |
|---|
| 61 | } |
|---|
| 62 | |
|---|
| 63 | if (img.complete) doReflect(); |
|---|
| 64 | else $(img).load(doReflect); |
|---|
| 65 | } |
|---|
| 66 | }); |
|---|
| 67 | }, |
|---|
| 68 | |
|---|
| 69 | unreflect: function() { |
|---|
| 70 | return this.unbind("load").each(function() { |
|---|
| 71 | var img = this, reflected = $.data(this, "reflected"), wrapper; |
|---|
| 72 | |
|---|
| 73 | if (reflected !== undefined) { |
|---|
| 74 | wrapper = img.parentNode; |
|---|
| 75 | img.className = wrapper.className; |
|---|
| 76 | img.style.cssText = reflected; |
|---|
| 77 | $.removeData(img, "reflected"); |
|---|
| 78 | wrapper.parentNode.replaceChild(img, wrapper); |
|---|
| 79 | } |
|---|
| 80 | }); |
|---|
| 81 | } |
|---|
| 82 | }); |
|---|
| 83 | |
|---|
| 84 | })(jQuery); |
|---|
