image_resize_classic_redmine_theme.diff

patch for auto-resizing and click on image to get full-size - rm user, 2012-06-26 01:47

Download (3.49 KB)

View differences:

classic.patched/javascripts/theme.js 2012-06-26 03:40:16.000000000 +0400
1
Event.observe(window, 'load', function() {
2
 	/* add onclick="lightbox.click();" to all <img> tags which doesnt have onclick action */
3
	adaptImages(); 
4
	/* add additional divs for lightbox & curtain tags before </body> tag */
5
	var objBody = $$('body')[0];
6
	objBody.insert({'bottom' : "<div id='lightbox' class='lightbox hidden'></div>\n<div id='curtain' class='curtain hidden'></div>"});
7
	
8
});
9

  
10
//checks for all <img> tags on the page without onclick function defined
11
function adaptImages() {
12
    var images = document.getElementsByTagName('img');
13
    for (i = 0; i != images.length; i++) {
14
        images[i].onclick = (function () {
15
            var origOnClick = images[i].onclick;
16
            return function (e) {
17
                if (origOnClick != null && !origOnClick()) {
18
                    return false;
19
                }
20
                // do new onclick handling only if
21
                // original onclick returns true
22
                lightbox.init(this,500);
23
                return true;
24
            }
25
        })();
26
    }
27
}
28

  
29

  
30
//Lightbox stuff
31
var lightbox = {
32
	init: function (image, size) {
33
		if(typeof(image)=='string') {
34
                        var src = image;
35
                        image = new Image();
36
                        image.src = src;
37
                }
38
		if (image.naturalWidth === undefined) {
39
			var tmp = document.createElement('img');
40
			tmp.style.visibility = 'hidden';
41
			tmp.src = image.src;
42
			image.naturalWidth = tmp.width;
43
			delete tmp;
44
		}
45
		if (image.naturalWidth > size) {
46
			lightbox.box(image);			
47
		}
48
	},
49
	box: function (image) {
50
		var hasA = false;
51
		if(image.parentNode != null && image.parentNode.tagName.toUpperCase() == 'A') {
52
			hasA = true;
53
		}
54
		if(!hasA) {
55
			$('lightbox').removeClassName('hidden');
56
			$('lightbox').innerHTML = '<img src="' + image.src + '" />';
57
			$('lightbox').onclick = (function(){lightbox.unbox();});
58
			$('curtain').removeClassName('hidden');
59
			$('curtain').onclick = (function(){lightbox.unbox();});
60
	
61
		}
62
	},
63
	unbox: function (data) {
64
		$('curtain').addClassName('hidden');
65
		$('lightbox').addClassName('hidden');
66
		$('lightbox').innerHTML = '';
67
	}
68
};
69
/* End Of Lightbox stuff */
70

  
classic.patched/stylesheets/application.css 2012-06-26 03:43:35.000000000 +0400
1 1
@import url(../../../stylesheets/application.css);
2 2

  
3
/* Lightbox Definitions for image hack */
4
.lightbox {
5
	position: fixed;
6
	text-align: center;
7
	top: 5%;
8
	left: 5%;
9
	width: 90%;
10
	height: 90%;
11
	padding: 0px;
12
	z-index:1002; 
13
	overflow: auto;
14
}
15

  
16
.curtain {
17
	position: fixed;
18
	top: 0%;
19
	left: 0%;
20
	width: 100%;
21
	height: 100%;
22
	background-color: black;
23
	z-index:1001;
24
	-moz-opacity: 0.8;
25
	opacity:.80;
26
	filter: alpha(opacity=80);
27
}
28

  
29
/* IE doesn't appear to like a simple display:none in our header. Random things start fucking up pretty badly. */
30
.hidden {
31
	position: absolute;
32
	left: -10000px;
33
}
34
/* End Of */
35

  
36
#content .wiki img {
37
   max-width: 500px;
38
}
39

  
40

  
3 41
body{ color:#303030; background:#e8eaec; }
4 42

  
5 43
#top-menu { font-size: 80%; height: 2em; padding-top: 0.5em; background-color: #578bb8; }