90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
var getSizeImg = function(src) {
|
|
var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
|
|
var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
|
|
|
|
try { document.body.removeChild(timg[0]); }
|
|
catch(e) {};
|
|
|
|
return size;
|
|
};
|
|
|
|
$().ready(function(){
|
|
|
|
$('#_Container').resizable({
|
|
containment: $('#_Wrapper'),
|
|
handles: 'all',
|
|
knobHandles: true,
|
|
autoHide: true,
|
|
minWidth: 100,
|
|
minHeight: 100,
|
|
resize: function(event, ui){
|
|
var self = $(this).data("resizable"),
|
|
imageSize = $('#_Container').data("image-size"),
|
|
top = self.position.top,
|
|
height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
|
|
left = self.position.left,
|
|
width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);
|
|
|
|
left = left > 0 ? left : 0;
|
|
top = top > 0 ? top : 0;
|
|
|
|
var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
|
|
|
|
//the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.
|
|
$(this).css({backgroundPosition: bgPos});
|
|
|
|
$("#log-top").html(top + "px");
|
|
$("#log-height").html(height + "px");
|
|
$("#log-left").html(left + "px");
|
|
$("#log-width").html(width + "px");
|
|
},
|
|
stop: function(event, ui){
|
|
var self = $(this).data("resizable"),
|
|
top = self.position.top,
|
|
left = self.position.left;
|
|
|
|
left = left > 0 ? left : 0;
|
|
top = top > 0 ? top : 0;
|
|
|
|
$(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
|
|
}
|
|
})
|
|
.draggable({
|
|
cursor: 'move',
|
|
containment: $('#_Wrapper'),
|
|
drag: function(event, ui){
|
|
var self = $(this).data("draggable");
|
|
$(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});
|
|
|
|
$("#log-top").html(self.position.top+"px");
|
|
$("#log-left").html(self.position.left+"px");
|
|
}
|
|
});
|
|
|
|
$('.thumbs')
|
|
.find("li a")
|
|
.click(function(event){
|
|
$('#_Container').css({top: '0', left: '0'});
|
|
|
|
var size = getSizeImg($(this).find("img").attr("src"));
|
|
|
|
$('#_Container_Image').css({
|
|
width: size.width,
|
|
height: size.height,
|
|
background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%'
|
|
});
|
|
|
|
$('#_Wrapper').css({ width: size.width, height: size.height });
|
|
$('#_Container')
|
|
.css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
|
|
.data("image-size", size);
|
|
|
|
return false;
|
|
});
|
|
|
|
$('#_Container_Image').css({ opacity: 0.5 });
|
|
$("#log-height").html($('#_Container').height()+"px");
|
|
$("#log-width").html($('#_Container').width()+"px");
|
|
|
|
$(".thumbs li a:first").click();
|
|
});
|