Image zooming using scroll wheel added

src/main.c

@@ -323,20 +323,24 @@ void photo_handler( 	struct gallery_info* gallery,
 			gc->photos->string[ gc->photos->length - 1 ] );
 
 	/* Requested settings pass-thru -- if differing from defaults */
-	if ( width != DEFAULT_WIDTH )
-		hdf_set_int_value( cgi->hdf, "settings.width", width );
-	if ( height != DEFAULT_HEIGHT )
-		hdf_set_int_value( cgi->hdf, "settings.height", height );
-	if ( quality != DEFAULT_QUALITY )
-		hdf_set_int_value( cgi->hdf, "settings.quality", quality );
+	hdf_set_int_value( cgi->hdf, "settings.width", width );
+	hdf_set_int_value( cgi->hdf, "settings.height", height );
+	hdf_set_int_value( cgi->hdf, "settings.quality", quality );
 	hdf_set_value( cgi->hdf, "settings.rotation", rotation_str );
 
 	hdf_set_int_value( cgi->hdf, "photo.origwidth", 
 					photo->meta.size.width );
 	hdf_set_int_value( cgi->hdf, "photo.origheight",
 					photo->meta.size.height );
-	hdf_set_int_value( cgi->hdf, "photo.width", dims.width );
-	hdf_set_int_value( cgi->hdf, "photo.height", dims.height );
+	if ( original ) {
+		hdf_set_int_value( cgi->hdf, "photo.width", 
+					photo->meta.size.width );
+		hdf_set_int_value( cgi->hdf, "photo.height",
+					photo->meta.size.height );
+	} else {
+		hdf_set_int_value( cgi->hdf, "photo.width", dims.width );
+		hdf_set_int_value( cgi->hdf, "photo.height", dims.height );
+	}
 
 
 	if ( photo->annotation != NULL )

templates/lib.js

@@ -0,0 +1,96 @@
+function getXHR() {
+	var httpRequest;
+	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+		httpRequest = new XMLHttpRequest();
+	} else if (window.ActiveXObject) { // IE
+		httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+	return httpRequest;
+}
+
+function fetchImage( width, height ) {
+	data = getData();
+	xhr = getXHR();
+	photo_obj = document.getElementById( 'photoimg' );
+
+	xhr.onreadystatechange = function() {
+		if ( xhr.readyState == 4) {
+			document.zoom_en = true;
+			if ( xhr.status == 200 ) {
+				eval( 'data=' + xhr.responseText );
+				photo_obj.src = 
+					data.uri + '/' + data.photo.resized;
+				document.data = data;
+			}
+		}
+	};
+
+	/* Note the requested size */
+	document.requestWidth = width;
+	document.requestHeight = height;
+
+	/* Cancel any existing timers */
+	if ( document.zoom_timer )
+		window.clearTimeout( document.zoom_timer );
+	
+	/* Set a timer to fetch this data after a 3 second delay */
+	url = document.location.protocol + "//" 
+			+ document.location.hostname
+			+ document.location.pathname
+			+ '?width=' + Math.round(width)
+			+ '&height=' + Math.round(height)
+			+ '&quality=' + data.settings.quality
+			+ '&json=1';
+
+	document.zoom_timer = window.setTimeout( function() {
+		document.zoom_en = false;
+		xhr.open('GET', url );
+		xhr.send(null);
+		document.zoom_timer = false;
+	}, 3000 );
+}
+
+function setZoom( zoom ) {
+	data = getData();
+
+	document.zoom = zoom;
+	width = data.photo.origwidth*zoom;
+	height = data.photo.origheight*zoom;
+
+	photo_obj = document.getElementById( 'photoimg' );
+	if ( photo_obj ) {
+		photo_obj.width = width;
+		photo_obj.height = height;
+
+		/* If the size is bigger than our present image, request a
+		 * bigger one from the server. */
+		if ( 		( width > data.photo.width ) || 
+				( height > data.photo.height ) ) {
+			fetchImage( width, height );
+		}
+	}
+	zoomlabel = document.getElementById( 'zoomlabel' );
+	if ( zoomlabel ) {
+		zoomlabel.innerHTML = zoom;
+	}
+}
+
+function resetZoom() {
+	data = getData();
+	if ( document.zoom_en )
+		setZoom( data.photo.zoom );
+}
+
+function adjustZoom( amount ) {
+	data = getData();
+	if ( document.zoom == null )
+		document.zoom = data.photo.zoom;
+	if ( document.zoom_en )
+		setZoom( document.zoom + amount );
+}
+
+function wheelHandler( delta ) {
+	if ( document.zoom_en )
+		adjustZoom( delta * 0.01 );
+}
+document.zoom_en = true;

templates/photo.cs

@@ -5,6 +5,47 @@ body {
 }
 	</style>
 	<title>Image: <?cs var:html_strip(photo.annotation) ?> (<?cs var:photo.name ?>)</title>
+	<script lang="tyoe/javascript">
+	function getData() {
+		var data = {
+		gallery: {
+			name: '<?cs var:js_escape(gallery.name) ?>',
+			title: '<?cs var:js_escape(gallery.title) ?>',
+			desc: '<?cs var:js_escape(gallery.desc) ?>',
+			first: '<?cs var:js_escape(gallery.first) ?>',
+			last: '<?cs var:js_escape(gallery.last) ?>'
+		},
+		settings: {
+			width: <?cs var:settings.width ?>,
+			height: <?cs var:settings.height ?>,
+			quality: <?cs var:settings.quality ?>,
+			rotation: <?cs var:settings.rotation ?>
+		},
+		photo: {
+			origwidth: <?cs var:photo.origwidth ?>,
+			origheight: <?cs var:photo.origheight ?>,
+			width: <?cs var:photo.width ?>,
+			height: <?cs var:photo.height ?>,
+			annotation: "<?cs var:js_escape(photo.annotation) ?>",
+			thumbnail: "<?cs var:js_escape(photo.thumbnails) ?>",
+			resized: "<?cs var:js_escape(photo.resized) ?>",
+			name: "<?cs var:js_escape(photo.name) ?>",
+			previous: "<?cs var:js_escape(photo.previous) ?>",
+			next: "<?cs var:js_escape(photo.next) ?>",
+			zoom: 	<?cs var:photo.width ?> / 
+				<?cs var:photo.origwidth ?>
+		}};
+		if ( document.data )
+			data = document.data;
+		else
+			document.data = data;
+		return( data );
+	}
+	</script>
+	<script lang="text/javascript" src="<?cs var:uri
+		?>/templates/lib.js"></script>
+	<script lang="text/javascript" src="<?cs var:uri 
+		?>/templates/wheellib.js"></script>
 <?cs /def ?>
 <?cs def:html_body() ?>
 	<table width="100%" class="controls">
@@ -64,7 +105,8 @@ body {
 		</td>
 	</tr>
 	</table>
-	<p align="center"><img	width="<?cs var:photo.width ?>"
+	<p align="center"><img	id="photoimg"
+				width="<?cs var:photo.width ?>"
 				height="<?cs var:photo.height ?>"
 				src="<?cs var:uri ?>/<?cs var:photo.resized ?>" 
 				alt="<?cs var:html_strip(photo.annotation) ?>" 
@@ -80,7 +122,14 @@ body {
 			<input type="text" name="rotation" value="0.000" size="3" />
 		Quality: <input type="text" name="quality" value="60" size="3" /> (100% = PNG)
 		<input type="submit" value="Go" />
-		</a>
+		</a><br />
+		Zoom: <span id="zoomlabel"></span>
+		<a href="#" onclick="adjustZoom( -0.1 );">[-0.1]</a>
+		<a href="#" onclick="adjustZoom( -0.01 );">[-0.01]</a>
+		<a href="#" onclick="setZoom( 1.0 );">[1.0]</a>
+		<a href="#" onclick="adjustZoom( 0.01 );">[+0.01]</a>
+		<a href="#" onclick="adjustZoom( 0.1 );">[+0.1]</a>
+		<a href="#" onclick="resetZoom();">[reset]</a>
 	</p>
 	</form>
 <?cs /def ?>

templates/wheellib.js

@@ -0,0 +1,25 @@
+/* Source: http://adomas.org/javascript-mouse-wheel/ */
+function wheel(event){
+	var delta = 0;
+	if (!event) /* For IE. */
+		event = window.event;
+	if (event.wheelDelta) { /* IE/Opera. */
+		delta = event.wheelDelta/120;
+		if (window.opera)
+			delta = -delta;
+	} else if (event.detail) { /** Mozilla case. */
+		delta = -event.detail/3;
+	}
+	if (delta)
+		wheelHandler(delta);
+	if (event.preventDefault)
+		event.preventDefault();
+	event.returnValue = false;
+}
+
+if (window.addEventListener)
+	/** DOMMouseScroll is for mozilla. */
+	window.addEventListener('DOMMouseScroll', wheel, false);
+else
+	/** IE/Opera. */
+	window.onmousewheel = document.onmousewheel = wheel;