Ruby On Rails, Design, Simplicity, Web 2.0, Ajax, Mac and Tons of Pizza.

RailsConf2007 + Effect.Circle = IFlick.it

Posted by Sandro Paganotti in Events - Ruby on Rails - comments are closed

It’s a while since our last post from RailsConf, in the meantime we worked on our last fresh application: whodo.es, answering to every feedback email we received and trying to fix all bugs as soon as they appear.

Something around two weeks ago we were in Ballroom 201 of the Oregon Convention Center listening to the amazing Thomas Fuchs tutorial. I was deeply inspired from that speech so I decided to do something related to the conference using Prototype and Script.aculo.us.

Using one of the examples provided by Thomas I create an effect that get all the elements inside a target div and put them in a circle around the parent div.

Then using the flickr.rb library I created a rake task that cache all the pictures from Flickr tagged ‘railsconf2007’. With this two elements and a bit of design by Joe we created, a nice carousel of all the pictures from the RailsConf2007 .

We’ve called this experiment IFlick.it and while working on it we were enlightened by a few future improvements that we’re going to implement in our spare time.

If you are interested here is the code of the Effect.Circle; it’s still a bit rough at the moment but it does its job.

  Effect.Circle = Class.create();
  Object.extend(Object.extend(Effect.Circle.prototype,Effect.Base.prototype), {
    initialize: function(element) {
        this.element = $(element);
        this.start(arguments[1] || {});
    },

    setup: function() {

        this.images = this.element.childElements();
        counters = this.images.length
        radiant = 360/counters;
        this.r = (((this.element.getDimensions().width > this.element.getDimensions().height) ? this.element.getDimensions().height : this.element.getDimensions().width) / 2);
        this.radiants = new Array(counters);

        for(x=1;x<=counters;x++){
            this.radiants[x] = Math.round(360 - (radiant * x)); 
        }

        /* Let's found the dimensions of the inner elements */
        this.size = Math.round(((Math.sin(radiant * Math.PI/180)*this.r)/5) * 4)-1;
        this.hsize = Math.round(this.size/2);

    },

    update: function(position) {
        x = 1;
        rs = this.radiants;
        ra = this.r;
        hs = this.hsize;
        s = this.size;

        this.images.each(function(img,index){
            img.setStyle({
                top: Math.round((Math.sin(rs[x] * Math.PI/180)* ra) + ra - this.hs)  + 'px',
                left: Math.round((Math.cos(rs[x] * Math.PI/180)* ra) + ra - this.hs) + 'px',
                width:  s + 'px',
                height: s + 'px'
            });
            rs[x] = rs[x] + 0.1;
            if (rs[x] == 360){
                rs[x] = 1;
            }
            x = x+1;
        });
    }

  });

Permalink