사용자:다메즈마/view image ex.js 문서 원본 보기


$(document).ready(function(){
  

$(".image").each(
  function(i , iter){
    
    iter.onclick =
      function(){
        var img = $(this).children("img")[0];
        var href = $(img).attr("src");
       
        if(href.startsWith("/images/thumb")){
          href = href.replace("/images/thumb","/images");
        }
        if(href.indexOf("/",href.indexOf(".")) != -1){
          var k = href.indexOf("/",href.indexOf("."));
          href = href.substring(0,k);
        }
        var img = document.createElement("img");
        $(img).load(
          function(){
            //이미지의 사이즈를 가져온다.
            var height = $(this).height();
            var width = $(this).width();
            var wh_ratio = width / height;
            //이미지의 넓이가 높이보다 크다면...
            if(wh_ratio > 1){
              
            }
            else if(wh_ratio < 1){ //이미지의 높이가 넓이보다 크다면...
              
            }
            
            $(this).css("display","block");
            $(this).css("margin","auto");
            $(this).css("opacity","1");
          });
        img.src = href;
       var area = document.createElement("div");
       $(area).css({
          "position":"fixed",
          "z-index":2000,
              "left": 0,
              "top":0,
             "width":$(document.body).width(),
          "height":$(document.body).height(),
         "background-color":"RGBA(0,0,0,0.5)"
           });
        var area2 = document.createElement("div");
        $(area2).css({
          "position":"absolute",
          "width":$(document.body).width()*0.9,
          "height":$(document.body).height()*0.9,
          "left": $(document.body).width() * 0.05,
          "top":$(document.body).height() * 0.05,
          "overflow":"scroll",
          "border":"2px solid #000",
          "text-align":"center",
          "background-color":"RGBA(0,0,0,0.9)"
        });
        $(area2).html(img);
        $(area).html(area2);
        $(area).click(function(){
          $(this).remove();
        });
        $(document.body).append(area);
      return false;
      };
    $(iter).attr("href","#");
    
  });
});