Mercurial > hg > digilib-old
comparison client/digitallibrary/jquery/jquery.digilib.js @ 670:11d96bc0ac09 jquery
birdview: nice animation for embedded mode, none for fullscreen
author | hertzhaft |
---|---|
date | Mon, 24 Jan 2011 23:07:57 +0100 |
parents | b93241aa017c |
children | a53c3e12995a |
comparison
equal
deleted
inserted
replaced
669:b93241aa017c | 670:11d96bc0ac09 |
---|---|
609 window.location = url; | 609 window.location = url; |
610 } else { | 610 } else { |
611 // embedded mode -- just change img src | 611 // embedded mode -- just change img src |
612 var url = getScalerUrl(data); | 612 var url = getScalerUrl(data); |
613 data.$img.attr('src', url); | 613 data.$img.attr('src', url); |
614 var $birdImg = data.$birdImg; | 614 }; |
615 if ($birdImg) { | |
616 $birdImg.triggerHandler('load'); | |
617 }; | |
618 } | |
619 }; | 615 }; |
620 | 616 |
621 // returns maximum size for scaler img in fullscreen mode | 617 // returns maximum size for scaler img in fullscreen mode |
622 var getFullscreenImgSize = function($elem) { | 618 var getFullscreenImgSize = function($elem) { |
623 var $win = $(window); | 619 var $win = $(window); |
729 var birdSettings = $.extend({}, settings, settings.birdDivOptions); | 725 var birdSettings = $.extend({}, settings, settings.birdDivOptions); |
730 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); | 726 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); |
731 // the bird's eye div | 727 // the bird's eye div |
732 var $birdDiv = $('<div class="birdview" style="display:none"/>'); | 728 var $birdDiv = $('<div class="birdview" style="display:none"/>'); |
733 // the detail indicator frame | 729 // the detail indicator frame |
734 var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>'); | 730 var $birdzoomDiv = $('<div class="birdzoom" style="display:none; position:absolute; background-color:transparent;"/>'); |
735 // the small image | 731 // the small image |
736 var $birdImg = $('<img class="birdimg"/>'); | 732 var $birdImg = $('<img class="birdimg"/>'); |
737 $elem.append($birdDiv); | 733 $elem.append($birdDiv); |
738 $birdDiv.append($birdzoomDiv); | 734 $birdDiv.append($birdzoomDiv); |
739 $birdDiv.append($birdImg); | 735 $birdDiv.append($birdImg); |
736 $birdzoomDiv.css(data.settings.birdIndicatorStyle); | |
737 // $birdzoomDiv.offset($birdDiv.offset()); | |
738 // $birdzoomDiv.width($birdDiv.width()); | |
739 // $birdzoomDiv.height($birdDiv.height()); | |
740 data.$birdDiv = $birdDiv; | 740 data.$birdDiv = $birdDiv; |
741 data.$birdImg = $birdImg; | 741 data.$birdImg = $birdImg; |
742 $birdImg.load(birdImgLoadedHandler(data)); | 742 $birdImg.load(birdImgLoadedHandler(data)); |
743 $birdImg.attr('src', birdUrl); | 743 $birdImg.attr('src', birdUrl); |
744 if (data.settings.isBirdDivVisible) { | 744 if (data.settings.isBirdDivVisible) { |
826 // create Transform from current area and picsize | 826 // create Transform from current area and picsize |
827 data.imgTrafo = getImgTrafo($img, data.zoomArea, data); | 827 data.imgTrafo = getImgTrafo($img, data.zoomArea, data); |
828 // display marks | 828 // display marks |
829 renderMarks(data); | 829 renderMarks(data); |
830 //digilib.showArrows(); // show arrow overlays for zoom navigation | 830 //digilib.showArrows(); // show arrow overlays for zoom navigation |
831 var $birdImg = data.$birdImg; | |
832 if ($birdImg) { | |
833 $birdImg.triggerHandler('load'); | |
834 }; | |
831 }; | 835 }; |
832 }; | 836 }; |
833 | 837 |
834 // returns function for load event of bird's eye view img | 838 // returns function for load event of bird's eye view img |
835 var birdImgLoadedHandler = function (data) { | 839 var birdImgLoadedHandler = function (data) { |
836 var $img = data.$birdImg; | 840 var $img = data.$birdImg; |
837 return function () { | 841 return function () { |
838 if (!$img) return; | 842 if (!$img) return; |
839 console.debug("birdimg loaded! this=", this, " data=", data); | 843 // console.debug("birdimg loaded! this=", this, " data=", data); |
840 // create Transform from current area and picsize | 844 // create Transform from current area and picsize |
841 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA); | 845 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA); |
842 // display red indicator around zoomarea | 846 // display red indicator around zoomarea |
843 renderBirdArea(data); | 847 renderBirdArea(data); |
844 }; | 848 }; |
865 | 869 |
866 var renderBirdArea = function (data) { | 870 var renderBirdArea = function (data) { |
867 var $ind = data.$birdDiv.find('div.birdzoom'); | 871 var $ind = data.$birdDiv.find('div.birdzoom'); |
868 var zoomArea = data.zoomArea; | 872 var zoomArea = data.zoomArea; |
869 var indRect = data.birdTrafo.transform(zoomArea); | 873 var indRect = data.birdTrafo.transform(zoomArea); |
870 if (isFullArea(zoomArea)) return $ind.hide(); | 874 var coords = { |
871 // TODO: set the coordinates all in one call? | 875 left : indRect.x-2, // acount for frame width |
872 $ind.width(indRect.width); | 876 top : indRect.y-2, |
873 $ind.height(indRect.height); | 877 width : indRect.width, |
874 // offset minus frame width | 878 height: indRect.height |
875 $ind.offset({ left : indRect.x-2, top : indRect.y-2 }); | 879 }; |
876 $ind.css(data.settings.birdIndicatorStyle); | 880 var normalSize = isFullArea(zoomArea); |
881 if (data.settings.interactionMode === 'fullscreen') { | |
882 // no animation for fullscreen | |
883 if (normalSize) return $ind.hide(); | |
884 $ind.width(coords.width); | |
885 $ind.height(coords.height); | |
886 $ind.offset(coords); | |
887 $ind.show(); | |
888 return; | |
889 }; | |
890 // nice animation for embedded mode :-) | |
891 var makeCompleteFunction = function($ind, normalSize) { | |
892 return function() { | |
893 if (normalSize) $ind.hide(); } | |
894 }; | |
895 var opts = { | |
896 'complete' : makeCompleteFunction($ind, normalSize) | |
897 }; | |
898 if (!normalSize && $ind.css('display') === 'none') $ind.show(); | |
899 $ind.animate(coords, opts); | |
877 }; | 900 }; |
878 | 901 |
879 // zooms by the given factor | 902 // zooms by the given factor |
880 var zoomBy = function(data, factor) { | 903 var zoomBy = function(data, factor) { |
881 var area = data.zoomArea; | 904 var area = data.zoomArea; |