rulu ruru

post Scriptaculous - BlindLeft and BlindRight effects

August 11th, 2008

Filed under: javascript — starenka @ 21:20
Tags: , , ,

This is a simple ripoff of standard BlindUp and BlindDown effects known from script.aculo.us javascript framework. To use these effects simply download the source file and link the file after scriptacolous library. Effects are accesible as usual new Effect.BlindLeft(element);. Cheerz.

Effect.BlindRight = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleY: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({width: ‘0px’}).show();
    },  
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || { }));
};

Effect.BlindLeft = function(element) {
  element = $(element);
  element.makeClipping();
  return new Effect.Scale(element, 0,
    Object.extend({ scaleContent: false,
      scaleY: false,
      restoreAfterFinish: true,
      afterFinishInternal: function(effect) {
        effect.element.hide().undoClipping();
      }
    }, arguments[1] || { })
  );
};

Popularity: 22% [?]

post Easy image slider with scriptaculous and lightbox

August 11th, 2008

Filed under: javascript — starenka @ 00:07
Tags: , , ,

One lame image slider I made while ago. It just slides images with slight transition effect and shows lightboxed hi-res ones when clicked. See demo here, get example source overe here. Have fun!

JavaScript:

document.observe(‘dom:loaded’, function()
{
    l1 = new Slider(‘gal-left’,‘left-gal-left’,‘left-gal-right’);
    r1 = new Slider(‘gal-right’,‘right-gal-left’,‘right-gal-right’);
});

function Slider(ele,left,right)
{
    this.current = 0;
    this.items = $(ele).getElementsByTagName(‘li’);
    this.count = this.items.length;
   
    for(i=0;i<this.count;i++)
        if(i!=0) this.items[i].style.display = ‘none’;

    this.slide = function(direction)
    {
        Effect.Fade(this.items[this.current]);
        if(direction == ‘fw’)
            if (this.current == (this.count-1)) { this.current = 0; } else { this.current++; }
        else
            if (this.current == 0) { this.current = (this.count-1); } else { this.current–; }
        Effect.Appear(this.items[this.current]);
    };
   
    $(right).observe(‘click’,this.slide.bindAsEventListener(this,‘fw’));
    $(left).observe(‘click’,this.slide.bindAsEventListener(this,‘prev’));
}
 

Popularity: 23% [?]

ruldrurd
© starenka 2oo7, cute alien monster by noizcut, original theme by Laurentiu Piron - customized by starenka | proudly powered by WordPress