En un proyecto reciente, encontré un problema para lograr este efecto:
Después de hacer clic en la miniatura de la página pic_small.Aspx, aparecerá la página pic_all.aspx. El tamaño de la página pic_all.aspx debe ajustarse automáticamente de acuerdo con el tamaño de la imagen y debe tener información de descripción de la imagen. También puedes hacer clic en la imagen anterior y en la siguiente para pasar la página.
El proceso de implementación es el siguiente:
El código en la miniatura de la página pic_small.Aspx es:
<IMG id="imgPic" style="CURSOR: mano" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow se guarda en el archivo OpenWindows.js con el siguiente contenido:
función Mostrar ventana (identificación)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
El siguiente código puede darse cuenta de que después de hacer clic en la miniatura, aparecerá la página pic_all.aspx para mostrar la información de la imagen. Lo que se implementará a continuación es que la página pic_all.aspx se ajuste automáticamente de acuerdo con el tamaño de la imagen.
Coloque el siguiente código entre <Head></Head> en la página pic_all.aspx:
<script>
función ventana.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
El PicUrl aquí se usa para mostrar el tamaño de la imagen original en la página pic_all.aspx. Utilizo el control html. No importa qué método utilice, debe leer el nombre o la ruta de la imagen de la base de datos.
obj.offsetWidth obtiene el ancho de la imagen original mostrada. obj.offsetWidth + 127 significa que la ventana es 127 píxeles más grande que el ancho de la imagen, porque es necesario dejar algo de espacio para implementar la información de descripción de la imagen.
De esta manera, la ventana emergente se puede ajustar automáticamente de acuerdo con el tamaño de la imagen y la página emergente se puede editar a voluntad, porque la página emergente es una página designada y no importa lo que desee. Para editar, puedes manejarlo de la misma manera que de costumbre.
Gracias a Bohu por proporcionar el código clave para todo el proceso de implementación. Sin su ayuda, no podría completar el proyecto hoy y no podría dejar mi empresa actual con la tranquilidad que me gustaría expresar. Mi más sincero agradecimiento a todos los amigos que están entusiasmados por ayudar a los demás, por eso escribiré todos los problemas encontrados en el proyecto, con la esperanza de ayudar a más personas.