NEW: Mobile support for small-screen devices such as iPhone, Android, Symbian, BlackBerry and Windows Phone

* Improved resizing algorithm
   * Before: ThickBox set fixed 150px margin around an image however small the browser window may be
   * After: ThickBox set fixed 30px margin around ThickBox window
     * Uses `jQuery(window).width()/height()` instead of `tb_getPageSize()` to remove scroll bar width
 * Removed temporary workaround for small screen (See [604041])
   * Before: ThickBox did nothing when browser windows is smaller than 480px
   * After: Uses zero margin around ThickBox window when browser windows is smaller than 480px
This commit is contained in:
attosoft committed 2012-09-29 04:57:12 +00:00
1 parent a935e46c7c
commit 34c884f470
1 file changed
+16 -13
+16 -13
View File
@@ -63,13 +63,6 @@ function tb_init(domChunk){
}
function tb_click(){
var SMALL_WIDTH = 480;
var SMALL_HEIGHT = 480;
var pageSize = tb_getPageSize();
if (pageSize[0] <= SMALL_WIDTH || pageSize[1] <= SMALL_HEIGHT) {
return true; // do nothing (i.e. the link will be opened normally)
}
if (document.getElementById("TB_window") !== null) {
jQuery(document).unbind('.thickbox');
jQuery("#TB_window").trigger("tb_unload").remove();
@@ -747,10 +740,21 @@ function tb_position() {
}
function tb_reposition(params) {
jQuery("#TB_window").width(jQuery(window).width()); // ThickBox windows height will be reset to appropriate value
var winBorderSize = tb_getSize(jQuery("#TB_window"), "border");
var winSize = tb_getSize(jQuery("#TB_window"));
var imgMarginSize = tb_getSize(jQuery("#TB_Image"), "margin");
var imgSize = tb_getSize(jQuery("#TB_Image"));
var SMALL_WIDTH = 480;
var SMALL_HEIGHT = 480;
var pageSize = tb_getPageSize();
var winMargin = (pageSize[0] <= SMALL_WIDTH || pageSize[1] <= SMALL_HEIGHT) ? 0 : 30;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var x = jQuery(window).width() - (winBorderSize[0] - winSize[0] + imgMarginSize[0] - imgSize[0]) - winMargin;
var y = jQuery(window).height() - (winBorderSize[1] - imgSize[1]) - winMargin;
var imageWidth = params['width'] ? Math.min(params['width']*1, imgPreloader.width) : imgPreloader.width;
var imageHeight = params['height'] ? Math.min(params['height']*1, imgPreloader.height) : imgPreloader.height;
tb_fitWidth = x;
@@ -769,9 +773,8 @@ function tb_reposition(params) {
jQuery("#TB_Image").attr("width", imageWidth).attr("height", imageHeight);
if (jQuery("#TB_Image").height() == 0) jQuery("#TB_Image").height(imageHeight); // workaround for "img { height: auto; }" style
var size = tb_getSize(jQuery("#TB_Image"), "margin");
TB_WIDTH = size[0];
TB_HEIGHT = size[1] + tb_getSize(jQuery("#TB_closeWindow"), "margin")[1];
TB_WIDTH = imageWidth + (imgMarginSize[0] - imgSize[0]);
TB_HEIGHT = imageHeight + (winSize[1] - imgSize[1]);
if (TB_WIDTH < params['width']*1) {
TB_WIDTH = params['width']*1;