git.maemo.org Git - mysocials/blob - www/zoom/zoom-c.js

   1 /* zoom any image\r
   2  * widget by IonDen\r
   3  * v 2.3\r
   4  * 02.06.2010\r
   5  * rev. 55\r
   6  * depends on jQuery 1.4\r
   7  * UTF-8\r
   8  */\r
   9  \r
  10 (function($){\r
  11     var placeToCenter = true; // этот параметр отвечает за размещение картинки\r
  12 \r
  13     var bpOff = 0;\r
  14     var bpWidth = 0;\r
  15     var bpHeight = 0;\r
  16     var bpcLeft = 0;\r
  17     var bpcTop = 0;\r
  18     \r
  19     var zoomWidth = 0;\r
  20     var zoomHeight = 0;\r
  21     \r
  22     var width_array = new Array();\r
  23     var height_array = new Array();\r
  24     \r
  25     var screenWidth = 0;\r
  26     var screenHeight = 0;\r
  27     var screenScroll = 0;\r
  28     var scrLeft = 0;\r
  29     var scrTop = 0;\r
  30     \r
  31     var localTop = 0;\r
  32     var localLeft = 0;\r
  33     \r
  34     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
  35         var zoomX = '<a href="#" class="zoomX"></a>\r';\r
  36 \r
  37     var firstClick = true;\r
  38     var galNum = 0;\r
  39     var oldZoom = 0;\r
  40     var currentZoom = 0;\r
  41     var oldW = 0;\r
  42     var oldH = 0;\r
  43     var oldOf = 0;\r
  44     var clicked = false;\r
  45     var strashno = false;\r
  46     var allLoaded = false;\r
  47     var loadStatus = 0;\r
  48     \r
  49     $("a.zoom").live("click", function(event) {\r
  50         event.preventDefault();\r
  51         $(this).blur();\r
  52         $("a.zoomX").remove();\r
  53         $("select").addClass("selOff");\r
  54         \r
  55         bpOff = $(this).offset();\r
  56         bpWidth = $(this).find("img").width();\r
  57         bpHeight = $(this).find("img").height();\r
  58         if(bpWidth === null) {\r
  59             bpWidth = $(this).width();\r
  60             bpHeight = $(this).height();\r
  61         }\r
  62         bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
  63         bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
  64         \r
  65         screenScroll = $(window).scrollTop();\r
  66         screenWidth = $("body").innerWidth();\r
  67         screenHeight = $(window).height();\r
  68         \r
  69         scrLeft = Math.round(screenWidth / 2);\r
  70         scrTop = Math.round(screenScroll + (screenHeight / 2));\r
  71         \r
  72         if(firstClick === true) {\r
  73                         $("body").append(zoomTrash);\r
  74             galNum = $(".zoom").length;\r
  75             for(var i = 0; i < galNum; i++) {\r
  76                 $(".zoom:eq(" + i + ")").addClass("myZoom" + i);\r
  77             }\r
  78             $("body").append('<img id="zoomLoading" src="zoom/zoom-load.gif" />\r')\r
  79             $("#zoomLoading").css("left", bpcLeft - 11).css("top", bpcTop - 11);\r
  80 \r
  81             for(var i = 0; i < galNum; i++) {\r
  82                 var zoomUrl = $(".myZoom" + i).attr("href");\r
  83                 $("body").append('<img class="zoomPic" src="' + zoomUrl + "?" + Math.random()*10 +  '" id="zoomPic' + i + '" />\r')\r
  84             }\r
  85             \r
  86             currentZoom = $(this).attr("class");\r
  87             currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));\r
  88             currentZoom = currentZoom.slice(6);\r
  89             oldZoom = currentZoom;\r
  90             \r
  91             for(var i = 0; i < galNum; i++) {\r
  92                 $("#zoomPic" + i).load(function() {\r
  93                     loadStatus++;\r
  94                     var localId = $(this).attr("id").slice(7);\r
  95                     width_array[localId] = $(this).width();\r
  96                     height_array[localId] = $(this).height();\r
  97                 });\r
  98             }\r
  99             \r
 100             var loading = setInterval(waitForPics, 50);\r
 101             firstClick = false;\r
 102         } else {\r
 103             oldZoom = currentZoom;\r
 104             currentZoom = $(this).attr("class");\r
 105             currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));\r
 106             currentZoom = currentZoom.slice(6);\r
 107             showPic();\r
 108         }\r
 109         \r
 110         function waitForPics() {\r
 111             if(loadStatus  === galNum) {\r
 112                 $("#zoomLoading").remove();\r
 113                 clearInterval(loading);\r
 114                 showPic();\r
 115             }\r
 116         }\r
 117     });\r
 118     \r
 119     function showPic() {\r
 120 \r
 121         zoomWidth = width_array[currentZoom];\r
 122         zoomHeight = height_array[currentZoom];\r
 123         \r
 124         var ratio = zoomWidth / zoomHeight;\r
 125         \r
 126         //check size\r
 127         if(zoomHeight > screenHeight - 45) {\r
 128             zoomHeight = screenHeight - 45;\r
 129             zoomWidth = zoomHeight * ratio;\r
 130         } else if(zoomWidth > screenWidth - 50) {\r
 131             zoomWidth = screenWidth - 50;\r
 132             zoomHeight = zoomWidth / ratio;\r
 133         }\r
 134         \r
 135         oldW = $(".myZoom" + oldZoom + " img").width();\r
 136         oldH = $(".myZoom" + oldZoom + " img").height();\r
 137         oldOf = $(".myZoom" + oldZoom + " img").offset();\r
 138                 \r
 139         if(oldW === null) {\r
 140             oldW = $(".myZoom" + oldZoom).width();\r
 141             oldH = $(".myZoom" + oldZoom).height();\r
 142             oldOf = $(".myZoom" + oldZoom).offset();\r
 143         }\r
 144         \r
 145         if(placeToCenter === false) {\r
 146             // in place\r
 147 \r
 148             //check place\r
 149             localTop = bpcTop - (zoomHeight / 2);\r
 150             if(localTop < screenScroll + 20) {localTop = screenScroll + 20};\r
 151             if(localTop + zoomHeight > screenScroll + screenHeight - 20) {localTop = screenScroll + screenHeight - zoomHeight - 20};\r
 152             localLeft = bpcLeft - (zoomWidth / 2);\r
 153             if(localLeft < 20) {localLeft = 20};\r
 154             if(localLeft > screenWidth - zoomWidth - 25) {localLeft = screenWidth - zoomWidth - 25};\r
 155             \r
 156             $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);\r
 157 \r
 158             $("#zoomPic" + currentZoom).animate({\r
 159                 width:zoomWidth,\r
 160                 height:zoomHeight,\r
 161                 left:localLeft,\r
 162                 top:localTop\r
 163             }, 200, setShadow);\r
 164             \r
 165             if(currentZoom !== oldZoom && strashno === false) {\r
 166                 removeShadow();\r
 167                 $("#zoomPic" + oldZoom).animate({\r
 168                     width:oldW,\r
 169                     height:oldH,\r
 170                     left:oldOf.left,\r
 171                     top:oldOf.top\r
 172                 }, 200, removeOld);\r
 173             }\r
 174             \r
 175             strashno = false;\r
 176         } else {\r
 177             // in center\r
 178             \r
 179             //check place\r
 180             localTop = (screenHeight / 2) - (zoomHeight / 2);\r
 181             localLeft = (screenWidth / 2) - (zoomWidth / 2);\r
 182             \r
 183             $("#bigGrey").addClass("bigGrey").height($("body > table").innerHeight());\r
 184             \r
 185             $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);\r
 186 \r
 187             $("#zoomPic" + currentZoom).animate({\r
 188                 width:zoomWidth,\r
 189                 height:zoomHeight,\r
 190                 left:localLeft,\r
 191                 top:localTop + $(window).scrollTop()\r
 192             }, 200, setShadow);\r
 193             \r
 194             if(currentZoom !== oldZoom && strashno === false) {\r
 195                 removeShadow();\r
 196                 $("#zoomPic" + oldZoom).animate({\r
 197                     width:oldW,\r
 198                     height:oldH,\r
 199                     left:oldOf.left,\r
 200                     top:oldOf.top\r
 201                 }, 200, removeOld);\r
 202             }\r
 203             \r
 204             strashno = false;\r
 205         }\r
 206     };\r
 207     \r
 208     function setShadow() {\r
 209         clicked = false;\r
 210         var zsLeft = localLeft - 6;\r
 211         var zsTop = localTop - 6;\r
 212         if(placeToCenter === false) {\r
 213                 $("div.zoomShadow").css("left", zsLeft).css("top", zsTop);\r
 214                 } else {\r
 215                 $("div.zoomShadow").css("left", zsLeft).css("top", zsTop).css("position", "fixed");\r
 216                 }\r
 217         $("div.zoomShadow div.zoomBase").width(zoomWidth - 8).height(zoomHeight - 8);\r
 218         \r
 219         for(var i = 0; i < galNum; i++) {\r
 220             if(i !== parseInt(currentZoom)) {\r
 221                 $("#zoomPic" + i).css("top", -9999).css("left", -1000).css("width", width_array[i]).css("height", height_array[i]);\r
 222             }\r
 223         }\r
 224         \r
 225         $("#zoomPic" + currentZoom).click(function(event){\r
 226             $("a.zoomX").remove();\r
 227             hideCurrent();\r
 228         });\r
 229         \r
 230         $("body").append(zoomX);\r
 231         if(placeToCenter === false) {\r
 232                         $("a.zoomX").css("left", localLeft + zoomWidth - 16).css("top", localTop - 17);\r
 233                 } else {\r
 234                         $("a.zoomX").css("left", localLeft + zoomWidth - 16).css("position", "fixed").css("top", localTop - 17);\r
 235                 }\r
 236         \r
 237         $("a.zoomX").click(function(event){\r
 238             event.preventDefault();\r
 239             $("a.zoomX").css("position", "absolute").remove();\r
 240             hideCurrent();\r
 241         });\r
 242         $("select").addClass("selOff");\r
 243                 \r
 244         if(placeToCenter === true) {\r
 245                         $("#zoomPic" + currentZoom).css("position", "fixed").css("top", localTop);\r
 246                 }\r
 247     }\r
 248     function removeShadow() {\r
 249         $("div.zoomShadow").css("top", -9999).css("left", -1000).css("position", "absolute");\r
 250     }\r
 251     \r
 252     function removeOld() {\r
 253         $("#zoomPic" + oldZoom).css("top", -9999).css("left", -1000).css("width", width_array[oldZoom]).css("height", height_array[oldZoom]).css("position", "absolute");\r
 254     }\r
 255     \r
 256     function hideCurrent() {\r
 257         if(clicked === false) {\r
 258             $("#bigGrey").removeClass("bigGrey").height(0);\r
 259             $("select").removeClass("selOff");\r
 260             oldZoom = currentZoom;\r
 261 \r
 262             oldWidth = width_array[oldZoom];\r
 263             oldHeight = height_array[oldZoom];\r
 264             \r
 265             oldW = $(".myZoom" + oldZoom + " img").width();\r
 266             oldH = $(".myZoom" + oldZoom + " img").height();\r
 267             oldOf = $(".myZoom" + oldZoom + " img").offset();\r
 268             if(oldW === null) {\r
 269                 oldW = $(".myZoom" + oldZoom).width();\r
 270                 oldH = $(".myZoom" + oldZoom).height();\r
 271                 oldOf = $(".myZoom" + oldZoom).offset();\r
 272             }\r
 273 \r
 274             removeShadow();\r
 275                         \r
 276                         if(placeToCenter === false) {\r
 277                                 $("#zoomPic" + oldZoom).animate({\r
 278                                         width:oldW,\r
 279                                         height:oldH,\r
 280                                         left:oldOf.left,\r
 281                                         top:oldOf.top\r
 282                                 }, 200, removeOld);\r
 283                         } else {\r
 284                                 $("#zoomPic" + oldZoom).animate({\r
 285                                         width:oldW,\r
 286                                         height:oldH,\r
 287                                         left:oldOf.left,\r
 288                                         top:oldOf.top - $(window).scrollTop()\r
 289                                 }, 200, removeOld);\r
 290                         }\r
 291             \r
 292             strashno = true;\r
 293         }\r
 294         clicked = true;\r
 295     }\r
 296     \r
 297     $("#bigGrey").click(function() {\r
 298         $("a.zoomX").remove();\r
 299         hideCurrent();\r
 300     });\r
 301     \r
 302     $(window).keydown(function(event) {\r
 303         if(event.keyCode == '27') {\r
 304             $("a.zoomX").remove();\r
 305             hideCurrent();\r
 306         }\r
 307         if(event.keyCode == '39' && galNum > 1) {\r
 308             removeShadow();\r
 309             $("a.zoomX").remove();\r
 310             oldZoom = currentZoom;\r
 311 \r
 312             if(firstClick === false) {\r
 313                 if(currentZoom < galNum - 1) {\r
 314                     currentZoom++;\r
 315                 } else {\r
 316                     currentZoom = 0;\r
 317                 }\r
 318             }\r
 319 \r
 320             bpOff = $(".myZoom" + currentZoom).offset()\r
 321             bpWidth = $(".myZoom" + currentZoom).find("img").width();\r
 322             bpHeight = $(".myZoom" + currentZoom).find("img").height();\r
 323             if(bpWidth === null) {\r
 324                 bpWidth = $(".myZoom" + currentZoom).width();\r
 325                 bpHeight = $(".myZoom" + currentZoom).height();\r
 326             }\r
 327             bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
 328             bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
 329         \r
 330             showPic();\r
 331         }\r
 332         if(event.keyCode == '37' && galNum > 1) {\r
 333             removeShadow();\r
 334             $("a.zoomX").remove();\r
 335             oldZoom = currentZoom;\r
 336 \r
 337             if(firstClick === false) {\r
 338                 if(currentZoom > 0) {\r
 339                     currentZoom--;\r
 340                 } else {\r
 341                     currentZoom = galNum - 1;\r
 342                 }\r
 343             }\r
 344             \r
 345             bpOff = $(".myZoom" + currentZoom).offset()\r
 346             bpWidth = $(".myZoom" + currentZoom).find("img").width();\r
 347             bpHeight = $(".myZoom" + currentZoom).find("img").height();\r
 348             if(bpWidth === null) {\r
 349                 bpWidth = $(".myZoom" + currentZoom).width();\r
 350                 bpHeight = $(".myZoom" + currentZoom).height();\r
 351             }\r
 352             bpcLeft = Math.round(bpOff.left + (bpWidth / 2));\r
 353             bpcTop = Math.round(bpOff.top + (bpHeight / 2));\r
 354             \r
 355             showPic();\r
 356         }\r
 357     });\r
 358         \r
 359         function clearCache() {\r
 360                 firstClick = true;\r
 361                 galNum = 0;\r
 362                 oldZoom = 0;\r
 363                 currentZoom = 0;\r
 364                 oldW = 0;\r
 365                 oldH = 0;\r
 366                 oldOf = 0;\r
 367                 clicked = false;\r
 368                 strashno = false;\r
 369                 allLoaded = false;\r
 370                 loadStatus = 0;\r
 371 \r
 372                 $("img.zoomPic").remove();\r
 373                 $("a.zoomX").remove();\r
 374                 removeShadow();\r
 375         }\r
 376 })(jQuery);\r