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