|
|
function addImgPreview() {
|
|
|
var margin = 20;
|
|
|
|
|
|
//keybind
|
|
|
$(document).on('keyup.removepic', function(e) {
|
|
|
if(e.which === 27) {
|
|
|
$('.img-full').remove();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$('body').on('click', '.thumb', function() {
|
|
|
var el = $(this);
|
|
|
var thumb_id = 'full' + el.find('img').attr('alt');
|
|
|
|
|
|
if(!$('#'+thumb_id).length) {
|
|
|
var img_w = el.find('img').attr('data-width');
|
|
|
var img_h = el.find('img').attr('data-height');
|
|
|
|
|
|
var win_w = $(window).width();
|
|
|
var win_h = $(window).height();
|
|
|
//new image size
|
|
|
if (img_w > win_w) {
|
|
|
img_h = img_h * (win_w/img_w) - margin;
|
|
|
img_w = win_w - margin;
|
|
|
}
|
|
|
if (img_h > win_h) {
|
|
|
img_w = img_w * (win_h/img_h) - margin;
|
|
|
img_h = win_h - margin;
|
|
|
}
|
|
|
|
|
|
var img_pv = new Image();
|
|
|
$(img_pv)
|
|
|
.addClass('img-full')
|
|
|
.attr('id', thumb_id)
|
|
|
.attr('src', $(el).attr('href'))
|
|
|
.appendTo($(el))
|
|
|
.css({
|
|
|
'width': img_w,
|
|
|
'height': img_h,
|
|
|
'left': (win_w - img_w) / 2,
|
|
|
'top': ((win_h - img_h) / 2)
|
|
|
})
|
|
|
//scaling preview
|
|
|
.mousewheel(function(event, delta) {
|
|
|
var cx = event.originalEvent.clientX,
|
|
|
cy = event.originalEvent.clientY,
|
|
|
i_w = parseFloat($(img_pv).width()),
|
|
|
i_h = parseFloat($(img_pv).height()),
|
|
|
newIW = i_w * (delta > 0 ? 1.25 : 0.8),
|
|
|
newIH = i_h * (delta > 0 ? 1.25 : 0.8);
|
|
|
|
|
|
$(img_pv).width(newIW);
|
|
|
$(img_pv).height(newIH);
|
|
|
//set position
|
|
|
$(img_pv)
|
|
|
.css({
|
|
|
left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
|
|
|
top: parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
|
|
|
});
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
).draggable()
|
|
|
}
|
|
|
else {
|
|
|
$('#'+thumb_id).remove();
|
|
|
}
|
|
|
//prevent default
|
|
|
return false;
|
|
|
});
|
|
|
}
|