Thomas Fuchs uses Script.aculo.us 2.0 on his own site
Thomas Fuchs is back in the consulting game and his new site gives us another glimpse of Script.aculo.us 2.0 abilities.
The photo zooming?
JAVASCRIPT:
-
-
Effect.PhotoZoom = Class.create(Effect.Element, {
-
setup: function() {
-
var currentHeight = $(‘text’).getHeight();
-
var newHTML = this.element.next(‘div.text’).innerHTML;
-
-
var left = Thomas.photos.indexOf(this.element)*120 + 90;
-
var color = $w(‘ffa ffa ffa ffa ffa’)[Thomas.photos.indexOf(this.element)];
-
-
$(‘text_contents’).show().update(newHTML).setStyle({height:‘auto’});
-
var newHeight = $(‘text_contents’).getHeight()+22;
-
-
Thomas.clearTextBox();
-
$(‘text’).setStyle({height:currentHeight+‘px’});
-
-
$(‘text’).morph(‘left:’+left+‘px;height:’+newHeight+‘px;background-color:#’+color,{
-
duration: 1.2,
-
transition: ‘linear’,
-
propertyTransitions: {
-
left: ‘bouncePast’,
-
height: ‘bouncePast’,
-
backgroundColor: ’sinusoidal’
-
},
-
after: function(){
-
$(‘text_contents’).show();
-
Element.update.defer(‘text_contents’, newHTML);
-
}
-
});
-
-
this.animate(‘zoom’, this.element, {
-
propertyTransitions: this.options.propertyTransitions || { }
-
});
-
}
-
});
-
