Nov 18, 2008
Flip an image with Scriptaculous
I was the need of a flip effect for scriptaculous and came up with this solution:
Effect.Flip = Class.create(); Object.extend(Object.extend(Effect.Flip.prototype, Effect.Base.prototype), { initialize: function(element, flip_graphic, original_graphic) { var options = arguments[3] || {}; this.element = $(element); this.flip_graphic = flip_graphic; this.original_graphic = original_graphic; if (this.element.getAttribute('src') == this.flip_graphic) { this.flip_graphic = this.original_graphic; this.original_graphic = this.element.getAttribute('src'); } this.width = options.width || this.element.getWidth(); this.delta = this.width * 2; this.flip = 1; this.start(options); }, update: function(position) { var change = this.flip * (0.5 - position) * this.delta; var padding = this.width / 2 - change / 2; this.element.setStyle({ width: change + 'px', padding: '0 0 0 ' + padding + 'px' }); if (change < 0) { this.element.writeAttribute({ src: this.flip_graphic }); this.flip = -1; } }, });
You can use it like that:
new Effect.Flip(element, 'graphics/original.jpg', 'graphics/flip.png', { width: 120 });
I will post a demo tomorrow – I promise, it looks cool!