Mercurial > hg > digilib-old
changeset 725:936d88972cd0 jquery
put styles in stylesheet.
use relative positioning in embedded mode.
| author | robcast |
|---|---|
| date | Mon, 31 Jan 2011 17:44:20 +0100 |
| parents | c6878e9575fe |
| children | 6224f64cbd58 |
| files | client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery-test-full-rc.html client/digitallibrary/jquery/jquery.digilib.css client/digitallibrary/jquery/jquery.digilib.js |
| diffstat | 4 files changed, 106 insertions(+), 110 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html Mon Jan 31 16:31:40 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-embedded.html Mon Jan 31 17:44:20 2011 +0100 @@ -9,51 +9,12 @@ } div.digilib { - padding: 10px; - width: 220px; - } - - div.buttons { - position: absolute; - margin-left: 184px; - top: 0px; - padding: 2px; - background-color: grey; - opacity: 0.4; - } - - div.button { - } - - div.button:hover { - background-color: darkred; + /* padding for buttons and bird-div */ + padding-right: 18px; + padding-bottom: 100px; + /* width: 220px; */ } - div.birdview { - border: 1px solid white; - z-index: 1; - } - - div.scaler { - background-color: grey; - z-index: 0; - } - - div.about { - position: absolute; - width: 200px; - top: 100px; - left: 350px; - height: 200px; - padding: 0px 2px; - font-family: Verdana, Arial, Helvetica, sans-serif; - border: 2px solid lightcyan; - background-color: lightgrey; - text-align: center; - display: none; - z-index: 1000; - } - td { vertical-align: top; } @@ -89,6 +50,7 @@ <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">
--- a/client/digitallibrary/jquery/jquery-test-full-rc.html Mon Jan 31 16:31:40 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-full-rc.html Mon Jan 31 17:44:20 2011 +0100 @@ -9,77 +9,13 @@ background: silver; } - div.digilib { - } - - div.buttons { - position: fixed; - right: 5px; - top: 5px; - padding: 3px; - background-color: transparent; - z-index: 20; - } - - img.button:hover { - background-image: url('../greyskin/corona.png'); - } - - div.digilib div.mark { - position: absolute; - color: white; - background: url('../greyskin/mark-bg-16.png'); - font-family: Verdana, Arial, Helvetica, sans-serif; - font-weight: bold; - font-size:11px; - height: 15px; - width: 16px; - padding-top: 1px; - text-align: center; - z-index: 10; - } - - div.digilib div.zoomrect { - position: absolute; - /* border: 2px solid #ffa060; */ - border: 2px solid #ff0000; - z-index: 100; - } - - div.birdview { - border: 1px solid white; - position: fixed; - bottom: 8px; - right: 48px; - z-index: 1; - } - - div.about { - position: absolute; - width: 200px; - top: 100px; - left: 350px; - height: 200px; - padding: 0px 2px; - font-family: Verdana, Arial, Helvetica, sans-serif; - border: 2px solid lightcyan; - background-color: lightgrey; - text-align: center; - display: none; - z-index: 1000; - } - - div.scaler { - background-color: grey; - z-index: 0; - } - </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"> @@ -96,7 +32,7 @@ <body> - <div id="digilib-1" class="digilib single"> + <div id="digilib-1" class="digilib"> <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" /> </div> </body>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/digitallibrary/jquery/jquery.digilib.css Mon Jan 31 17:44:20 2011 +0100 @@ -0,0 +1,95 @@ +/* + * CSS style file for jQuery digilib + * + * Martin Raspe, Robert Casties, 11.1.2011 + */ +div.digilib div.scaler { + background-color: grey; + z-index: 0; +} + +div.digilib div.birdview { + border: 1px solid white; + z-index: 10; +} + + +div.digilib div.zoomrect { + position: absolute; + border: 2px solid #ff0000; + z-index: 100; +} + +div.digilib div.mark { + position: absolute; + color: white; + background: url('../greyskin/mark-bg-16.png'); + font-family: Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 11px; + height: 15px; + width: 16px; + padding-top: 1px; + text-align: center; + z-index: 10; +} + +div.digilib div.about { + position: absolute; + width: 200px; + top: 100px; + left: 350px; + height: 200px; + padding: 0px 2px; + font-family: Verdana, Arial, Helvetica, sans-serif; + border: 2px solid lightcyan; + background-color: lightgrey; + text-align: center; + display: none; + z-index: 1000; +} + +/* special definitions for fullscreen */ +div.digilib.dl_fullscreen div.buttons { + position: fixed; + right: 0px; + top: 0px; + padding: 2px; + background-color: transparent; + z-index: 100; +} + +div.digilib.dl_fullscreen div.button:hover { + background-image: url('../greyskin/corona.png'); +} + +div.digilib.dl_fullscreen div.birdview { + position: fixed; + bottom: 8px; + right: 48px; +} + +/* special definitions for embedded */ +div.digilib.dl_embedded { + position: relative; +} + +div.digilib.dl_embedded div.buttons { + position: absolute; + right: 0px; + top: 0px; + padding: 1px; + background-color: grey; + opacity: 0.4; + z-index: 100; +} + +div.digilib.dl_embedded div.button:hover { + background-color: darkred; +} + +div.digilib.dl_embedded div.birdview { + position: absolute; + bottom: 0px; + right: 0px; +} \ No newline at end of file
--- a/client/digitallibrary/jquery/jquery.digilib.js Mon Jan 31 16:31:40 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Mon Jan 31 17:44:20 2011 +0100 @@ -806,9 +806,11 @@ var setupScalerDiv = function (data) { var settings = data.settings; var $elem = data.$elem; + $elem.addClass('digilib'); var $img, scalerUrl; // fullscreen if (settings.interactionMode === 'fullscreen') { + $elem.addClass('dl_fullscreen'); var imgSize = getFullscreenImgSize($elem); // fitwidth/height omits destination height/width // if (data.dlOpts['fitheight'] !== '1') { @@ -823,6 +825,7 @@ scalerUrl = getScalerUrl(data); // embedded mode -- try to keep img tag } else { + $elem.addClass('dl_embedded'); $img = $elem.find('img'); if ($img.length > 0) { console.debug("img detach:", $img); @@ -1151,7 +1154,7 @@ $birdZoom.offset(coords); } else { // nice animation for embedded mode :-) - $birdZoom.animate(coords, opts); + $birdZoom.animate(coords); } };