최근 프로젝트에서 이 효과를 달성하는 데 문제가 발생했습니다.
pic_small.Aspx 페이지의 썸네일을 클릭하면 pic_all.aspx 페이지가 팝업됩니다. pic_all.aspx 페이지의 크기는 사진 크기에 따라 자동으로 조정되어야 하며, 사진에 대한 설명 정보가 있어야 합니다. 이전 사진과 다음 사진을 클릭하여 페이지를 넘길 수도 있습니다.
구현 프로세스는 다음과 같습니다.
pic_small.Aspx 페이지 축소판의 코드는 다음과 같습니다.
<IMG id="imgPic" style="CURSOR: 손" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow는 다음 내용으로 OpenWindows.js 파일에 저장됩니다
. 표시 창(id)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
다음 코드는 썸네일을 클릭하면 pic_all.aspx 페이지가 팝업되어 이미지 정보를 표시한다는 것을 알 수 있습니다. 아래에서 구현해야 할 것은 pic_all.aspx 페이지가 이미지 크기에 따라 자동으로 조정된다는 것입니다.
pic_all.aspx 페이지의 <Head></Head> 사이에 다음 코드를 삽입하세요:
<script>
함수 window.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
여기서 PicUrl은 pic_all.aspx 페이지에 원본 이미지 크기를 표시하는 데 사용됩니다. 어떤 방법을 사용하더라도 데이터베이스에서 이미지의 이름이나 경로를 읽어야 합니다.
obj.offsetWidth는 표시된 원본 이미지의 너비를 가져옵니다. obj.offsetWidth + 127은 이미지의 설명 정보를 구현하기 위해 일부 공간을 남겨야 하기 때문에 창이 이미지 너비보다 127픽셀 더 크다는 의미입니다.
이렇게 하면 사진의 크기에 따라 팝업창이 자동으로 조절되며, 팝업페이지는 지정된 페이지이기 때문에 원하는대로 팝업페이지를 마음대로 편집할 수 있습니다. 편집하려면 평소와 동일하게 처리하면 됩니다.
전체 구현 과정에 대한 키 코드를 제공해준 Bohu에게 감사드립니다. 그의 도움이 없었다면 오늘 프로젝트를 완료할 수 없었을 것이며 마음 편히 현재 회사를 떠날 수도 없었을 것입니다. 다른 사람들을 돕는데 열성적인 모든 친구들에게 진심으로 감사드립니다. 그래서 더 많은 사람들에게 도움이 되기를 바라며 프로젝트에서 발생한 모든 문제를 기록하겠습니다.