twitcode.org
Login
 
back Picture Viewer Library
JavaScript
2011-10-14
gaogao_9

画像ビューアを実装するためのライブラリです。IE8、IE9、Firefox、Opera、GoogleChromeで動作確認済み。 使い方は<a href="フル画像URL" viewer="true"><img src="サムネ画像URL"></a>とするだけです。
Copy code copy code
  1. (function(){
  2.         var getLargestZIndex = function(){
  3.                 var largestZIndex = 0;
  4.                 var defaultView = document.defaultView;
  5.                 var func = function(tagname){
  6.                         var elems = document.getElementsByTagName(tagname), len=elems.length;
  7.                         for(var i=0; i<len; ++i){
  8.                                 var elem = elems[i];
  9.                                 var zIndex = elem.style.zIndex;
  10.                                         if (!zIndex) {
  11.                                                 var css = elem.currentStyle || defaultView.getComputedStyle(elem,null);
  12.                                                 zIndex = css ? css.zIndex : 0;
  13.                                         }
  14.                                 zIndex -= 0;
  15.                                 if(largestZIndex < zIndex) largestZIndex=zIndex;
  16.                         }
  17.                 };
  18.                 if(arguments.length == 0) func('*');
  19.                 else for(var i=0; i<arguments.length; ++i) func(arguments[i]);
  20.                 return largestZIndex;
  21.         };
  22.        
  23.         jQuery(function($){
  24.                 var ImageCentering = function(){
  25.                         var ImageHeight     = $("div[id='ViewerWindowForPicture']>div:eq(0)>div").height() + 19;
  26.                         var ImageWidth      = $("div[id='ViewerWindowForPicture']>div:eq(0)>div").width()  + 19;
  27.                         var WindowHeight    = $(window).height();
  28.                         var WindowWidth     = $(window).width();
  29.                         var BlockHeight     = (WindowHeight - ImageHeight) / 2;
  30.                         var BlockWidth      = (WindowWidth  - ImageWidth)  / 2;
  31.                         var BlockHeightRate = Math.floor((BlockHeight / WindowHeight) * 1000)/10 > 10
  32.                                               ? Math.floor((BlockHeight / WindowHeight) * 1000)/10
  33.                                               : 10;
  34.                         var BlockWidthRate  = Math.floor((BlockWidth  / WindowWidth)  * 1000)/10 > 10
  35.                                               ? Math.floor((BlockWidth  / WindowWidth)  * 1000)/10
  36.                                               : 10;
  37.                        
  38.                         $("div[id='ViewerWindowForPicture']>div:eq(0)").css({
  39.                                 "top"    : BlockHeightRate + "%",
  40.                                 "bottom" : BlockHeightRate + "%",
  41.                                 "left"   : BlockWidthRate  + "%",
  42.                                 "right"  : BlockWidthRate  + "%"
  43.                         });
  44.                 };
  45.                
  46.                 var CreateViewerWindow = function(){
  47.                         $("body:first").prepend(
  48.                                 "<div id='ViewerWindowForPicture'></div>"
  49.                         );
  50.                         var CreateBlackWindow = function(){
  51.                                 $("div[id='ViewerWindowForPicture']").css({
  52.                                         "display"          : "none",
  53.                                         "background-color" : "rgba(0, 0, 0, 0.5)",
  54.                                         "filter"           : "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#7f000000,EndColorStr=#7f000000)",
  55.                                         "position"         : "fixed",
  56.                                         "top"              : "0px",
  57.                                         "bottom"           : "0px",
  58.                                         "left"             : "0px",
  59.                                         "right"            : "0px"
  60.                                 });
  61.                         }();
  62.                         var CreateImageWindow = function(){
  63.                                 $("div[id='ViewerWindowForPicture']").append("<div></div>");
  64.                                 $("div[id='ViewerWindowForPicture']>div:eq(0)").append("<div></div>");
  65.                                 $("div[id='ViewerWindowForPicture']>div:eq(0)").css({
  66.                                         "overflow"         : "auto",
  67.                                         "position"         : "fixed",
  68.                                         "top"              : "10%",
  69.                                         "bottom"           : "10%",
  70.                                         "left"             : "10%",
  71.                                         "right"            : "10%"
  72.                                 });
  73.                                 $("div[id='ViewerWindowForPicture']>div:eq(0)>div").css({
  74.                                         "display"          : "table",
  75.                                         "overflow"         : "auto"
  76.                                 });
  77.                                 $("div[id='ViewerWindowForPicture']>div:eq(0)>div>img").css({
  78.                                         "position"         : "relative"
  79.                                 });
  80.                         }();
  81.                         var CreateCloseButton = function(){
  82.                                 $("div[id='ViewerWindowForPicture']").append(
  83.                                         "<div><input type='button' value='Close'></div>"
  84.                                 );
  85.                                 $("div[id='ViewerWindowForPicture']>div:eq(1)").css({
  86.                                         "position"         : "fixed",
  87.                                         "top"              : "0%",
  88.                                         "right"            : "0%"
  89.                                 });
  90.                         }();
  91.                 }();
  92.                
  93.                 $("a:has(img)").live("click",function(event){
  94.                         if($(this).attr("viewer") === "true"){
  95.                                 var ImageHref = $(this).attr("href");
  96.                                 if($("div[id='ViewerWindowForPicture']>div:eq(0)>div:has(img)").length<1){
  97.                                         $("div[id='ViewerWindowForPicture']>div:eq(0)>div").append("<img>");
  98.                                 }
  99.                                 else{
  100.                                         $("div[id='ViewerWindowForPicture']>div:eq(0)>div>img").attr("src","")
  101.                                 }
  102.                                 $("div[id='ViewerWindowForPicture']>div:eq(0)>div>img")
  103.                                         .attr("src",ImageHref)
  104.                                         .load(function(){
  105.                                                 $("div[id='ViewerWindowForPicture']")
  106.                                                         .css("z-index",getLargestZIndex()+1)
  107.                                                         .fadeIn("normal");
  108.                                                 ImageCentering();
  109.                                         });
  110.                                 return false;
  111.                         }
  112.                 });
  113.                        
  114.                 $("div[id='ViewerWindowForPicture']>div:eq(1)>input").live("click",function(event){
  115.                         $("div[id='ViewerWindowForPicture']").fadeOut("normal",function(){
  116.                                 $(this).css("z-index","-1");
  117.                         });
  118.                 });
  119.                
  120.                 $(window).bind("resize",ImageCentering);
  121.         });
  122. })();


Recent comments: ( 0 )


Please loggin to leave a comment!!