Image zooming using scroll wheel added
This commit is contained in:
parent
0a15602fee
commit
9a2699a720
20
src/main.c
20
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 )
|
||||
|
||||
96
templates/lib.js
Normal file
96
templates/lib.js
Normal file
@ -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;
|
||||
@ -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 ?>
|
||||
|
||||
25
templates/wheellib.js
Normal file
25
templates/wheellib.js
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user