image.js
70 lines
| 2.4 KiB
| application/javascript
|
JavascriptLexer
|
r238 | function addImgPreview() { | |
|
r266 | var margin = 20; //..change | |
|
r263 | ||
|
r238 | //keybind | |
$(document).on('keyup.removepic', function(e) { | |||
if(e.which === 27) { | |||
$('.img-full').remove(); | |||
} | |||
}); | |||
|
r252 | $('body').on('click', '.thumb', function() { | |
var el = $(this); | |||
var thumb_id = 'full' + el.find('img').attr('alt'); | |||
|
r238 | ||
|
r252 | if(!$('#'+thumb_id).length) { | |
var img_w = el.find('img').attr('data-width'); | |||
var img_h = el.find('img').attr('data-height'); | |||
|
r238 | ||
|
r252 | var win_w = $(window).width(); | |
var win_h = $(window).height(); | |||
//new image size | |||
if (img_w > win_w) { | |||
|
r263 | img_h = img_h * (win_w/img_w) - margin; | |
img_w = win_w - margin; | |||
|
r238 | } | |
|
r252 | if (img_h > win_h) { | |
|
r263 | img_w = img_w * (win_h/img_h) - margin; | |
img_h = win_h - margin; | |||
|
r238 | } | |
|
r252 | 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; | |||
|
r238 | }); | |
} |