|
@@ -0,0 +1,732 @@
|
|
|
+var glob_width;
|
|
|
+var glob_height;
|
|
|
+var glob_elem;
|
|
|
+var glob_id;
|
|
|
+
|
|
|
+var stopFlag = false;
|
|
|
+
|
|
|
+$('.nav-data').click( function(e) {
|
|
|
+ var current_nav = $(this).text();
|
|
|
+ $("#header_title").text(current_nav);
|
|
|
+ name = current_nav.trim();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ index = id;
|
|
|
+ //<img id="img-preview" width="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
|
|
|
+ stopFlag = true;
|
|
|
+ $("#img-preview").attr("src", "img?id="+id+"&name="+name+"&type=preview&counter=0");
|
|
|
+ //stopFlag = true;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ $('.nav-data').each(function(index) {
|
|
|
+ id = "#nav"+$(this).text().replace ( /[^\d.]/g, '' );
|
|
|
+ if ($(this).text() != current_nav) {
|
|
|
+ $(id).collapse("hide");
|
|
|
+ } else {
|
|
|
+ console.log(current_nav, $(this).text());
|
|
|
+ //$('[data-toggle=collapse]').prop('disabled',true);
|
|
|
+ //$(id).collapse("show");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: 'update?index=' + index + '&name=' + name,
|
|
|
+ type: 'GET',
|
|
|
+ success: function (response) {
|
|
|
+ console.log("Success.");
|
|
|
+ console.log(response);
|
|
|
+ $("td#size"+response.index).text(response.data_size + " GB");
|
|
|
+ /*
|
|
|
+ $("#size").text("("+response.data_size+" GB)");
|
|
|
+
|
|
|
+ var html = "<span>Description</span>";
|
|
|
+ for (i = 0; i < response["desc"].length; i++) {
|
|
|
+ if (response["desc"][i]["type"] == "i") {
|
|
|
+ tmp = "<i>" + response["desc"][i]["text"] + "</i>";
|
|
|
+ } else if (response["desc"][i]["type"] == "p") {
|
|
|
+ tmp = response["desc"][i]["text"];
|
|
|
+ }
|
|
|
+ html += tmp;
|
|
|
+ }
|
|
|
+ $("#description").empty().append(html);
|
|
|
+
|
|
|
+ $("#front-count-text").text(" (max: " + response.front_count + ")");
|
|
|
+ $("#left-count-text").text(" (max: " + response.left_count + ")");
|
|
|
+ $("#top-count-text").text(" (max: " + response.top_count + ")");
|
|
|
+ $("#front-count").text(response.front_count);
|
|
|
+ $("#left-count").text(response.left_count);
|
|
|
+ $("#top-count").text(response.top_count);
|
|
|
+ $("#slider-right").slider("option", "max" , response.front_count );
|
|
|
+ $("#slider-left").slider("option", "max" , response.left_count );
|
|
|
+ $("#slider-center").slider("option", "max" , response.top_count );
|
|
|
+
|
|
|
+ var left_index = $( "#slider-left" ).slider( "option", "value" );
|
|
|
+ var top_index = $( "#slider-center" ).slider( "option", "value" );
|
|
|
+ var front_index = $( "#slider-right" ).slider( "option", "value" );
|
|
|
+ // update images
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
|
|
|
+ $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
|
|
|
+ $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
|
|
|
+
|
|
|
+ var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
|
|
|
+ var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1);
|
|
|
+ var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
|
|
|
+ $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
|
|
|
+ $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
|
|
|
+ $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
|
|
|
+
|
|
|
+ $("#front-quality-text").text("Magnification: " + ($("#img-front").width() / parseInt($("#front-count").text())).toFixed(2).toString());
|
|
|
+ $("#top-quality-text").text("Magnification: " + ($("#img-top").height() / parseInt($("#top-count").text())).toFixed(2).toString());
|
|
|
+ $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height() / parseInt($("#left-count").text())).toFixed(2).toString());
|
|
|
+ */
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ console.log("Error.")
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+if (document.addEventListener)
|
|
|
+{
|
|
|
+ document.addEventListener('webkitfullscreenchange', exitHandler, false);
|
|
|
+ document.addEventListener('mozfullscreenchange', exitHandler, false);
|
|
|
+ document.addEventListener('fullscreenchange', exitHandler, false);
|
|
|
+ document.addEventListener('MSFullscreenChange', exitHandler, false);
|
|
|
+}
|
|
|
+
|
|
|
+function exitHandler() {
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $(glob_elem).css("width", "100%");
|
|
|
+ $(glob_elem).css("height", "100%");
|
|
|
+ $(glob_elem).css("background-color", "white");
|
|
|
+ $(glob_elem).css("color", "#000");
|
|
|
+ $("#front-quality-text").text("Size: 25%");
|
|
|
+ $("#top-quality-text").text("Size: 25%");
|
|
|
+ $("#left-quality-text").text("Size: 25%");
|
|
|
+ $("#"+glob_id).width('100%');
|
|
|
+ $("#"+glob_id).height("100%");
|
|
|
+ } else {
|
|
|
+ $("#front-quality-text").text("Size: 100%");
|
|
|
+ $("#top-quality-text").text("Size: 100%");
|
|
|
+ $("#left-quality-text").text("Size: 100%");
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function toggleFullscreen(elem, _id) {
|
|
|
+ elem = elem || document.documentElement;
|
|
|
+
|
|
|
+ console.log("ID: "+_id);
|
|
|
+ var ori_width = glob_width
|
|
|
+ var ori_height = glob_height;
|
|
|
+
|
|
|
+ var fs_scale;
|
|
|
+ var myRatio;
|
|
|
+ if (window.devicePixelRatio < 1) {
|
|
|
+ myRatio = 1.0;
|
|
|
+ } else {
|
|
|
+ myRatio = 2.0;
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#"+_id).css('width', 'auto')
|
|
|
+ $("#"+_id).css('height', 'auto')
|
|
|
+
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ if ((ori_height*1.2) > ori_width) {
|
|
|
+ //newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
|
|
|
+ //newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
|
|
|
+ newWidth = screen.width * (1/ myRatio);
|
|
|
+ newHeight = screen.width * (ori_height/ori_width) * (1/ myRatio);
|
|
|
+
|
|
|
+ $("#"+_id).removeAttr('width');
|
|
|
+ $("#"+_id).height("80%");
|
|
|
+ } else {
|
|
|
+ newHeight = screen.height * (1/myRatio);
|
|
|
+ newWidth = screen.height * (ori_width/ori_height) * (1/myRatio);
|
|
|
+ $("#"+_id).removeAttr('height');
|
|
|
+ $("#"+_id).width("100%");
|
|
|
+ //newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
|
|
|
+ //newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
|
|
|
+ }
|
|
|
+
|
|
|
+ $(elem).css("height", (newHeight)+"px");
|
|
|
+ $(elem).css("width", (newWidth)+"px");
|
|
|
+
|
|
|
+ //$("#"+_id).removeAttr('width');
|
|
|
+ //$("#"+_id).height("80%");
|
|
|
+ //$(elem).css("width", "200px");
|
|
|
+
|
|
|
+ $(elem).css("background-color", "black");
|
|
|
+ $(elem).css("color", "#ccc");
|
|
|
+
|
|
|
+ if (elem.requestFullscreen) {
|
|
|
+ elem.requestFullscreen();
|
|
|
+ } else if (elem.msRequestFullscreen) {
|
|
|
+ elem.msRequestFullscreen();
|
|
|
+ } else if (elem.mozRequestFullScreen) {
|
|
|
+ elem.mozRequestFullScreen();
|
|
|
+ } else if (elem.webkitRequestFullscreen) {
|
|
|
+ elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#"+_id).width('100%');
|
|
|
+ $("#"+_id).height("100%");
|
|
|
+ //$(elem).css("width", "100%");
|
|
|
+ $(elem).css("background-color", "white");
|
|
|
+ $(elem).css("color", "#000");
|
|
|
+
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function IsImageOk(img) {
|
|
|
+ // During the onload event, IE correctly identifies any images that
|
|
|
+ // weren’t downloaded as not complete. Others should too. Gecko-based
|
|
|
+ // browsers act like NS4 in that they report this incorrectly.
|
|
|
+ if (!img.complete) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // However, they do have two very useful properties: naturalWidth and
|
|
|
+ // naturalHeight. These give the true size of the image. If it failed
|
|
|
+ // to load, either of these should be zero.
|
|
|
+
|
|
|
+ if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // No other way of checking: assume it’s ok.
|
|
|
+ return true;
|
|
|
+}
|
|
|
+
|
|
|
+var imgTopArray = [];
|
|
|
+var imgFrontArray = [];
|
|
|
+var imgLeftArray = [];
|
|
|
+
|
|
|
+$(function() {
|
|
|
+
|
|
|
+
|
|
|
+ $(window).resize(function() {
|
|
|
+ $("#front-quality-text").text("Magnification: " + ($("#img-front").width() / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
|
|
|
+ $("#top-quality-text").text("Magnification: " + ($("#img-top").height() / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
|
|
|
+ $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height() / parseInt($("#left-count").text())).toFixed(2).toString() + "%");
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var name;
|
|
|
+ var id;
|
|
|
+ $( "#slider-left" ).slider({
|
|
|
+ range: "max",
|
|
|
+ min: 1,
|
|
|
+ max: parseInt($("#left-count").text()),
|
|
|
+ //max: 1500,
|
|
|
+ value: 1,
|
|
|
+ stop: function(event, ui) {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1));
|
|
|
+ },
|
|
|
+ slide: function( event, ui ) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ if (ui.value > imgFrontArray.length) {
|
|
|
+ $("#img-left-container").empty();
|
|
|
+ } else {
|
|
|
+ if (IsImageOk(imgLeftArray[ui.value-1]) ) {
|
|
|
+ $("#img-left-container").empty().append(imgLeftArray[ui.value-1]);
|
|
|
+ } else {
|
|
|
+ //$("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#left-text").text(ui.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $( "#slider-right" ).slider({
|
|
|
+ range: "max",
|
|
|
+ min: 1,
|
|
|
+ max: parseInt($("#front-count").text()),
|
|
|
+ value: 1,
|
|
|
+ start: function(event, ui) {
|
|
|
+ processLargeFrontArray( parseInt( $("#front-count").text()) );
|
|
|
+ },
|
|
|
+ stop: function(event, ui) {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1));
|
|
|
+ },
|
|
|
+ slide: function( event, ui ) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ if (ui.value > imgFrontArray.length) {
|
|
|
+ $("#img-front-container").empty();
|
|
|
+ } else {
|
|
|
+ if (IsImageOk(imgFrontArray[ui.value-1]) ) {
|
|
|
+ $("#img-front-container").empty().append(imgFrontArray[ui.value-1]);
|
|
|
+ } else {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#front-text").text(ui.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $( "#slider-center" ).slider({
|
|
|
+ range: "max",
|
|
|
+ min: 1,
|
|
|
+ max: parseInt($("#top-count").text()),
|
|
|
+ //max: 1500,
|
|
|
+ value: 1,
|
|
|
+ stop: function(event, ui) {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1));
|
|
|
+ },
|
|
|
+ slide: function( event, ui ) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ if (ui.value > imgTopArray.length) {
|
|
|
+ $("#img-top-container").empty();
|
|
|
+ } else {
|
|
|
+ if (IsImageOk(imgTopArray[ui.value-1]) ) {
|
|
|
+ $("#img-top-container").empty().append(imgTopArray[ui.value-1]);
|
|
|
+ } else {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#top-text").text(ui.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $( "#download" ).click(function(e) {
|
|
|
+ var did = $( "select option:selected" ).text();
|
|
|
+ e.preventDefault(); //stop the browser from following
|
|
|
+ window.location.href = 'download?did=' + did;
|
|
|
+ });
|
|
|
+
|
|
|
+ /*
|
|
|
+ $('.target').change(function() {
|
|
|
+ var name = $(this).find("option:selected").text();
|
|
|
+ var index = $(this).find("option:selected").val();
|
|
|
+ $.ajax({
|
|
|
+ url: 'update?index=' + index + '&name=' + name,
|
|
|
+ type: 'GET',
|
|
|
+ success: function (response) {
|
|
|
+ console.log("Success.");
|
|
|
+ console.log(response);
|
|
|
+ $("#size").text("("+response.data_size+" GB)");
|
|
|
+
|
|
|
+ var html = "<span>Description</span>";
|
|
|
+ for (i = 0; i < response["desc"].length; i++) {
|
|
|
+ if (response["desc"][i]["type"] == "i") {
|
|
|
+ tmp = "<i>" + response["desc"][i]["text"] + "</i>";
|
|
|
+ } else if (response["desc"][i]["type"] == "p") {
|
|
|
+ tmp = response["desc"][i]["text"];
|
|
|
+ }
|
|
|
+ html += tmp;
|
|
|
+ }
|
|
|
+ $("#description").empty().append(html);
|
|
|
+
|
|
|
+ $("#front-count-text").text(" (max: " + response.front_count + ")");
|
|
|
+ $("#left-count-text").text(" (max: " + response.left_count + ")");
|
|
|
+ $("#top-count-text").text(" (max: " + response.top_count + ")");
|
|
|
+ $("#front-count").text(response.front_count);
|
|
|
+ $("#left-count").text(response.left_count);
|
|
|
+ $("#top-count").text(response.top_count);
|
|
|
+ $("#slider-right").slider("option", "max" , response.front_count );
|
|
|
+ $("#slider-left").slider("option", "max" , response.left_count );
|
|
|
+ $("#slider-center").slider("option", "max" , response.top_count );
|
|
|
+
|
|
|
+ var left_index = $( "#slider-left" ).slider( "option", "value" );
|
|
|
+ var top_index = $( "#slider-center" ).slider( "option", "value" );
|
|
|
+ var front_index = $( "#slider-right" ).slider( "option", "value" );
|
|
|
+ // update images
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
|
|
|
+ $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
|
|
|
+ $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
|
|
|
+
|
|
|
+ var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
|
|
|
+ var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1);
|
|
|
+ var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
|
|
|
+ $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
|
|
|
+ $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
|
|
|
+ $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
|
|
|
+
|
|
|
+ $("#front-quality-text").text("Magnification: " + ($("#img-front").width() / parseInt($("#front-count").text())).toFixed(2).toString());
|
|
|
+ $("#top-quality-text").text("Magnification: " + ($("#img-top").height() / parseInt($("#top-count").text())).toFixed(2).toString());
|
|
|
+ $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height() / parseInt($("#left-count").text())).toFixed(2).toString());
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ console.log("Error.")
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $("#img-preview").attr("src", "img?id="+index+"&name="+name+"&type=preview&counter=0");
|
|
|
+ });
|
|
|
+ */
|
|
|
+
|
|
|
+ $("#front-left").click( function() {
|
|
|
+ var index = parseInt($("#front-text").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ index -= 1;
|
|
|
+ if (index < 1) {
|
|
|
+ index = 1;
|
|
|
+ }
|
|
|
+ $("#front-text").text(index);
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
|
|
|
+
|
|
|
+ /*
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#front-right").click( function() {
|
|
|
+ var index = parseInt($("#front-text").text());
|
|
|
+ var max_count = parseInt($("#front-count").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ //console.log(index, max_count);
|
|
|
+ index += 1;
|
|
|
+ if (index > max_count) {
|
|
|
+ index = max_count;
|
|
|
+ }
|
|
|
+ $("#front-text").text(index);
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
|
|
|
+
|
|
|
+ /*
|
|
|
+ // update image src
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#top-left").click( function() {
|
|
|
+ var index = parseInt($("#top-text").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ index -= 1;
|
|
|
+ if (index < 1) {
|
|
|
+ index = 1;
|
|
|
+ }
|
|
|
+ $("#top-text").text(index);
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
|
|
|
+ /*
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#top-right").click( function() {
|
|
|
+ var index = parseInt($("#top-text").text());
|
|
|
+ var max_count = parseInt($("#top-count").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ //console.log(index, max_count);
|
|
|
+ index += 1;
|
|
|
+ if (index > max_count) {
|
|
|
+ index = max_count;
|
|
|
+ }
|
|
|
+ $("#top-text").text(index);
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
|
|
|
+ /*
|
|
|
+ // update image src
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#left-left").click( function() {
|
|
|
+ var index = parseInt($("#left-text").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ index -= 1;
|
|
|
+ if (index < 1) {
|
|
|
+ index = 1;
|
|
|
+ }
|
|
|
+ $("#left-text").text(index);
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
|
|
|
+
|
|
|
+ /*
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#left-right").click( function() {
|
|
|
+ var index = parseInt($("#left-text").text());
|
|
|
+ var max_count = parseInt($("#left-count").text());
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ //console.log(index, max_count);
|
|
|
+ index += 1;
|
|
|
+ if (index > max_count) {
|
|
|
+ index = max_count;
|
|
|
+ }
|
|
|
+ $("#left-text").text(index);
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
|
|
|
+
|
|
|
+ /*
|
|
|
+ // update image src
|
|
|
+ if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
|
|
|
+ } else {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
|
|
|
+ }
|
|
|
+ */
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ // FULLSCREEN
|
|
|
+ document.getElementById("img-front").addEventListener("click", function() {
|
|
|
+ var container = $("#photowrapper-front");
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ glob_id = this.id;
|
|
|
+ glob_width = $("#photowrapper-front > img").width();
|
|
|
+ glob_height = $("#photowrapper-front > img").height();
|
|
|
+ glob_elem = $("#photowrapper-front")[0];
|
|
|
+ }
|
|
|
+ toggleFullscreen(container[0], this.id);
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('img-top').addEventListener('click', function() {
|
|
|
+ var container = $("#photowrapper-top");
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ glob_id = this.id;
|
|
|
+ glob_width = $("#photowrapper-top > img").width();
|
|
|
+ glob_height = $("#photowrapper-top > img").height();
|
|
|
+ glob_elem = $("#photowrapper-top")[0];
|
|
|
+ }
|
|
|
+ toggleFullscreen(container[0], this.id);
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('placeholder-left').addEventListener('click', function() {
|
|
|
+ var container = $("#photowrapper-left");
|
|
|
+ if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
+ !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
+ glob_id = this.id;
|
|
|
+ glob_width = $("#photowrapper-left > img").width();
|
|
|
+ glob_height = $("#photowrapper-left > img").height();
|
|
|
+ glob_elem = $("#photowrapper-left")[0];
|
|
|
+ }
|
|
|
+ toggleFullscreen(container[0], this.id);
|
|
|
+ });
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ $("#img-top").ezPlus({
|
|
|
+ zoomWindowPosition: 1,
|
|
|
+ scrollZoom: true,
|
|
|
+ zoomLevel: 0.1,
|
|
|
+ minZoomLevel: 0.1,
|
|
|
+ zoomWindowWidth: 300,
|
|
|
+ zoomWindowHeight: 300
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#placeholder-left").ezPlus({
|
|
|
+ zoomWindowPosition: 9,
|
|
|
+ scrollZoom: true,
|
|
|
+ zoomLevel: 0.1,
|
|
|
+ minZoomLevel: 0.1,
|
|
|
+ zoomWindowWidth: 300,
|
|
|
+ zoomWindowHeight: 300
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#img-front").ezPlus({
|
|
|
+ zoomWindowPosition: 11,
|
|
|
+ scrollZoom: true,
|
|
|
+ zoomLevel: 0.1,
|
|
|
+ minZoomLevel: 0.1,
|
|
|
+ zoomWindowWidth: 300,
|
|
|
+ zoomWindowHeight: 300
|
|
|
+ });
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ * print folder, imLeft.size, imTop.size, imFront.size
|
|
|
+ * NRM-PZ Ar65771 (1174, 2929) (1173, 2929) (1173, 1174)
|
|
|
+ * NRM-PZ Ar65772 (1122, 3200) (1173, 3200) (1173, 1122)
|
|
|
+ * NRM-PZ Ar65794 (1118, 3113) (1133, 3113) (1133, 1118)
|
|
|
+ * NRM-PZ Ar65793 (1294, 3431) (1240, 3431) (1240, 1294)
|
|
|
+ * NRM-PZ Ar65720 (1223, 3311) (1267, 3311) (1267, 1223)
|
|
|
+ * NRM-PZ Ar65767 (1302, 2936) (1284, 2936) (1284, 1302)
|
|
|
+ */
|
|
|
+ $("#front-quality-text").text("Magnification: 0.34");
|
|
|
+ $("#top-quality-text").text("Magnification: 0.13");
|
|
|
+ $("#left-quality-text").text("Magnification: 0.13");
|
|
|
+
|
|
|
+ /*
|
|
|
+ console.log("FRONT QUALITY: " + $("#img-front").width() + " / " + $("#front-count").text() );
|
|
|
+ console.log("TOP QUALITY: " + $("#img-top").height() + " / " + $("#top-count").text() );
|
|
|
+ console.log("LEFT QUALITY: " + $("#placeholder-left").height() + " / " + $("#left-count").text() );
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ // PRELOAD Front Images
|
|
|
+ for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ var img = new Image();
|
|
|
+ img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+i;
|
|
|
+ img.id = "img-front";
|
|
|
+ img.style.width = 100 + '%';
|
|
|
+ imgFrontArray[i] = img;
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ function processLargeFrontArray(max_iter) {
|
|
|
+ // set this to whatever number of items you can process at once
|
|
|
+ var chunk = 10;
|
|
|
+ var index = 0;
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ function doChunk() {
|
|
|
+ var cnt = chunk;
|
|
|
+ while (cnt-- && index < max_iter) {
|
|
|
+ var img = new Image();
|
|
|
+ img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+index;
|
|
|
+ img.id = "img-front";
|
|
|
+ img.style.width = 100 + '%';
|
|
|
+ imgFrontArray[index] = img;
|
|
|
+ if (stopFlag == true) {
|
|
|
+ max_iter = 999999;
|
|
|
+ imgFrontArray = [];
|
|
|
+ stopFlag = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ // process array[index] here
|
|
|
+ ++index;
|
|
|
+ }
|
|
|
+ if (index < max_iter && index < 1500) {
|
|
|
+ // set Timeout for async iteration
|
|
|
+ setTimeout(doChunk, 100);
|
|
|
+ }
|
|
|
+ /*else {
|
|
|
+ processLargeFrontArray( parseInt( $("#front-count").text()) );
|
|
|
+ }*/
|
|
|
+ }
|
|
|
+ doChunk();
|
|
|
+ }
|
|
|
+ //processLargeFrontArray( parseInt( $("#front-count").text()) );
|
|
|
+
|
|
|
+ /*
|
|
|
+ // PRELOAD Top Images
|
|
|
+ for (i = 0; i < parseInt( $("#top-count").text() ); i++) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ var img = new Image();
|
|
|
+ img.src = "img?id="+id+"&name="+name+"&type=top-resized&counter="+i;
|
|
|
+ img.id = "img-top";
|
|
|
+ img.style.width = 100 + '%';
|
|
|
+ imgTopArray[i] = img;
|
|
|
+ }
|
|
|
+
|
|
|
+ // PRELOAD Left Images
|
|
|
+ for (i = 0; i < parseInt( $("#left-count").text() ); i++) {
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+
|
|
|
+ var img = new Image();
|
|
|
+ img.src = "img?id="+id+"&name="+name+"&type=left-resized&counter="+i;
|
|
|
+ img.id = "placeholder-left";
|
|
|
+ img.style.width = 100 + '%';
|
|
|
+ imgLeftArray[i] = img;
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ /*
|
|
|
+ // WEB WORKER APPROACH
|
|
|
+ var worker = new Worker('http://katrin.kit.edu/static/js/doWork.js');
|
|
|
+ name = $( "#header_title" ).text();
|
|
|
+ id = name.replace ( /[^\d.]/g, '' );
|
|
|
+ //worker.postMessage(999999999);
|
|
|
+ //
|
|
|
+ //
|
|
|
+ myArray = []
|
|
|
+ for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
|
|
|
+ var img = new Image();
|
|
|
+ myArray[i] = img;
|
|
|
+ }
|
|
|
+
|
|
|
+ worker.postMessage({'name': name, 'id': id, 'front_count': $("#front-count").text(), 'imgContainer': myArray });
|
|
|
+
|
|
|
+ // array of images
|
|
|
+ // var images = [];
|
|
|
+
|
|
|
+ //worker.addEventListener('message', function(e) {
|
|
|
+ // console.log(e.data);
|
|
|
+ //}, false);
|
|
|
+
|
|
|
+ worker.onmessage = function(e) {
|
|
|
+ console.log(e.data);
|
|
|
+ }
|
|
|
+ */
|
|
|
+});
|
|
|
+
|
|
|
+
|