diff --git a/example1/colorbox.css b/example1/colorbox.css
index 8a4ff99..db9bbd8 100644
--- a/example1/colorbox.css
+++ b/example1/colorbox.css
@@ -10,22 +10,22 @@
 #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
-#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow, #cboxZoomin, #cboxZoomout{cursor:pointer;}
 .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
 .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
 #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
 
-/* 
+/*
     User Style:
     Change the following styles to modify the appearance of Colorbox.  They are
     ordered & tabbed in a way that represents the nesting of the generated HTML.
 */
 #cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
 #colorbox{outline:0;}
-    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
-    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
-    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
-    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
+    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -151px 0;}
+    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -180px 0;}
+    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -151px -29px;}
+    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -180px -29px;}
     #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
     #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
     #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
@@ -40,8 +40,8 @@
         #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
 
         /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
-        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
-        
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose, #cboxZoomin, #cboxZoomout {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+
         /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
         #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
 
@@ -51,7 +51,10 @@
         #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
         #cboxNext:hover{background-position:-50px -25px;}
         #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
-        #cboxClose:hover{background-position:-25px -25px;}
+        #cboxZoomin{position:absolute; bottom:0; right: 59px; background:url(images/controls.png) no-repeat -125px 0; width:25px; height:25px; text-indent:-9999px;}
+        #cboxZoomin:hover{background-position:-125px -25px}
+        #cboxZoomout{position:absolute; bottom:0; right: 32px; background:url(images/controls.png) no-repeat -100px 0; width:25px; height:25px; text-indent:-9999px;}
+        #cboxZoomout:hover{background-position:-100px -25px}
 
 /*
   The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
diff --git a/example1/images/controls.png b/example1/images/controls.png
index 1ec3cb1..1551b11 100644
Binary files a/example1/images/controls.png and b/example1/images/controls.png differ
diff --git a/example1/index.html b/example1/index.html
index 8f10b93..854230a 100644
--- a/example1/index.html
+++ b/example1/index.html
@@ -14,7 +14,7 @@
 		<script>
 			$(document).ready(function(){
 				//Examples of how to assign the Colorbox event to elements
-				$(".group1").colorbox({rel:'group1'});
+				$(".group1").colorbox({rel:'group1', zoom: true});
 				$(".group2").colorbox({rel:'group2', transition:"fade"});
 				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
 				$(".group4").colorbox({rel:'group4', slideshow:true});
@@ -33,9 +33,9 @@
 
 				$('.non-retina').colorbox({rel:'group5', transition:'none'})
 				$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
-				
+
 				//Example of preserving a JavaScript event for inline calls.
-				$("#click").click(function(){ 
+				$("#click").click(function(){
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 					return false;
 				});
@@ -48,32 +48,32 @@ <h2>Elastic Transition</h2>
 		<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
 		<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
 		<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
-		
+
 		<h2>Fade Transition</h2>
 		<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
 		<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
 		<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
-		
+
 		<h2>No Transition + fixed width and height (75% of screen size)</h2>
 		<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
 		<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
 		<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
-		
+
 		<h2>Slideshow</h2>
 		<p><a class="group4"  href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
 		<p><a class="group4"  href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
 		<p><a class="group4"  href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
-		
+
 		<h2>Other Content Types</h2>
 		<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
 		<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
 		<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
 		<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
 		<p><a class='inline' href="#inline_content">Inline HTML</a></p>
-		
+
 		<h2>Demonstration of using callbacks</h2>
 		<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
-		
+
 
 		<h2>Retina Images</h2>
 		<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
@@ -85,7 +85,7 @@ <h2>Retina Images</h2>
 			<p><strong>This content comes from a hidden element on this page.</strong></p>
 			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
 			<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
-			
+
 			<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
 			<p>Updating Content Example:<br />
 			<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
diff --git a/jquery.colorbox.js b/jquery.colorbox.js
index 4cb3938..c7ee95e 100644
--- a/jquery.colorbox.js
+++ b/jquery.colorbox.js
@@ -41,6 +41,7 @@
 		fixed: false,
 		data: undefined,
 		closeButton: true,
+		zoom: false,
 		fastIframe: true,
 		open: false,
 		reposition: true,
@@ -64,6 +65,8 @@
 		close: "close",
 		xhrError: "This content failed to load.",
 		imgError: "This image failed to load.",
+		zoomin: "+",
+		zoomout: "-",
 
 		// accessbility
 		returnFocus: true,
@@ -121,6 +124,8 @@
 	$next,
 	$prev,
 	$close,
+	$zoomin,
+	$zoomout,
 	$groupControls,
 	$events = $('<a/>'), // $({}) would be prefered, but there is an issue with jQuery 1.4.2
 
@@ -427,6 +432,15 @@
 				$close.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
 			}
 
+			if (settings.get('zoom')) {
+				$zoomin.html(settings.get('zoomin')).appendTo($content);
+				$zoomout.html(settings.get('zoomout')).appendTo($content);
+			} else {
+				$zoomin.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
+				$zoomout.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
+			}
+
+
 			load();
 		}
 	}
@@ -456,6 +470,8 @@
 			);
 
 			$close = $('<button type="button"/>').attr({id:prefix+'Close'});
+			$zoomin = $('<button type="button"/>').attr({id:prefix+'Zoomin'});
+			$zoomout = $('<button type="button"/>').attr({id:prefix+'Zoomout'});
 
 			$wrap.append( // The 3x3 Grid that makes up Colorbox
 				$tag(div).append(
@@ -509,6 +525,12 @@
 				$close.click(function () {
 					publicMethod.close();
 				});
+				$zoomin.click(function () {
+					publicMethod.zoom('in');
+				});
+				$zoomout.click(function () {
+					publicMethod.zoom('out');
+				});
 				$overlay.click(function () {
 					if (settings.get('overlayClose')) {
 						publicMethod.close();
@@ -766,7 +788,10 @@
 
 		$loaded.hide()
 		.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
-		.css({width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden'})
+		.css({
+			width: getWidth(),
+			overflow: settings.get('scrolling') && !settings.get('zoom') ? 'auto' : 'hidden'
+		})
 		.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
 		.prependTo($content);
 
@@ -776,6 +801,48 @@
 
 		$(photo).css({'float': 'none'});
 
+		if (settings.get('zoom')) {
+			$(photo).css({
+				'height': 'auto',
+				'position': 'relative',
+				'left': 0,
+				'top': 0,
+				'display': 'inline'
+			});
+
+     // Draggable variables
+      var drag = false,
+          xPos0 = 0,
+          yPos0 = 0;
+
+      // Draggable event on MouseDown
+      $loaded.mousedown(function(e){
+        drag = true;
+        xPos0 = e.pageX;
+        yPos0 = e.pageY;
+      });
+
+      // Draggable event on MouseUp
+      $(document).mouseup(function(e){
+        drag = false;
+      });
+
+      // Draggable event on MouseMove
+      $loaded.mousemove(function(e){
+        if (!drag) return false;
+        e.preventDefault();
+
+        var left = e.pageX - xPos0,
+          top = e.pageY - yPos0;
+
+        xPos0 = e.pageX;
+        yPos0 = e.pageY;
+
+        $(photo).css('left', parseInt($(photo).css('left')) + left + 'px');
+        $(photo).css('top', parseInt($(photo).css('top')) +  top + 'px');
+      });
+		}
+
 		setClass(settings.get('className'));
 
 		callback = function () {
@@ -994,7 +1061,7 @@
 						photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
 					}
 
-					if ($related[1] && (settings.get('loop') || $related[index + 1])) {
+					if ($related[1] && (settings.get('loop') || $related[index + 1]) && !settings.get('zoom')) {
 						photo.style.cursor = 'pointer';
 						photo.onclick = function () {
 							publicMethod.next();
@@ -1059,6 +1126,26 @@
 		}
 	};
 
+	// Zoom picture 'in' or 'out'
+	publicMethod.zoom = function (type) {
+		var	w = $loaded.width();
+				h = $loaded.height();
+
+		if (type === 'in') {
+			$(photo).css({
+				'width': $(photo).width() * 2,
+				'left': (parseInt($(photo).css('left')) * (-2) + w / 2) * (-1),
+				'top': (parseInt($(photo).css('top')) * (-2) + h / 2) * (-1)
+			});
+		} else if (type === 'out') {
+			$(photo).css({
+				'width': $(photo).width() / 2,
+				'left': (parseInt($(photo).css('left')) / (-2) - w / 4) * (-1),
+				'top': (parseInt($(photo).css('top')) / (-2) - h / 4 ) * (-1)
+			});
+		}
+	};
+
 	// Removes changes Colorbox made to the document, but does not remove the plugin.
 	publicMethod.remove = function () {
 		if (!$box) { return; }