Redmine

Event.observe(window, 'load', function() {

 	/* add onclick="lightbox.click();" to all <img> tags which doesnt have onclick action */

	adaptImages(); 

	/* add additional divs for lightbox & curtain tags before </body> tag */

	var objBody = $$('body')[0];

	objBody.insert({'bottom' : "<div id='lightbox' class='lightbox hidden'></div>\n<div id='curtain' class='curtain hidden'></div>"});

});

//checks for all <img> tags on the page without onclick function defined

function adaptImages() {

    var images = document.getElementsByTagName('img');

    for (i = 0; i != images.length; i++) {

        images[i].onclick = (function () {

            var origOnClick = images[i].onclick;

            return function (e) {

                if (origOnClick != null && !origOnClick()) {

                    return false;

                }

                // do new onclick handling only if

                // original onclick returns true

                lightbox.init(this,500);

                return true;

            }

        })();

    }

}

//Lightbox stuff

var lightbox = {

	init: function (image, size) {

		if(typeof(image)=='string') {

                        var src = image;

                        image = new Image();

                        image.src = src;

                }

		if (image.naturalWidth === undefined) {

			var tmp = document.createElement('img');

			tmp.style.visibility = 'hidden';

			tmp.src = image.src;

			image.naturalWidth = tmp.width;

			delete tmp;

		}

		if (image.naturalWidth > size) {

			lightbox.box(image);			

		}

	},

	box: function (image) {

		var hasA = false;

		if(image.parentNode != null && image.parentNode.tagName.toUpperCase() == 'A') {

			hasA = true;

		}

		if(!hasA) {

			$('lightbox').removeClassName('hidden');

			$('lightbox').innerHTML = '<img src="' + image.src + '" />';

			$('lightbox').onclick = (function(){lightbox.unbox();});

			$('curtain').removeClassName('hidden');

			$('curtain').onclick = (function(){lightbox.unbox();});

		}

	},

	unbox: function (data) {

		$('curtain').addClassName('hidden');

		$('lightbox').addClassName('hidden');

		$('lightbox').innerHTML = '';

	}

};

/* End Of Lightbox stuff */

/* Lightbox Definitions for image hack */

.lightbox {

	position: fixed;

	text-align: center;

	top: 5%;

	left: 5%;

	width: 90%;

	height: 90%;

	padding: 0px;

	z-index:1002; 

	overflow: auto;

}

.curtain {

	position: fixed;

	top: 0%;

	left: 0%;

	width: 100%;

	height: 100%;

	background-color: black;

	z-index:1001;

	-moz-opacity: 0.8;

	opacity:.80;

	filter: alpha(opacity=80);

}

/* IE doesn't appear to like a simple display:none in our header. Random things start fucking up pretty badly. */

.hidden {

	position: absolute;

	left: -10000px;

}

/* End Of */

#content .wiki img {

   max-width: 500px;

}