/*
* imgbox - jquery plugin
* yet another lightbox alternative
*
* copyright (c) 2009 jqueryglobe
* examples and documentation at: http://jqueryglobe.com/article/imgbox/
*
* version: 1.0.0 (21/10/2009)
* requires: jquery v1.3+
*
* dual licensed under the mit and gpl licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($) {
$.fn.fixpng = function() {
return this.each(function() {
var b = $(this).css('backgroundimage');
if (b.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
b = regexp.$1;
$(this).css({
'backgroundimage': 'none',
'filter': "progid:dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod=" + ($(this).css('backgroundrepeat') == 'no-repeat' ? 'crop' : 'scale') + ", src='" + b + "')"
}).each(function() {
var a = $(this).css('position');
if (a != 'absolute' && a != 'relative') $(this).css('position', 'relative')
})
}
})
};
var g, opts, preloader, orig_pos, final_pos, busy = false,
nr, zindex = 90,
titleh = 0,
shadow = 20,
margin = 20,
fx = $.extend($('
')[0], {
prop: 0
});
$.fn.imgbox = function(a) {
return this.unbind('click.pb').bind('click.pb', function() {
$.imgbox($(this), a);
return false
})
};
$.imgbox = function(e, o) {
if (busy) {
return false
}
g = e;
opts = $.extend({}, $.fn.imgbox.defaults, o);
nr = jquery.data(g[0]);
if ($('#imgbox-wrap-' + nr).length) {
zoomout();
return false
}
hideactivity();
if (opts.overlayshow) {
$('#imgbox-overlay').unbind().stop().hide().css({
'height': $(document).height(),
'opacity': opts.overlayopacity
}).show()
}
preloader = new image;
preloader.src = $(g).attr('href');
if (preloader.complete == false) {
showactivity();
$(preloader).unbind().one('load', function() {
hideactivity();
zoomin()
})
} else {
zoomin()
}
};
$.fn.imgbox.defaults = {
padding: 10,
alignment: 'auto',
allowmultiple: true,
autoscale: true,
speedin: 500,
speedout: 500,
easingin: 'swing',
easingout: 'swing',
zoomopacity: false,
overlayshow: false,
overlayopacity: 0.5,
hideonoverlayclick: true,
hideoncontentclick: true
};
function zoomin() {
busy = true;
if (opts.allowmultiple == false) {
$('.imgbox-wrap').remove();
$('.imgbox-bg-wrap').remove()
} else {
zindex = zindex + 2
}
final_pos = getzoomto();
var a = $(g).attr('title') || '';
$('').css({
'z-index': zindex,
'padding': opts.padding
}).append('').appendto('body');
$('').appendto('body');
if ($.browser.msie && parseint($.browser.version.substr(0, 1)) < 7) {
$('#imgbox-bg-' + nr).find('.imgbox-bg').fixpng()
}
titleh = 0;
if (a.length > 0) {
$('').html(a).css('width', final_pos.width).appendto('body');
titleh = $('#imgbox-tmp').outerheight();
final_pos.height += titleh;
final_pos.top -= titleh > margin + shadow ? margin : margin * 0.5;
$('#imgbox-tmp').remove();
$('#imgbox-wrap-' + nr).append('' + a + '
')
}
if (opts.speedin > 0) {
var b = getthumbpos();
orig_pos = {
top: b.top - opts.padding,
left: b.left - opts.padding,
width: b.width,
height: b.height
};
$('#imgbox-wrap-' + nr).css(orig_pos).show();
$('#imgbox-bg-' + nr).css({
top: orig_pos.top,
left: orig_pos.left,
width: orig_pos.width + (opts.padding * 2),
height: orig_pos.height + (opts.padding * 2),
'z-index': zindex - 1
}).show();
if (opts.zoomopacity) {
final_pos.opacity = 1
}
fx.prop = 0;
$(fx).animate({
prop: 1
}, {
duration: opts.speedin,
easing: opts.easingin,
step: draw,
complete: _finish
})
} else {
$('#imgbox-img-' + nr).css('height', (final_pos.height - titleh) + 'px');
$('#imgbox-wrap-' + nr).css(final_pos).fadein('normal', _finish);
$('#imgbox-bg-' + nr).css({
top: final_pos.top,
left: final_pos.left,
width: final_pos.width + (opts.padding * 2),
height: final_pos.height + (opts.padding * 2),
'z-index': zindex - 1
}).fadein('normal')
}
};
function draw(a) {
var b = math.round(orig_pos.width + (final_pos.width - orig_pos.width) * a);
var c = math.round(orig_pos.height + (final_pos.height - orig_pos.height) * a);
var d = math.round(orig_pos.top + (final_pos.top - orig_pos.top) * a);
var e = math.round(orig_pos.left + (final_pos.left - orig_pos.left) * a);
$('#imgbox-wrap-' + nr).css({
'width': b + 'px',
'height': c + 'px',
'top': d + 'px',
'left': e + 'px'
});
$('#imgbox-bg-' + nr).css({
'width': math.round(b + opts.padding * 2) + 'px',
'height': math.round(c + opts.padding * 2) + 'px',
'top': d + 'px',
'left': e + 'px'
});
$('#imgbox-img-' + nr).css('height', math.round(c - ((((c - math.min(orig_pos.height, final_pos.height)) * 100) / (math.max(orig_pos.height - final_pos.height, final_pos.height - orig_pos.height)) * titleh / 100))) + 'px');
if (typeof final_pos.opacity !== 'undefined') {
var f = a < 0.3 ? 0.3 : a;
$('#imgbox-wrap-' + nr).css('opacity', f);
if ($.browser.msie == false) {
$('#imgbox-bg-' + nr).css('opacity', f)
}
}
};
function _finish() {
if (opts.overlayshow && opts.hideonoverlayclick) {
$('#imgbox-overlay').bind('click', {
elem: g,
nr: nr,
opts: opts,
titleh: titleh
}, clickhandler)
}
$('#imgbox-wrap-' + nr).css('filter', '').bind('click', {
elem: g,
nr: nr,
opts: opts,
titleh: titleh
}, clickhandler).append('').children('.imgbox-title').show();
if ($.browser.msie && parseint($.browser.version.substr(0, 1)) < 7) {
$('#imgbox-wrap-' + nr).find('.imgbox-close').fixpng()
}
busy = false
};
function clickhandler(e) {
e.stoppropagation();
if (e.target.classname == 'imgbox-close' || (e.data.opts.hideonoverlayclick && e.target.id == 'imgbox-overlay') || (e.data.opts.hideoncontentclick && e.target.classname == 'imgbox-img' && ($(this).css('z-index') == zindex || $('.imgbox-img').length == 1))) {
g = e.data.elem;
nr = e.data.nr;
opts = e.data.opts;
titleh = e.data.titleh;
zoomout()
} else if ($(this).css('z-index') < zindex) {
$(this).next('.imgbox-bg-wrap').css('z-index', ++zindex);
$(this).css('z-index', ++zindex)
}
};
function zoomout() {
if (busy) {
return false
}
busy = true;
$('#imgbox-wrap-' + nr).children('.imgbox-close, .imgbox-title').remove();
if (opts.speedout > 0) {
var a = getthumbpos();
orig_pos = {
top: a.top - opts.padding,
left: a.left - opts.padding,
width: a.width,
height: a.height
};
var a = $('#imgbox-wrap-' + nr).position();
final_pos = {
top: a.top,
left: a.left,
width: $('#imgbox-wrap-' + nr).width(),
height: $('#imgbox-wrap-' + nr).height()
};
if (opts.zoomopacity) {
final_pos.opacity = 0
}
settimeout(function() {
$('#imgbox-wrap-' + nr).css('z-index', 90);
$('#imgbox-bg-' + nr).css('z-index', 90)
}, opts.speedout * 0.5);
fx.prop = 1;
$(fx).animate({
prop: 0
}, {
duration: opts.speedin,
easing: opts.easingin,
step: draw,
complete: _clean_up
})
} else {
if (opts.overlayshow) {
_clean_up()
} else {
$('#imgbox-bg-' + nr).fadeout('fast');
$('#imgbox-wrap-' + nr).fadeout('fast', _clean_up)
}
}
};
function _clean_up() {
$('#imgbox-bg-' + nr).stop().remove();
$('#imgbox-wrap-' + nr).remove();
zindex = zindex > 90 ? zindex - 2 : 90;
if (opts.overlayshow) {
$('#imgbox-overlay').unbind().stop().fadeout(200)
}
busy = false
};
function getzoomto() {
var a = getviewport();
var b = {
width: preloader.width,
height: preloader.height
};
var c = (opts.padding + shadow + margin) * 2;
var d = (opts.padding + shadow + margin) * 2;
if (opts.autoscale && (b.width > (a[0] - c) || b.height > (a[1] - d))) {
var e = math.min(math.min(a[0] - c, b.width) / b.width, math.min(a[1] - d, b.height) / b.height);
b.width = math.round(e * b.width);
b.height = math.round(e * b.height)
}
if (opts.alignment == 'center') {
b.top = a[3] + ((a[1] - b.height - opts.padding * 2) * 0.5);
b.left = a[2] + ((a[0] - b.width - opts.padding * 2) * 0.5)
} else {
var f = getthumbpos();
b.top = f.top - ((b.height - f.height) * 0.5) - opts.padding;
b.left = f.left - ((b.width - f.width) * 0.5) - opts.padding;
b.top = b.top > a[3] + margin + shadow ? b.top : a[3] + margin + shadow;
b.left = b.left > a[2] + margin + shadow ? b.left : a[2] + margin + shadow;
b.top = b.top > a[1] + a[3] - (b.height + d) ? a[1] + a[3] - (b.height + (margin + shadow + opts.padding * 2)) : b.top;
b.left = b.left > a[0] + a[2] - (b.width + c) ? a[0] + a[2] - (b.width + (margin + shadow + opts.padding * 2)) : b.left
} if (opts.autoscale == false) {
b.top = b.top > a[3] + shadow + margin ? b.top : a[3] + shadow + margin;
b.left = b.left > a[2] + shadow + margin ? b.left : a[2] + shadow + margin
}
b.top = parseint(b.top);
b.left = parseint(b.left);
return b
};
function getviewport() {
return [$(window).width(), $(window).height(), $(document).scrollleft(), $(document).scrolltop()]
};
function getthumbpos() {
var a = $(g).find('img').eq(0);
var b = a.offset();
b.top += parsefloat(a.css('paddingtop'));
b.left += parsefloat(a.css('paddingleft'));
b.top += parsefloat(a.css('border-top-width'));
b.left += parsefloat(a.css('border-left-width'));
b.width = a.width();
b.height = a.height();
return b
};
function showactivity() {
var a = getthumbpos(g);
$('#imgbox-loading').css(a).show()
};
function hideactivity() {
$(preloader).unbind();
$('#imgbox-loading').hide()
};
function cancelloading() {
hideactivity();
if (opts.overlayshow) {
$('#imgbox-overlay').unbind().stop().fadeout(200)
}
};
function init() {
$('').appendto('body');
$('#imgbox-loading').click(cancelloading).find('div').css('opacity', 0.4)
};
$(document).ready(function() {
init()
})
})(jquery);