hmm - I'll have to test it one more time - maybe my implementation is wrong
On Jul 30, 6:06 pm, keif <[email protected]> wrote: > Vladyn, if it doesn't work, please post OS/browser so others can > confirm. If I remember correctly, this was broken in Firefox 2.0.10 (I > think) - but odds are you aren't using an old firefox :) > > -kb > > On Jul 29, 11:19 am, vladyn <[email protected]> wrote: > > > > > hm - I think this doesn;t work - I've just made simple test case > > > On Jul 25, 1:43 pm, Thierry bela nanga <[email protected]> wrote: > > > > Hi all, > > > > I've slightly modified this to use mootools, > > > > homepage:http://cow.neondragon.net/stuff/reflection/ > > > > /** > > > * reflection.js v2.0 > > > *http://cow.neondragon.net/stuff/reflection/ > > > * Freely distributable under MIT-style license. > > > */ > > > > var Reflection = { > > > options: { > > > opacity : .5, > > > height : .5, > > > width: .5}, > > > > add: function(image, options) { > > > this.remove($(image)); > > > options = options || {}; > > > for(v in this.options) if(!options[v]) options[v] = this.options[v]; > > > try { > > > var d = new Element('div'), p = image, > > > newClasses = p.removeClass('reflected').className, > > > reflectionHeight = Math.floor(p.height*options['height']), > > > divHeight = Math.floor(p.height*(1+options['height'])), > > > reflectionWidth = p.width; > > > if (Browser.Engine.trident) { > > > /* Fix hyperlinks */ > > > if(p.getParent().get('tag') == 'a') d = new Element('a', > > > {href: p.getParent().get('tag').href}); > > > > /* Copy original image's classes & styles to div */ > > > if(newClasses) d.className = newClasses; > > > p.className = 'reflected'; > > > d.style.cssText = p.style.cssText; > > > p.style.cssText = 'vertical-align: bottom'; > > > var reflection = new Element('img', {src: p.src, > > > width: reflectionWidth, > > > height: p.height}); > > > > reflection.style.display = 'block'; > > > reflection.style.marginBottom = -(p.height-reflectionHeight)+'px'; > > > reflection.style.filter = 'flipv > > > progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+ > > > ', > > > style=1, finishOpacity=0, startx=0, starty=0, finishx=0, > > > finishy='+(options['height']*100)+')'; > > > d.setStyles({height: divHeight, width: reflectionWidth}); > > > p.parentNode.replaceChild(d, p); > > > d.appendChild(p); > > > d.appendChild(reflection);} else { > > > > var canvas = new Element('canvas'); > > > if (canvas.getContext) { > > > /* Copy original image's classes & styles to div */ > > > if(newClasses) d.className = newClasses; > > > p.className = 'reflected'; > > > d.style.cssText = p.style.cssText; > > > p.style.cssText = 'vertical-align: bottom'; > > > var context = canvas.getContext("2d"); > > > canvas.setProperties({height: reflectionHeight, width: reflectionWidth}); > > > d.setStyles({height: divHeight,width: reflectionWidth}); > > > p.parentNode.replaceChild(d, p); > > > d.appendChild(p); > > > d.appendChild(canvas); > > > context.save(); > > > context.translate(0,image.height-1); > > > context.scale(1,-1); > > > context.drawImage(image, 0, 0, reflectionWidth, image.height); > > > context.restore(); > > > context.globalCompositeOperation = "destination-out"; > > > var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); > > > gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); > > > gradient.addColorStop(0, "rgba(255, 255, 255, > > > "+(1-options['opacity'])+")"); > > > context.fillStyle = gradient; > > > context.rect(0, 0, reflectionWidth, reflectionHeight*2); > > > context.fill();} > > > } > > > } > > > catch (e) { } > > > }, > > > > remove : function(image) { > > > if (image.className == "reflected") { > > > image.className = image.parentNode.className; > > > image.parentNode.parentNode.replaceChild(image, image.parentNode); > > > > } > > > } > > > } > > > > -- > > > fax : (+33) 08 26 51 94 51
