Mercurial > hg > digilib-old
changeset 613:53ee659e2d00 jquery
keeping img tag for embedded mode seems to work now
| author | robcast |
|---|---|
| date | Sun, 16 Jan 2011 00:56:59 +0100 |
| parents | fb94f1b74d59 |
| children | 0bd19b6cede4 5a7f82f10a5d |
| files | client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery-test.html client/digitallibrary/jquery/jquery-test2.html client/digitallibrary/jquery/jquery.digilib.js |
| diffstat | 4 files changed, 87 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html Fri Jan 14 17:07:09 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-full.html Sun Jan 16 00:56:59 2011 +0100 @@ -34,7 +34,7 @@ <script type="text/javascript"> $(document).ready(function(){ var opts = {interactionMode : 'fullscreen', - scalerBaseUrl : 'http://digilinx:18080/digitallibrary/servlet/Scaler'}; + scalerBaseUrl : 'http://localhost:18080/digitallibrary/servlet/Scaler'}; $('div.digilib').digilib(opts); $('div.digilib').each(function(){
--- a/client/digitallibrary/jquery/jquery-test.html Fri Jan 14 17:07:09 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test.html Sun Jan 16 00:56:59 2011 +0100 @@ -1,4 +1,3 @@ -<?xml version="1.0" ?> <!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> @@ -23,8 +22,6 @@ <script type="text/javascript"> $(document).ready(function(){ - // $('div.digilib').children('img').attr('src', ''); - // $('div.digilib').children('img').remove(); $('div.digilib').digilib({interactionMode : 'embedded'}); $('div.digilib').each(function(){
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/digitallibrary/jquery/jquery-test2.html Sun Jan 16 00:56:59 2011 +0100 @@ -0,0 +1,54 @@ +<!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 HTML</title> + + <style type="text/css"> + body { + background: silver; + } + + div.digilib { + float: left; + padding: 10px; + } + + </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.digilib.js"></script> + + + <script type="text/javascript"> + $(document).ready(function(){ + $('div.digilib').digilib({interactionMode : 'embedded'}); + + $('div.digilib').each(function(){ + console.log($(this).data('digilib').settings); + }); + + }); + + </script> + </head> + + <body> + + <div id="digilib-1" class="digilib single"> + <div> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=11" /> + </div> + </div> + <div id="digilib-2" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=12" /> + </div> + <div id="digilib-3" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=13" /> + </div> + <div id="digilib-4" class="digilib"> + <img src="http://localhost:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=163127KK/pageimg&pn=14" /> + </div> + </body> +</html> +
--- a/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 14 17:07:09 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Sun Jan 16 00:56:59 2011 +0100 @@ -214,7 +214,10 @@ // returns parameters taken from embedded img-element var parseImgParams = function($elem) { - var src = $elem.children('img').attr('src'); + var src = $elem.find('img').first().attr('src'); + if (!src) { + return null; + } var pos = src.indexOf('?'); var query = (pos < 0) ? '' : src.substring(pos + 1); var scalerUrl = src.substring(0, pos); @@ -265,29 +268,36 @@ // creates HTML structure for digilib in elem var setupScalerDiv = function ($elem, settings) { + var rewrite; if (settings.interactionMode === 'fullscreen') { // fullscreen var imgSize = getFullscreenImgSize($elem); settings.dw = imgSize.width; settings.dh = imgSize.height; - // create new html - $elem.empty(); // TODO: should we keep stuff for customization? + $img = $('<img/>'); var scalerUrl = getScalerString(settings); - var scalerHTML = '<div class="scaler"><img class="pic"/></div>'; - $elem.append(scalerHTML); - var $img = $elem.find("img.pic"); $img.attr('src', scalerUrl); - //$img.load(scalerImgLoaded); + $img.addClass('pic'); } else { - // embedded mode -- keep inner img - var $img = $elem.detach('img'); - $elem.empty(); // TODO: should we keep stuff for customization? - $img.addClass('pic'); - var $scaler = $('<div class="scaler"/>'); - $scaler.append($img); - $elem.append($scaler); - //$img.load(scalerImgLoaded); + // embedded mode -- try to keep img tag + var $img = $elem.find('img'); + if ($img.length > 0) { + console.debug("img detach:",$img); + $img.detach(); + $img.addClass('picsi'); + } else { + $img = $('<img/>'); + var scalerUrl = getScalerString(settings); + $img.attr('src', scalerUrl); + $img.addClass('pic'); + } } + // create new html + $elem.empty(); // TODO: should we keep stuff for customization? + var $scaler = $('<div class="scaler"/>'); + $elem.append($scaler); + $scaler.append($img); + $img.load(scalerImgLoadedFn(settings)); }; // creates HTML structure for buttons in elem @@ -312,7 +322,7 @@ $button.addClass('button-' + buttonName); // let the clicked <a> element know about the digilib context $a.data('digilib', { 'name' : buttonName, 'settings' : settings } ); - $a.bind('click', function(){ + $a.bind('click', function() { // get the context settings var data = $(this).data('digilib'); // find the action for the clicked element @@ -328,6 +338,12 @@ return $buttonsDiv; }; + // returns function for load event of scaler img + var scalerImgLoadedFn = function(settings) { + return function() { + console.debug("img loaded! settings=", settings); + }; + }; // hook plugin into jquery $.fn.digilib = function(method) { if (methods[method]) {