In a recent project, I encountered a problem to achieve this effect:
After clicking the thumbnail of the pic_small.Aspx page, the pic_all.aspx page will pop up. The size of the pic_all.aspx page should be automatically adjusted according to the size of the picture, and it must have description information for the picture. You can also click on the previous picture and the next picture to turn the page. .
The implementation process is as follows:
The code at the thumbnail of the pic_small.Aspx page is:
<IMG id="imgPic" style="CURSOR: hand" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow is saved in the OpenWindows.js file with the following content:
function ShowWindow( id)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
The following code can realize that after clicking the thumbnail, the page pic_all.aspx will pop up to display the image information. What is to be implemented below is that the pic_all.aspx page automatically adjusts according to the size of the image.
Place the following code between <Head></Head> on the pic_all.aspx page:
<script>
function window.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
The PicUrl here is used to display the original image size in the page pic_all.aspx. I use the html control. No matter what method you use, you have to read the name or path of the image from the database.
obj.offsetWidth gets the width of the original image displayed. obj.offsetWidth + 127 means that the window is 127 pixels larger than the width of the image, because some space needs to be left to implement the description information of the image.
In this way, the pop-up window can be automatically adjusted according to the size of the picture, and the pop-up page can be edited at will, because the pop-up page is a designated page, and no matter what you want to edit, you can handle it the same as usual. .
Thanks to Bohu for providing the key code for the entire implementation process. Without his help, I would not be able to complete the project today, and I would not be able to leave my current company with peace of mind. I would like to express my heartfelt thanks to every friend who is enthusiastic about helping others. , which is why I will write out all the problems encountered in the project, hoping to give more people some help.