/** FancyZoom with Prototype By Jerome GLATIGNY
* based on : http://github.com/jnunemaker/fancy-zoom
*/
Object.extend(String.prototype, {
// if a string doesn't end with str it appends it
ensureEndsWith: function(str) {
return this.endsWith(str) ? this : this + str;
},
// makes sure that string ends with px (for setting widths and heights)
px: function() {
return this.ensureEndsWith('px');
}
});
Object.extend(Number.prototype, {
// makes sure that number ends with px (for setting widths and heights)
px: function() {
return this.toString().px();
}
});
var WinSize = {
// returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
size: function() {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
return {'width':width, 'height':height, 'x':x, 'y':y}
}
}
var FancyZoomBox = {
directory : '/rsc/common/img/fancyzoom',
zooming : false,
setup : false,
init: function(directory) {
if (FancyZoomBox.setup) return;
FancyZoomBox.setup = true;
var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
if (ie) {
var version = parseInt(ie[1]);
Prototype.Browser['IE' + version.toString()] = true;
Prototype.Browser.ltIE7 = (version < 7) ? true : false;
}
var html = ' \
\
\
| \
| \
| \
\
| \
\
\
| \
| \
\
| \
| \
| \
\
\
 + ')
';
element.content_div.insert(html);
var body = $$('body').first();
body.appendChild(element.content_div);
var width = element.content_div.getWidth() + 60;
var height = element.content_div.getHeight() + 60;
var d = WinSize.size();
var yOffset = document.viewport.getScrollOffsets()[1];
var newTop = Math.max((d.height/2) - (height/2) + yOffset, 0);
var newLeft = (d.width/2) - (width/2);
FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
FancyZoomBox.zoom_close.hide();
FancyZoomBox.zooming = true;
new Effect.Parallel([
new Effect.Move(FancyZoomBox.zoom, {x: newLeft, y: newTop, mode: 'absolute', sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: width.px(),
height: height.px()
},
sync: true,
beforeStart: function(effect) {
FancyZoomBox.fixBackgroundsForIE();
},
afterFinish: function(effect) {
FancyZoomBox.zoom_content.innerHTML = element.content_div.innerHTML;
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zoom_close.show();
FancyZoomBox.zooming = false;
}
})
], { duration: 0.5 });
}).bind(this);
if( typeof(element) != "undefined") {
imgloader.src = element.readAttribute('href');
} else {
alert("error");
}
},
hide: function(e) {
if( typeof(e) == 'object') e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
new Effect.Parallel([
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: '1'.px(),
height: '1'.px()
},
sync : true,
beforeStart: function(effect) {
FancyZoomBox.fixBackgroundsForIE();
FancyZoomBox.zoom_content.innerHTML = '';
FancyZoomBox.zoom_close.hide();
},
afterFinish: function(effect) {
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zooming = false;
}
}),
new Effect.Fade(FancyZoomBox.zoom, {sync:true}),
new Effect.Fade(FancyZoomBox.overlay, {sync:true})
], { duration: 0.5 });
},
// switches the backgrounds of the cells and the close image to png's or gif's
// fixes ie's issues with fading and appearing transparent png's with
// no background and ie6's craptacular handling of transparent png's
switchBackgroundImagesTo: function(to) {
FancyZoomBox.cells.each(function(td) {
var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
td.setStyle('background-image: ' + bg);
});
var close_img = FancyZoomBox.zoom_close.firstDescendant();
var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
close_img.writeAttribute('src', new_img);
},
// prevents the thick black border that happens when appearing or fading png in IE
fixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
},
// swaps back to png's for prettier shadows
unfixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
}
}
var FancyZoom = Class.create({
initialize: function(element) {
this.options = arguments.length > 1 ? arguments[1] : {};
FancyZoomBox.init();
this.element = $(element);
if (this.element) {
var ref = this.element.readAttribute('href');
if( ref.substr(0,1) == '#' ) {
this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
this.element.content_div.hide();
} else {
this.element.content_div = $('fancyloading');
}
this.element.zoom_width = this.options.width;
this.element.zoom_height = this.options.height;
this.element.observe('click', FancyZoomBox.show);
}
}
});
document.observe('dom:loaded', function () {
$$('a[rel="zoom"]').each(function(el) { new FancyZoom(el); })
});
document.observe('ajax:load', function () {
$$('a[rel="zoom"]').each(function(el) { new FancyZoom(el); })
});