--- /dev/null
+/* zoom any image\r
+ * widget by IonDen\r
+ * v 2.3\r
+ * 02.06.2010\r
+ * rev. 55\r
+ * depends on jQuery 1.4\r
+ * UTF-8\r
+ */\r
+ \r
+(function($){\r
+ var placeToCenter = false; // этот параметр отвечает за размещение картинки\r
+\r
+ var bpOff = 0;\r
+ var bpWidth = 0;\r
+ var bpHeight = 0;\r
+ var bpcLeft = 0;\r
+ var bpcTop = 0;\r
+ \r
+ var zoomWidth = 0;\r
+ var zoomHeight = 0;\r
+ \r
+ var width_array = new Array();\r
+ var height_array = new Array();\r
+ \r
+ var screenWidth = 0;\r
+ var screenHeight = 0;\r
+ var screenScroll = 0;\r
+ var scrLeft = 0;\r
+ var scrTop = 0;\r
+ \r
+ var localTop = 0;\r
+ var localLeft = 0;\r
+ \r
+ var zoomTrash = '<div id="bigGrey"></div>\r<div class="zoomShadow"><table><tr><td class="zs1"><b></b></td><td class="zh1"><b></b></td><td class="zs2"><b></b></td></tr><tr><td class="zv1"><b></b></td><td><div class="zoomBase"></div></td><td class="zv2"><b></b></td></tr><tr><td class="zs3"><b></b></td><td class="zh2"><b></b></td><td class="zs4"><b></b></td></tr></table></div>\r';\r
+ var zoomX = '<a href="#" class="zoomX"></a>\r';\r
+\r
+ var firstClick = true;\r
+ var galNum = 0;\r
+ var oldZoom = 0;\r
+ var currentZoom = 0;\r
+ var oldW = 0;\r
+ var oldH = 0;\r
+ var oldOf = 0;\r
+ var clicked = false;\r
+ var strashno = false;\r
+ var allLoaded = false;\r
+ var loadStatus = 0;\r
+ \r
+ $("a.zoom").live("click", function(event) {\r
+ event.preventDefault();\r
+ $(this).blur();\r
+ $("a.zoomX").remove();\r
+ $("select").addClass("selOff");\r
+ \r
+ bpOff = $(this).offset();\r
+ bpWidth = $(this).find("img").width();\r
+ bpHeight = $(this).find("img").height();\r
+ if(bpWidth === null) {\r
+ bpWidth = $(this).width();\r
+ bpHeight = $(this).height();\r
+ }\r
+ bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
+ bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
+ \r
+ screenScroll = $(window).scrollTop();\r
+ screenWidth = $("body").innerWidth();\r
+ screenHeight = $(window).height();\r
+ \r
+ scrLeft = Math.round(screenWidth / 2);\r
+ scrTop = Math.round(screenScroll + (screenHeight / 2));\r
+ \r
+ if(firstClick === true) {\r
+ $("body").append(zoomTrash);\r
+ galNum = $(".zoom").length;\r
+ for(var i = 0; i < galNum; i++) {\r
+ $(".zoom:eq(" + i + ")").addClass("myZoom" + i);\r
+ }\r
+ $("body").append('<img id="zoomLoading" src="zoom/zoom-load.gif" />\r')\r
+ $("#zoomLoading").css("left", bpcLeft - 11).css("top", bpcTop - 11);\r
+\r
+ for(var i = 0; i < galNum; i++) {\r
+ var zoomUrl = $(".myZoom" + i).attr("href");\r
+ $("body").append('<img class="zoomPic" src="' + zoomUrl + "?" + Math.random()*10 + '" id="zoomPic' + i + '" />\r')\r
+ }\r
+ \r
+ currentZoom = $(this).attr("class");\r
+ currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));\r
+ currentZoom = currentZoom.slice(6);\r
+ oldZoom = currentZoom;\r
+ \r
+ for(var i = 0; i < galNum; i++) {\r
+ $("#zoomPic" + i).load(function() {\r
+ loadStatus++;\r
+ var localId = $(this).attr("id").slice(7);\r
+ width_array[localId] = $(this).width();\r
+ height_array[localId] = $(this).height();\r
+ });\r
+ }\r
+ \r
+ var loading = setInterval(waitForPics, 50);\r
+ firstClick = false;\r
+ } else {\r
+ oldZoom = currentZoom;\r
+ currentZoom = $(this).attr("class");\r
+ currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));\r
+ currentZoom = currentZoom.slice(6);\r
+ showPic();\r
+ }\r
+ \r
+ function waitForPics() {\r
+ if(loadStatus === galNum) {\r
+ $("#zoomLoading").remove();\r
+ clearInterval(loading);\r
+ showPic();\r
+ }\r
+ }\r
+ });\r
+ \r
+ function showPic() {\r
+\r
+ zoomWidth = width_array[currentZoom];\r
+ zoomHeight = height_array[currentZoom];\r
+ \r
+ var ratio = zoomWidth / zoomHeight;\r
+ \r
+ //check size\r
+ if(zoomHeight > screenHeight - 45) {\r
+ zoomHeight = screenHeight - 45;\r
+ zoomWidth = zoomHeight * ratio;\r
+ } else if(zoomWidth > screenWidth - 50) {\r
+ zoomWidth = screenWidth - 50;\r
+ zoomHeight = zoomWidth / ratio;\r
+ }\r
+ \r
+ oldW = $(".myZoom" + oldZoom + " img").width();\r
+ oldH = $(".myZoom" + oldZoom + " img").height();\r
+ oldOf = $(".myZoom" + oldZoom + " img").offset();\r
+ \r
+ if(oldW === null) {\r
+ oldW = $(".myZoom" + oldZoom).width();\r
+ oldH = $(".myZoom" + oldZoom).height();\r
+ oldOf = $(".myZoom" + oldZoom).offset();\r
+ }\r
+ \r
+ if(placeToCenter === false) {\r
+ // in place\r
+\r
+ //check place\r
+ localTop = bpcTop - (zoomHeight / 2);\r
+ if(localTop < screenScroll + 20) {localTop = screenScroll + 20};\r
+ if(localTop + zoomHeight > screenScroll + screenHeight - 20) {localTop = screenScroll + screenHeight - zoomHeight - 20};\r
+ localLeft = bpcLeft - (zoomWidth / 2);\r
+ if(localLeft < 20) {localLeft = 20};\r
+ if(localLeft > screenWidth - zoomWidth - 25) {localLeft = screenWidth - zoomWidth - 25};\r
+ \r
+ $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);\r
+\r
+ $("#zoomPic" + currentZoom).animate({\r
+ width:zoomWidth,\r
+ height:zoomHeight,\r
+ left:localLeft,\r
+ top:localTop\r
+ }, 200, setShadow);\r
+ \r
+ if(currentZoom !== oldZoom && strashno === false) {\r
+ removeShadow();\r
+ $("#zoomPic" + oldZoom).animate({\r
+ width:oldW,\r
+ height:oldH,\r
+ left:oldOf.left,\r
+ top:oldOf.top\r
+ }, 200, removeOld);\r
+ }\r
+ \r
+ strashno = false;\r
+ } else {\r
+ // in center\r
+ \r
+ //check place\r
+ localTop = (screenHeight / 2) - (zoomHeight / 2);\r
+ localLeft = (screenWidth / 2) - (zoomWidth / 2);\r
+ \r
+ $("#bigGrey").addClass("bigGrey").height($("body > div").innerHeight());\r
+ \r
+ $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);\r
+\r
+ $("#zoomPic" + currentZoom).animate({\r
+ width:zoomWidth,\r
+ height:zoomHeight,\r
+ left:localLeft,\r
+ top:localTop + $(window).scrollTop()\r
+ }, 200, setShadow);\r
+ \r
+ if(currentZoom !== oldZoom && strashno === false) {\r
+ removeShadow();\r
+ $("#zoomPic" + oldZoom).animate({\r
+ width:oldW,\r
+ height:oldH,\r
+ left:oldOf.left,\r
+ top:oldOf.top\r
+ }, 200, removeOld);\r
+ }\r
+ \r
+ strashno = false;\r
+ }\r
+ };\r
+ \r
+ function setShadow() {\r
+ clicked = false;\r
+ var zsLeft = localLeft - 6;\r
+ var zsTop = localTop - 6;\r
+ if(placeToCenter === false) {\r
+ $("div.zoomShadow").css("left", zsLeft).css("top", zsTop);\r
+ } else {\r
+ $("div.zoomShadow").css("left", zsLeft).css("top", zsTop).css("position", "fixed");\r
+ }\r
+ $("div.zoomShadow div.zoomBase").width(zoomWidth - 8).height(zoomHeight - 8);\r
+ \r
+ for(var i = 0; i < galNum; i++) {\r
+ if(i !== parseInt(currentZoom)) {\r
+ $("#zoomPic" + i).css("top", -9999).css("left", -1000).css("width", width_array[i]).css("height", height_array[i]);\r
+ }\r
+ }\r
+ \r
+ $("#zoomPic" + currentZoom).click(function(event){\r
+ $("a.zoomX").remove();\r
+ hideCurrent();\r
+ });\r
+ \r
+ $("body").append(zoomX);\r
+ if(placeToCenter === false) {\r
+ $("a.zoomX").css("left", localLeft + zoomWidth - 16).css("top", localTop - 17);\r
+ } else {\r
+ $("a.zoomX").css("left", localLeft + zoomWidth - 16).css("position", "fixed").css("top", localTop - 17);\r
+ }\r
+ \r
+ $("a.zoomX").click(function(event){\r
+ event.preventDefault();\r
+ $("a.zoomX").css("position", "absolute").remove();\r
+ hideCurrent();\r
+ });\r
+ $("select").addClass("selOff");\r
+ \r
+ if(placeToCenter === true) {\r
+ $("#zoomPic" + currentZoom).css("position", "fixed").css("top", localTop);\r
+ }\r
+ }\r
+ function removeShadow() {\r
+ $("div.zoomShadow").css("top", -9999).css("left", -1000).css("position", "absolute");\r
+ }\r
+ \r
+ function removeOld() {\r
+ $("#zoomPic" + oldZoom).css("top", -9999).css("left", -1000).css("width", width_array[oldZoom]).css("height", height_array[oldZoom]).css("position", "absolute");\r
+ }\r
+ \r
+ function hideCurrent() {\r
+ if(clicked === false) {\r
+ $("#bigGrey").removeClass("bigGrey").height(0);\r
+ $("select").removeClass("selOff");\r
+ oldZoom = currentZoom;\r
+\r
+ oldWidth = width_array[oldZoom];\r
+ oldHeight = height_array[oldZoom];\r
+ \r
+ oldW = $(".myZoom" + oldZoom + " img").width();\r
+ oldH = $(".myZoom" + oldZoom + " img").height();\r
+ oldOf = $(".myZoom" + oldZoom + " img").offset();\r
+ if(oldW === null) {\r
+ oldW = $(".myZoom" + oldZoom).width();\r
+ oldH = $(".myZoom" + oldZoom).height();\r
+ oldOf = $(".myZoom" + oldZoom).offset();\r
+ }\r
+\r
+ removeShadow();\r
+ \r
+ if(placeToCenter === false) {\r
+ $("#zoomPic" + oldZoom).animate({\r
+ width:oldW,\r
+ height:oldH,\r
+ left:oldOf.left,\r
+ top:oldOf.top\r
+ }, 200, removeOld);\r
+ } else {\r
+ $("#zoomPic" + oldZoom).animate({\r
+ width:oldW,\r
+ height:oldH,\r
+ left:oldOf.left,\r
+ top:oldOf.top - $(window).scrollTop()\r
+ }, 200, removeOld);\r
+ }\r
+ \r
+ strashno = true;\r
+ }\r
+ clicked = true;\r
+ }\r
+ \r
+ $("#bigGrey").click(function() {\r
+ $("a.zoomX").remove();\r
+ hideCurrent();\r
+ });\r
+ \r
+ $(window).keydown(function(event) {\r
+ if(event.keyCode == '27') {\r
+ $("a.zoomX").remove();\r
+ hideCurrent();\r
+ }\r
+ if(event.keyCode == '39' && galNum > 1) {\r
+ removeShadow();\r
+ $("a.zoomX").remove();\r
+ oldZoom = currentZoom;\r
+\r
+ if(firstClick === false) {\r
+ if(currentZoom < galNum - 1) {\r
+ currentZoom++;\r
+ } else {\r
+ currentZoom = 0;\r
+ }\r
+ }\r
+\r
+ bpOff = $(".myZoom" + currentZoom).offset()\r
+ bpWidth = $(".myZoom" + currentZoom).find("img").width();\r
+ bpHeight = $(".myZoom" + currentZoom).find("img").height();\r
+ if(bpWidth === null) {\r
+ bpWidth = $(".myZoom" + currentZoom).width();\r
+ bpHeight = $(".myZoom" + currentZoom).height();\r
+ }\r
+ bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
+ bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
+ \r
+ showPic();\r
+ }\r
+ if(event.keyCode == '37' && galNum > 1) {\r
+ removeShadow();\r
+ $("a.zoomX").remove();\r
+ oldZoom = currentZoom;\r
+\r
+ if(firstClick === false) {\r
+ if(currentZoom > 0) {\r
+ currentZoom--;\r
+ } else {\r
+ currentZoom = galNum - 1;\r
+ }\r
+ }\r
+ \r
+ bpOff = $(".myZoom" + currentZoom).offset()\r
+ bpWidth = $(".myZoom" + currentZoom).find("img").width();\r
+ bpHeight = $(".myZoom" + currentZoom).find("img").height();\r
+ if(bpWidth === null) {\r
+ bpWidth = $(".myZoom" + currentZoom).width();\r
+ bpHeight = $(".myZoom" + currentZoom).height();\r
+ }\r
+ bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
+ bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
+ \r
+ showPic();\r
+ }\r
+ });\r
+ \r
+ function clearCache() {\r
+ firstClick = true;\r
+ galNum = 0;\r
+ oldZoom = 0;\r
+ currentZoom = 0;\r
+ oldW = 0;\r
+ oldH = 0;\r
+ oldOf = 0;\r
+ clicked = false;\r
+ strashno = false;\r
+ allLoaded = false;\r
+ loadStatus = 0;\r
+\r
+ $("img.zoomPic").remove();\r
+ $("a.zoomX").remove();\r
+ removeShadow();\r
+ }\r
+})(jQuery);
\ No newline at end of file
projects / mysocials / blobdiff