Show More
@@ -1,69 +1,71 b'' | |||||
1 | function addImgPreview() { |
|
1 | function addImgPreview() { | |
|
2 | var margin = 20; | |||
|
3 | ||||
2 | //keybind |
|
4 | //keybind | |
3 | $(document).on('keyup.removepic', function(e) { |
|
5 | $(document).on('keyup.removepic', function(e) { | |
4 | if(e.which === 27) { |
|
6 | if(e.which === 27) { | |
5 | $('.img-full').remove(); |
|
7 | $('.img-full').remove(); | |
6 | } |
|
8 | } | |
7 | }); |
|
9 | }); | |
8 |
|
10 | |||
9 | $('body').on('click', '.thumb', function() { |
|
11 | $('body').on('click', '.thumb', function() { | |
10 | var el = $(this); |
|
12 | var el = $(this); | |
11 | var thumb_id = 'full' + el.find('img').attr('alt'); |
|
13 | var thumb_id = 'full' + el.find('img').attr('alt'); | |
12 |
|
14 | |||
13 | if(!$('#'+thumb_id).length) { |
|
15 | if(!$('#'+thumb_id).length) { | |
14 | var img_w = el.find('img').attr('data-width'); |
|
16 | var img_w = el.find('img').attr('data-width'); | |
15 | var img_h = el.find('img').attr('data-height'); |
|
17 | var img_h = el.find('img').attr('data-height'); | |
16 |
|
18 | |||
17 | var win_w = $(window).width(); |
|
19 | var win_w = $(window).width(); | |
18 | var win_h = $(window).height(); |
|
20 | var win_h = $(window).height(); | |
19 | //new image size |
|
21 | //new image size | |
20 | if (img_w > win_w) { |
|
22 | if (img_w > win_w) { | |
21 | img_h = img_h * (win_w/img_w); |
|
23 | img_h = img_h * (win_w/img_w) - margin; | |
22 | img_w = win_w; |
|
24 | img_w = win_w - margin; | |
23 | } |
|
25 | } | |
24 | if (img_h > win_h) { |
|
26 | if (img_h > win_h) { | |
25 | img_w = img_w * (win_h/img_h); |
|
27 | img_w = img_w * (win_h/img_h) - margin; | |
26 | img_h = win_h; |
|
28 | img_h = win_h - margin; | |
27 | } |
|
29 | } | |
28 |
|
30 | |||
29 | var img_pv = new Image(); |
|
31 | var img_pv = new Image(); | |
30 | $(img_pv) |
|
32 | $(img_pv) | |
31 | .addClass('img-full') |
|
33 | .addClass('img-full') | |
32 | .attr('id', thumb_id) |
|
34 | .attr('id', thumb_id) | |
33 | .attr('src', $(el).attr('href')) |
|
35 | .attr('src', $(el).attr('href')) | |
34 | .appendTo($(el)) |
|
36 | .appendTo($(el)) | |
35 | .css({ |
|
37 | .css({ | |
36 | 'width': img_w, |
|
38 | 'width': img_w, | |
37 | 'height': img_h, |
|
39 | 'height': img_h, | |
38 | 'left': (win_w - img_w) / 2, |
|
40 | 'left': (win_w - img_w) / 2, | |
39 | 'top': ((win_h - img_h) / 2) |
|
41 | 'top': ((win_h - img_h) / 2) | |
40 | }) |
|
42 | }) | |
41 | //scaling preview |
|
43 | //scaling preview | |
42 | .mousewheel(function(event, delta) { |
|
44 | .mousewheel(function(event, delta) { | |
43 | var cx = event.originalEvent.clientX, |
|
45 | var cx = event.originalEvent.clientX, | |
44 | cy = event.originalEvent.clientY, |
|
46 | cy = event.originalEvent.clientY, | |
45 | i_w = parseFloat($(img_pv).width()), |
|
47 | i_w = parseFloat($(img_pv).width()), | |
46 | i_h = parseFloat($(img_pv).height()), |
|
48 | i_h = parseFloat($(img_pv).height()), | |
47 | newIW = i_w * (delta > 0 ? 1.25 : 0.8), |
|
49 | newIW = i_w * (delta > 0 ? 1.25 : 0.8), | |
48 | newIH = i_h * (delta > 0 ? 1.25 : 0.8); |
|
50 | newIH = i_h * (delta > 0 ? 1.25 : 0.8); | |
49 |
|
51 | |||
50 | $(img_pv).width(newIW); |
|
52 | $(img_pv).width(newIW); | |
51 | $(img_pv).height(newIH); |
|
53 | $(img_pv).height(newIH); | |
52 | //set position |
|
54 | //set position | |
53 | $(img_pv) |
|
55 | $(img_pv) | |
54 | .css({ |
|
56 | .css({ | |
55 | left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10), |
|
57 | left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10), | |
56 | top: parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10) |
|
58 | top: parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10) | |
57 | }); |
|
59 | }); | |
58 |
|
60 | |||
59 | return false; |
|
61 | return false; | |
60 | } |
|
62 | } | |
61 | ).draggable() |
|
63 | ).draggable() | |
62 | } |
|
64 | } | |
63 | else { |
|
65 | else { | |
64 | $('#'+thumb_id).remove(); |
|
66 | $('#'+thumb_id).remove(); | |
65 | } |
|
67 | } | |
66 | //prevent default |
|
68 | //prevent default | |
67 | return false; |
|
69 | return false; | |
68 | }); |
|
70 | }); | |
69 | } No newline at end of file |
|
71 | } |
General Comments 0
You need to be logged in to leave comments.
Login now