Stop Being Carbon

Icon

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!

Category: Technology

Tagged:

Leave a Reply