PDA

View Full Version : open/close a zoomed picture with this script?



Null
07-07-2008, 10:21 PM
Hi,

I have the following script:

Effect.Operators.Zoom = Class.create(Effect.Operators.Style, {
initialize: function($super, object, options) {
var viewport = { width: 980, height: 300 };
var offsets = { left: 0, top: 0 };
var dims = object.getDimensions();

var f = Effect.Helpers.fitIntoRectangle(dims.width, dims.height,
viewport.width - (options.borderWidth || 0)*2,
viewport.height - (options.borderWidth || 0)*2);

Object.extend(options, { style: {
left: f[0] + (options.borderWidth || 0) + offsets.left + 'px',
top: f[1] + (options.borderWidth || 0) + offsets.top + 'px',
width: f[2] + 'px', height: f[3] + 'px',
marginTop: '0px'
}});
$super(object, options);
}
});

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);
Thomas.animation = false;
}
});

this.animate('zoom', this.element, {
propertyTransitions: this.options.propertyTransitions || { }
});
}
});

var Thomas = {
initialized: false,
showQuotes: true,

// workaround a IE6 CSS Bug
FIRST_MARGIN: navigator.userAgent.indexOf('MSIE 6') > -1 ? ['95px', '62px'] : ['190px', '125px'],

show: function(photo, event){
if(Thomas.animation || photo.zoomed) {
event.stop();
return;
}
Thomas.zoomOutAllPhotos();
Thomas.hideHoverLabels();
if(Thomas.copyrightShown) Thomas.hideCopyright();
if(!Thomas.initialized) {
$$('#photos div.photo.first').first().morph('margin-left:'+Thomas.FIRST_MARGIN[1],{ duration: .4 });
Thomas.initialized = true;
$('quotes').hide();
$('text').show();
}
Thomas.animation = true;
photo.zoomed = true;
new Effect.PhotoZoom(photo, {
duration: .7, transition: 'bouncePast', after: function(){
$$('#text div.border').invoke('show');
}
}).play();
Thomas.zoomInLabel(photo.next('div.label'));
if(event) event.stop();
},
zoomInLabel: function(label){
if(label.zoomed) return;
label.zoomed = true;
label.morph('width:180px;height:40px;bottom:23px;left:33px',{duration: .7, transition: 'bouncePast'});
label.down('img').morph('width:180px;height:40px',{duration: .7, transition: 'bouncePast'});
},
zoomOutLabel: function(label){
if(!label.zoomed) return;
label.zoomed = false;
label.morph('width:90px;height:20px;bottom:46px;left:13px',{ duration: .4 });
label.down('img').morph('width:90px;height:20px',{ duration: .4 });
},
zoomOutAllPhotos: function() {
Thomas.photos.each(function(photo){
photo.morph('margin-top:120px;width:120px;height:143px;bottom:0px',{duration: .4});
photo.zoomed = false;
Thomas.zoomOutLabel(photo.next('div.label'));
});
},
hideAllPhotos: function() {
Thomas.zoomOutAllPhotos();
$$('#photos div.photo.first').first().morph('margin-left:'+Thomas.FIRST_MARGIN[0],{ duration: .4 });
Thomas.clearTextBox();
$('text').morph('background-color:#fff; height:20px', { duration: .4 });
$$('#text div.border').invoke('hide');

if(Thomas.showQuotes) Element.show.delay(.5, 'quotes');
Element.hide.delay(.5, 'text');
Thomas.hideAllLabels.delay(.5);
Thomas.initialized = false;
},
clearTextBox: function(){
$('text_contents').update();
},
showLabel: function(photo, event){
var label = photo.next('.label');
if(Thomas.activeLabel == label) return;
Thomas.activeLabel = label;
Thomas.hideHoverLabels();
if(!label.zoomed) label.setStyle({width:'0px',display:'block'}).morph('width:90px',{duration:.3});
event.stop();
},
hideHoverLabels: function(){
if(!Thomas.activeLabel) return;
$$('#photos div.label').reject(function(label){ return label.zoomed })
.without(Thomas.activeLabel).invoke('setStyle',{display:'none', width:'0'});
},
hideAllLabels: function(){
Thomas.activeLabel = false;
$$('#photos div.label').reject(function(label){ return label.zoomed })
.invoke('setStyle',{display:'none', width:'0'});
},
showCopyright: function(event){
if(Thomas.copyrightShown) return;
Thomas.copyrightShown = true;
$('copyright').setStyle({left:((document.viewport.getDimensions().width-300)/2).round()+'px'});

$('copyright').setStyle({height:0,top:'525px'}).show().morph('top:225px;height:300px',{
transition: 'bouncePast',
after: Element.show.curry($('copyright').down('div.contents'))
});
Thomas.hideAllPhotos();
event.stop();
},
hideCopyright: function(){
if(!Thomas.copyrightShown) return;
Thomas.copyrightShown = false;
['copyright', $('copyright').down('div.contents')].each(Element.hide);
}
};

var Asset = {
assets: [],
load: function(url, load){
var image = new Image();
image.src = url;
this.assets.push({image: image, load: load || Prototype.emptyFunction});
this.wait();
},
wait: function(){
if(this.interval) return;
this.interval = setInterval(this.check.bind(this), 10);
},
check: function(){
this.assets = this.assets.map(function(asset){
if(asset.image.complete){
if(asset.load) asset.load(asset.image.src);
return null;
} else {
return asset;
}
}).compact();
if(this.assets.length == 0) {
clearInterval(this.interval);
this.interval = null;
}
}
};

// load stuff and initialize events. do it right here so
// GA can continue to load in background

Thomas.photos = $$('#photos div.photo img[src$=gif]');

Thomas.photos.each(function(photo){
Asset.load('images/polaroid_'+photo.id+'.jpg', function(url){
photo.setStyle({opacity:0});
photo.src = url;
photo.morph('opacity: 1',{duration: .4});

photo.insert({
after: (new Element('div', { className: 'label' }).insert(new Element('img',{
src:'images/label_'+photo.id+'.png'
}))).observe('mouseover', function(event){event.stop()})
.observe('click', Thomas.show.curry(photo))
});
});

photo.observe('click', Thomas.show.curry(photo))
.observe('mouseover', Thomas.showLabel.curry(photo));
});

$('footer').down('div.header').observe('click', Thomas.showCopyright.bind(Thomas));

if(navigator.userAgent.indexOf('MSIE 6') > -1)
$$('#copyright img').first().src = 'images/empty.gif';

document.observe('mouseover', Thomas.hideAllLabels);
$$('body')[0].observe('click', function(){
Thomas.hideAllPhotos();
Thomas.hideCopyright();
});
In a nutschell, it zooms pictures when clicked and minimalize (hide) it when clicked another. Now I am troubled with this last part in the script:

document.observe('mouseover', Thomas.hideAllLabels);
$$('body')[0].observe('click', function(){
Thomas.hideAllPhotos();
Thomas.hideCopyright();
});
It hides all zoomed pictures when I click anywhere in the browser. How to change this that it wont hide a picture when I click in the browser, but only does this when I click the zoomed picture?

Many thanks