Mercurial > hg > digilib-old
changeset 726:6224f64cbd58 jquery
fixed birdZoomDiv positioning in embedded mode
| author | robcast |
|---|---|
| date | Tue, 01 Feb 2011 00:12:02 +0100 |
| parents | 936d88972cd0 |
| children | fc61c6b02c78 |
| files | client/digitallibrary/jquery/jquery-test-embedded-rc.html client/digitallibrary/jquery/jquery.digilib.css client/digitallibrary/jquery/jquery.digilib.js |
| diffstat | 3 files changed, 125 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/digitallibrary/jquery/jquery-test-embedded-rc.html Tue Feb 01 00:12:02 2011 +0100 @@ -0,0 +1,108 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Digilib jQuery Test: embedded</title> + + <style type="text/css"> + body { + background: silver; + } + + div.digilib { + /* padding for buttons and bird-div */ + padding-right: 18px; + padding-bottom: 100px; + /* width: 220px; */ + } + + td { + vertical-align: top; + } + + #debug { + background-color: beige; + position: absolute; + top: 400px; + padding: 0px 10px; + font-family: Arial; + font-size: 9pt; + } + + div._log { + color: grey; + } + + div._debug { + color: darkgreen; + } + + div._error { + color: red; + } + + div#test:hover { + background-color: cornsilk; + } + + </style> + + <script type="text/javascript" src="jquery-1.4.4.js"></script> + <script type="text/javascript" src="dlGeometry.js"></script> + <script type="text/javascript" src="jquery.cookie.js"></script> + <script type="text/javascript" src="jquery.digilib.js"></script> + <link rel="stylesheet" type="text/css" href="jquery.digilib.css" /> + + + <script type="text/javascript"> + $(document).ready(function(){ + $('div.digilib').digilib({ + interactionMode : 'embedded', + birdDivWidth : 100, + birdDivHeight : 100 + }); + + $('div.digilib').each(function(){ + console.log($(this).data('digilib').settings); + }); + + }); + + </script> + </head> + + <body> + <table> + <tr> + <td> + <div id="digilib-1" class="digilib single"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=11" /> + </div> + </td> + + <td> + <div id="digilib-2" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=12" /> + </div> + </td> + + <td> + <div id="digilib-3" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=13" /> + </div> + </td> + + <td> + <div id="digilib-4" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=14" /> + </div> + </td> + </tr> + </table> + <div id="debug">DEBUG</div> + <div id="test"> + <img id="test" src="img/black-glass-16.png"></img> + <img id="test2" src="img/black-glass-32.png"></img> + </div> + </body> +</html> +
--- a/client/digitallibrary/jquery/jquery.digilib.css Mon Jan 31 17:44:20 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.css Tue Feb 01 00:12:02 2011 +0100 @@ -13,13 +13,18 @@ z-index: 10; } - div.digilib div.zoomrect { position: absolute; border: 2px solid #ff0000; z-index: 100; } +div.digilib div.birdzoom { + position: absolute; + border: 2px solid #ff0000; + z-index: 100; +} + div.digilib div.mark { position: absolute; color: white; @@ -92,4 +97,4 @@ position: absolute; bottom: 0px; right: 0px; -} \ No newline at end of file +}
--- a/client/digitallibrary/jquery/jquery.digilib.js Mon Jan 31 17:44:20 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Tue Feb 01 00:12:02 2011 +0100 @@ -335,11 +335,13 @@ // event handler: toggles the visibility of the bird's eye window showBirdDiv : function (data, show) { + var settings = data.settings; if (data.$birdDiv == null) { // no bird div -> create setupBirdDiv(data); } - data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show); + settings.isBirdDivVisible = showDiv(settings.isBirdDivVisible, data.$birdDiv, show); + updateBirdDiv(data); storeOptions(data); // data.$birdImg.triggerHandler('load'); // TODO: we shouldn't do that }, @@ -788,8 +790,8 @@ // embedded mode -- just change img src var url = getScalerUrl(data); data.$img.attr('src', url); - // load new bird img (in case the scalerUrl has changed, like in gotopage) - //showBirdDiv(data); //TODO: change url explicitly + // redisplay bird img + updateBirdDiv(data); } }; @@ -934,7 +936,7 @@ // the bird's eye div var $birdDiv = $('<div class="birdview" style="display:none"/>'); // the detail indicator frame - var $birdZoom = $('<div class="birdZoom" style="display:none; position:absolute; background-color:transparent;"/>'); + var $birdZoom = $('<div class="birdzoom" style="display:none; background-color:transparent;"/>'); // the small image var $birdImg = $('<img class="birdimg"/>'); data.$birdDiv = $birdDiv; @@ -1154,6 +1156,10 @@ $birdZoom.offset(coords); } else { // nice animation for embedded mode :-) + var ppos = $birdZoom.offsetParent().offset(); + // correct offsetParent because animate is relative + coords.left = (coords.left - ppos.left) + 'px' ; + coords.top = (coords.top - ppos.top) + 'px'; $birdZoom.animate(coords); } };