/*
* BigImage
* Copyright 2009 Anton Kazakov
*
* Thanks for Drew Wilson (www.drewwilson.com) and his Fullsize (www.addfullsize.com)
* for inspiration and some examples of code :)
*/
/*
* Usage examples.
*
*
*
* EXAMPLE 1
*
* Binding to 
* an onclick function to show img.jpg in a window with 800px max width and 600px max height.
*
* ...
*
* ...
* OR
* ...
*
* ...
*
*
*
* EXAMPLE 2
*
* Creating an onclick for the image to show img.jpg in a window with 800px max width and 600px max height
* with a title "Look at the big one!".
*
* ...
*
* ...
*/
function BigImage (your_options) { this.constructor(your_options); }
BigImage.prototype = {
scroller_w: 19,
scroller_h: 19,
options: {},
constructor: function (your_options) {
var defaults = {
viewerMaxWidth: 0,
viewerMaxHeight: 0,
backgroundColor: '#cccccc',
borderThickness: 4,
borderColor: '#cccccc',
borderStyle: 'solid',
titleHeight: 30,
titlePadding: 3,
titleFontFamily: 'inherit',
titleFontSize: '12px',
titleFontWeight: '700',
titleFontColor: 'inherit'
};
this.options = $.extend(defaults, your_options);
},
bindToPageImages: function (specific_options) {
var this_obj = this;
$("img").each(function () {
if($(this).attr("bigimagesrc")) {
$(this).css({"cursor": "pointer"});
var img_title = $(this).attr("bigimagetitle");
var img_src = $(this).attr("bigimagesrc");
$(this).click(function () {
this_obj.show(img_title, img_src, specific_options);
})
}
})
},
unbindPageImages: function () {
$("img").each(function () {
$(this).unbind('click');
});
},
show: function (img_title, img_src, specific_options) {
opts = this.options;
if (specific_options) {
opts = $.extend(opts, specific_options);
}
var scroller_w = this.scroller_w;
var scroller_h = this.scroller_h;
var img = new Image();
$(img).load(function () {
// If there is already a shown wrapper, we should remove it
$("div.big_img_wrapper").remove();
var win_w = $(window).width();
var win_h = $(window).height();
var scrolltop = $(window).scrollTop();
var scrollleft = $(window).scrollLeft();
var img_w = this.width;
var img_h = this.height;
var title_h = img_title ? opts.titleHeight : 0;
var viewer_w = (opts.viewerMaxWidth > 0) ? Math.min(win_w, opts.viewerMaxWidth) : win_w;
var viewer_h = (opts.viewerMaxHeight > 0) ? Math.min(win_h, opts.viewerMaxHeight) : win_h;
var max_container_w = viewer_w - opts.borderThickness * 2;
var max_container_h = viewer_h - opts.borderThickness * 2 - title_h;
var do_scroll = (img_w > max_container_w) || (img_h > max_container_h);
// browser-dependant sizes modifiers
max_container_w_modifier = 0;
max_container_h_modifier = 0;
wrapper_w_modifier = 0;
wrapper_h_modifier = 0;
container_left_wrapper_w_modifier = 0;
container_top_wrapper_h_modifier = 0;
if (jQuery.browser.msie) {
if (Number(jQuery.browser.version)>=7) {
max_container_h_modifier = opts.borderThickness * 2 - 2;
}
container_left_wrapper_w_modifier = opts.borderThickness * 2;
container_top_wrapper_h_modifier = opts.borderThickness * 2;
if (Number(jQuery.browser.version)>=7) {
wrapper_h_modifier = (viewer_h==win_h) ? (opts.borderThickness * 2 - 2) : 0;
}
}
if (jQuery.browser.mozilla) {
container_left_wrapper_w_modifier = opts.borderThickness * 2;
container_top_wrapper_h_modifier = opts.borderThickness * 2;
}
if (jQuery.browser.opera) {
container_left_wrapper_w_modifier = opts.borderThickness * 2;
container_top_wrapper_h_modifier = opts.borderThickness * 2;
}
if (jQuery.browser.safari) {
container_left_wrapper_w_modifier = opts.borderThickness * 2;
container_top_wrapper_h_modifier = opts.borderThickness * 2;
}
var container_w = Math.min(max_container_w + max_container_w_modifier, img_w) + ((do_scroll && (img_w + scroller_w < max_container_w)) ? scroller_w : 0);
var container_h = Math.min(max_container_h + max_container_h_modifier, img_h) + ((do_scroll && (img_h + scroller_h < max_container_h)) ? scroller_h : 0);
var wrapper_w = container_w + wrapper_w_modifier;
var wrapper_h = container_h + wrapper_h_modifier + title_h;
var container_left = Math.round(((win_w - (wrapper_w + container_left_wrapper_w_modifier)) / 2) + scrollleft);
var container_top = Math.round(((win_h - (wrapper_h + container_top_wrapper_h_modifier)) / 2) + scrolltop);
if (container_left < 0) {
container_left = 0;
}
if (container_top < 0) {
container_top = 0;
}
// debugging sizes
/*
alert(
"img_title="+img_title+"\n"+
"win_w="+win_w+"\n"+
"win_h="+win_h+"\n"+
"scrolltop="+scrolltop+"\n"+
"scrollleft="+scrollleft+"\n"+
"img_w="+img_w+"\n"+
"img_h="+img_h+"\n"+
"viewer_w="+viewer_w+"\n"+
"viewer_h="+viewer_h+"\n"+
"max_container_w="+max_container_w+"\n"+
"max_container_h="+max_container_h+"\n"+
"container_w="+container_w+"\n"+
"container_h="+container_h+"\n"+
"wrapper_w="+wrapper_w+"\n"+
"wrapper_h="+wrapper_h+"\n"+
"container_left="+container_left+"\n"+
"container_top="+container_top+"\n"
);
/**/
var div_wrap = $("").addClass("big_img_wrapper").css({
"top": container_top + 'px',
"left": container_left + 'px',
"background-color": opts.backgroundColor,
"border": opts.borderThickness + "px " + opts.borderStyle + " " + opts.borderColor,
"width": wrapper_w + "px",
"height": wrapper_h + "px"
});
var div_img_cont = $("").addClass("big_img_container").css({
"width": container_w + "px",
"height": container_h + "px"
});
if (do_scroll) {
$(div_img_cont).css({
"overflow": "scroll"
});
}
$(div_img_cont).prepend(this);
$(div_wrap).prepend(div_img_cont);
if (img_title) {
var title_text = $("").addClass("big_img_title").css({
"height": (title_h - opts.titlePadding * 2) + "px",
"_height": title_h + "px",
"padding": opts.titlePadding + "px",
"background-color": opts.backgroundColor,
"font-family": opts.titleFontFamily,
"font-size": opts.titleFontSize,
"font-weight": opts.titleFontWeight
}).text(img_title);
// For fucking IE
if (opts.titleFontColor!='inherit') {
$(title_text).css({
"color": opts.titleFontColor
});
}
$(div_wrap).prepend(title_text);
}
// Prepending wrapper to body HTML
$("body").prepend(div_wrap);
// Showing wrapper
$(div_wrap).show();
// Binding to big image onclick hiding of wrapper
$(this).click(function(){
$(div_wrap).hide();
});
}).attr("src", img_src).addClass("big_img_container_img");
}
}