##// END OF EJS Templates
Add margin param for image preview.
rt@lightning -
r263:9c21e850 default
parent child Browse files
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