The code used to make offsets with Maximage 2.0.

maximage-offset-contained.js

$(function(){
	// Trigger maximage
	jQuery('#maximage').maximage({
		cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size
		backgroundSize: function( $item ){
			var verticalOffset = 200, // Top offset + Bottom offset
			    horizontalOffset = 200; // Left offset + Right offset
			
			if($.Window.data('w') / $.Window.data('h') < $item.data('ar')){ // Image size based on height
				$item
					.height((($.Window.data('w') - horizontalOffset) / $item.data('ar')).toFixed(0))
					.width($.Window.data('w') - horizontalOffset);
			}else{ // Image size based on width
				$item
					.height($.Window.data('h') - verticalOffset)
					.width((($.Window.data('h') - verticalOffset) * $item.data('ar')).toFixed(0));
			}
		},
		onImagesLoaded: function(){
			jQuery('#maximage').fadeIn();
		}
	});
});

maximage-offset.css

.curtains {
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:99;
}
.curtains span {
	background:#fff;
	position:absolute;
}
.curtains .top {
	height:100px;
	left:0;
	top:0;
	width:100%;
}
.curtains .right {
	height:100%;
	right:0;
	top:0;
	width:100px;
}
.curtains .bottom {
	bottom:0;
	height:100px;
	left:0;
	width:100%;
}
.curtains .left {
	height:100%;
	left:0;
	top:0;
	width:100px;
}

maximage-offset.html

<div class="curtains">
	<span class="top"></span>
	<span class="right"></span>
	<span class="bottom"></span>
	<span class="left"></span>
</div>

<div id="maximage">
	<img src="../lib/images/demo/oldmanb.jpg" width="1422" height="1800" alt="Oldmanb">
	<img src="../lib/images/demo/test1.jpg" width="1095" height="730" alt="Test1">
	<img src="../lib/images/demo/test2.jpg" width="1158" height="869" alt="Test2">
	<img src="../lib/images/demo/test3.jpg" width="1600" height="1200" alt="Test3">
</div>

maximage-offset.js

$(function(){
	// Trigger maximage
	jQuery('#maximage').maximage({
		cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size
		backgroundSize: function( $item ){
			var verticalOffset = 200, // Top offset + Bottom offset
			    horizontalOffset = 200; // Left offset + Right offset
			
			if($.Window.data('w') / $.Window.data('h') < $item.data('ar')){ // Image size based on height
				$item
					.height($.Window.data('h') - verticalOffset)
					.width((($.Window.data('h') - verticalOffset) * $item.data('ar')).toFixed(0));
			}else{ // Image size based on width
				$item
					.height((($.Window.data('w') - horizontalOffset) / $item.data('ar')).toFixed(0))
					.width($.Window.data('w') - horizontalOffset);
			}
		},
		onImagesLoaded: function(){
			jQuery('#maximage').fadeIn();
		}
	});
});

hi is it possible to only set a top offset?
so no left, right and bottom offset?

Sir its really excellent code !! But can you give a code that is just simple to understand for a beginner programming..

This doesn't seem to work unless the img elements are a direct child of #maximage.