##// END OF EJS Templates
Refactored image preview code
neko259 -
r1081:6ec3505c default
parent child Browse files
Show More
@@ -1,99 +1,101 b''
1 1 /*
2 2 @licstart The following is the entire license notice for the
3 3 JavaScript code in this page.
4 4
5 5
6 6 Copyright (C) 2013 neko259
7 7
8 8 The JavaScript code in this page is free software: you can
9 9 redistribute it and/or modify it under the terms of the GNU
10 10 General Public License (GNU GPL) as published by the Free Software
11 11 Foundation, either version 3 of the License, or (at your option)
12 12 any later version. The code is distributed WITHOUT ANY WARRANTY;
13 13 without even the implied warranty of MERCHANTABILITY or FITNESS
14 14 FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
15 15
16 16 As additional permission under GNU GPL version 3 section 7, you
17 17 may distribute non-source (e.g., minimized or compacted) forms of
18 18 that code without the copy of the GNU GPL normally required by
19 19 section 4, provided you include this license notice and a URL
20 20 through which recipients can access the Corresponding Source.
21 21
22 22 @licend The above is the entire license notice
23 23 for the JavaScript code in this page.
24 24 */
25 25
26 26 function addImgPreview() {
27 27 var margin = 20; //..change
28 28
29 29 //keybind
30 30 $(document).on('keyup.removepic', function(e) {
31 31 if(e.which === 27) {
32 32 $('.img-full').remove();
33 33 }
34 34 });
35 35
36 36 $('body').on('click', '.thumb', function() {
37 37 var el = $(this);
38 38 var thumb_id = 'full' + el.find('img').attr('alt');
39 39
40 40 if(!$('#'+thumb_id).length) {
41 var img_w = el.find('img').attr('data-width');
42 var img_h = el.find('img').attr('data-height');
41 var imgElement= el.find('img');
42
43 var img_w = imgElement.attr('data-width');
44 var img_h = imgElement.attr('data-height');
43 45
44 var win_w = $(window).width();
45 var win_h = $(window).height();
46 var win = $(window);
47
48 var win_w = win.width();
49 var win_h = win.height();
46 50 //new image size
47 51 if (img_w > win_w) {
48 52 img_h = img_h * (win_w/img_w) - margin;
49 53 img_w = win_w - margin;
50 54 }
51 55 if (img_h > win_h) {
52 56 img_w = img_w * (win_h/img_h) - margin;
53 57 img_h = win_h - margin;
54 58 }
55 59
56 60 var img_pv = new Image();
57 $(img_pv)
58 .addClass('img-full')
61 var newImage = $(img_pv);
62 newImage.addClass('img-full')
59 63 .attr('id', thumb_id)
60 64 .attr('src', $(el).attr('href'))
61 65 .appendTo($(el))
62 66 .css({
63 67 'width': img_w,
64 68 'height': img_h,
65 69 'left': (win_w - img_w) / 2,
66 70 'top': ((win_h - img_h) / 2)
67 71 })
68 72 //scaling preview
69 73 .mousewheel(function(event, delta) {
70 74 var cx = event.originalEvent.clientX,
71 75 cy = event.originalEvent.clientY,
72 i_w = parseFloat($(img_pv).width()),
73 i_h = parseFloat($(img_pv).height()),
76 i_w = parseFloat(newImage.width()),
77 i_h = parseFloat(newImage.height()),
74 78 newIW = i_w * (delta > 0 ? 1.25 : 0.8),
75 79 newIH = i_h * (delta > 0 ? 1.25 : 0.8);
76 80
77 $(img_pv).width(newIW);
78 $(img_pv).height(newIH);
81 newImage.width(newIW);
82 newImage.height(newIH);
79 83 //set position
80 $(img_pv)
81 .css({
84 newImage.css({
82 85 left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
83 86 top: parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
84 87 });
85 88
86 89 return false;
87 90 }
88 91 ).draggable({
89 92 addClasses: false,
90 93 stack: '.img-full'
91 94 })
92 }
93 else {
95 } else {
94 96 $('#'+thumb_id).remove();
95 97 }
96 98 //prevent default
97 99 return false;
98 100 });
99 } No newline at end of file
101 }
General Comments 0
You need to be logged in to leave comments. Login now