이미지 업로드 후 팝업

Question

이미지가있는 팝업 창을 만들려고하고 있는데 팝업이 이미지와 동일한 종횡비로 나타나길 원합니다. 그러나 나는 image.onload의 이미지 크기만을 알고 있습니다. 그래서 필요한 것은 image.onload 다음에 오는 팝업입니다. 그러나 브라우저는이를 원치 않는 팝업으로보고 차단합니다. 사용자 클릭 후 유일한 팝업 인 경우에도 마찬가지입니다.

나는 팝업을 먼저 만들고 나중에 내용과 크기를 변경하려고했지만 때로는 작동 할 때도 팝업 창이 다시 배경에 숨길 수 없게됩니다 (Windows의 크롬)

지연된 팝업이 여전히 사용자의 클릭에 hooked인지 확인하는 방법이 있습니까? 또는 다른 제안 사항.

내가하고 싶은 코드 작업 :

    selectURL: function(url) { 
     // Check for images, otherwise just simply open the file by the browser. 
     if(url.match(/(jpe?g|png|gif|bmp)$/gim)) { 
      // Check if colorbox exists and use if so. 
      if($.colorbox) { 
       $.colorbox({ 
        maxWidth:'80%', 
        maxHeight:'80%', 
        fixed: true, 
        scrolling: false, 
        href: url, 
        open: true, 
        photo: true 
       }); 
      } else { 
       // New image object so we can calculate the required popup size on load 
       var myImage = new Image(); 
       myImage.src = url; 
       // Close current window to make sure focus works 
       if(typeof(popupWindow) !== 'undefined') { 
        popupWindow.close(); 
       } 
       // Temporary loading image 
       popupWindow = window.open('/images/loading.gif','popupWindow','height=400,width=600,resizable=no,scrollbars=no,top=200,left=200'); 
       if (window.focus) { 
        popupWindow.focus(); 
       } 
       // Calculator and actual image opener :) 
       myImage.onload = function() { 
        var maxWidth = 600, 
         maxHeight = 600; 
        // Close existing popup 
        if(typeof(popupWindow) !== 'undefined') { 
         popupWindow.close(); 
        } 

        if(this.width < maxWidth && this.height < maxHeight) { 
         popupWindow = window.open(this.src,'popupWindow','height='+this.height+',width='+this.width+',resizable=no,scrollbars=no,top=200,left=200'); 
        } else if(this.width === this.height) { 
         popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } else if(this.width < this.height) { 
         popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+(maxHeight/this.height * this.width)+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } else { 
         popupWindow = window.open(this.src,'popupWindow','height='+(maxWidth/this.width * this.height)+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } 
        if (window.focus) { 
         popupWindow.focus(); 
        } 
       } 
      } 
     } else { 
      window.open(url); 
     } 
    } 

Answer 1

loading.gif가 포함 된 팝업 창이 보여주는 인 경우, 아마도 브라우저가 이 팝업을 여는 좋아하지 않는다 하나 클릭하십시오.

당신은 대상 이미지의 크기를 계산하는 동안, 당신은 로딩 이미지를 표시 할 수있는 show-image.html에 팝업을 열어보십시오, 당신은 크기를 알면 다음 window.resizeTo()를 사용하여 창 크기를 조정할 수 있습니다.

가 나는 URL 변수 등 show-image.html?image=foo.bar 또는 show-image.html?foo.bar를 사용하여 show-image.html 대상 이미지 파일 이름을 말하는 추천 할 것입니다. 이러한 메소드를 사용하려면 XSS를 피하기 위해 URL에서 수집 한 변수에서 필요한 문자를 이스케이프해야합니다.

jsFiddle을 사용하여 예제를 만들었습니다. 이 페이지는 URL 변수 인 을 통해 이미지의 URL을 테스트 목적으로 순수하게으로 받아들입니다. 사용자 자신의 구현에는 이것을 포함해서는 안됩니다 ( 페이지). 또한 자연스럽게 XSS로부터의 보호 또는 null 검사를 포함하지 않았습니다.

This은 1920x1080 대상 이미지를 사용하여 페이지에 대한 링크입니다.
This은 800x600 대상 이미지를 사용하여 페이지에 대한 링크입니다.

는 사실을보고하기 위해 그 기억 이미지의 다시로드, 당신은 이미지를 다시로드 할 수 위해서는 브라우저의 캐시를 삭제해야합니다.

Here 위의 페이지의 출처를 볼 수 있습니다. 이 데모를 조정하고 싶다면 jsFiddle의 프레임이 위치 계산을 포기할 수 있으므로 로컬 문서에 저장하는 것이 좋습니다.

위의 페이지는 내가 만든 두 번째 페이지가 포함 된 팝업을 만드는 방법을 제공합니다. 이미지 위치를 URL을 통해 두 번째 페이지로 전달합니다. 앞서 언급했듯이 두 번째 페이지에서 주어진 이미지 이름이 웹 사이트 외부로 이어지지 않도록하는 것이 좋습니다 (이 예에서는 의도적으로 생략했습니다).

Here은 첫 번째 페이지가 팝업을 만드는 소스입니다.

추가 설명이나 예제가 필요하면 알려주십시오.