1. CS文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Drawing;
using System.ComponentModel;
using System.Drawing.Design;
using GlacierCLI.Web.WebControls.ClientResource;
namespace GlacierCLI.Web.WebControls
{
[ClientResource(ClientResourceType.CssFile, "GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.ImageThumbViewer.css")]
[ClientResource(ClientResourceType.ScriptFile, "GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.ImageThumbViewer.js")]
[ToolboxData("<{0}:ImageThumbViewer runat=\"server\" OriginalImageURL=\"\" Title=\"\" Width=\"100\" Height=\"100\" />")]
[ToolboxBitmap(typeof(System.Web.UI.WebControls.Image))]
public class ImageThumbViewer : Control
{
public string ToolTip
{
get
{
return ViewState["ToolTip"] == null ?
string.Empty : ViewState["ToolTip"].ToString();
}
set
{
ViewState["ToolTip"] = value;
}
}
public int ImageBoxWidth
{
get
{
return ViewState["ImageBoxWidth"] == null ? 800 : (int)ViewState["ImageBoxWidth"];
}
set
{
ViewState["ImageBoxWidth"] = value;
}
}
public int ImageBoxHeight
{
get
{
return ViewState["ImageBoxHeight"] == null ? 600 : (int)ViewState["ImageBoxHeight"];
}
set
{
ViewState["ImageBoxHeight"] = value;
}
}
public int Width
{
get
{
return ViewState["Width"] == null ? 100 : (int)ViewState["Width"];
}
set
{
ViewState["Width"] = value;
}
}
public int Height
{
get
{
return ViewState["Height"] == null ? 100 : (int)ViewState["Height"];
}
set
{
ViewState["Height"] = value;
}
}
[Category("Appearance")]
[Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
[UrlProperty]
[Description("Image_ImageUrl")]
[Bindable(true)]
[DefaultValue("")]
public string OriginalImageURL
{
get
{
return ViewState["OriginalImageURL"] == null ?
string.Empty : ViewState["OriginalImageURL"].ToString();
}
set
{
ViewState["OriginalImageURL"] = value;
}
}
private string ThumbImageURL
{
get
{
return this.ThumbImageHandlerURL + "?f=" + this.OriginalImageURL + "&w=" + this.Width + "&h=" + this.Height;
}
}
public string ThumbImageHandlerURL
{
get
{
if (ViewState["ThumbImageHandlerURL"] == null)
{
return string.Empty;
}
else
{
return ViewState["ThumbImageHandlerURL"] as string;
}
}
set
{
ViewState["ThumbImageHandlerURL"] = value;
}
}
[Category("Appearance")]
[DefaultValue("")]
[Description("WebControl_CSSClassName")]
[CssClassProperty]
public virtual string CssClass
{
get
{
return ViewState["CssClass"] == null ?
string.Empty : ViewState["CssClass"].ToString();
}
set
{
ViewState["CssClass"] = value;
}
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
ClientResourceUtility.RegisterClientResources(this);
}
protected override void Render(HtmlTextWriter writer)
{
if (string.IsNullOrWhiteSpace(this.CssClass))
{
writer.Write(string.Format(@"<img src=""{0}"" οnclick=""glacier_ImageBox_Show('{3}',{4},{5});"" style=""cursor:pointer;width:{1}px;Height:{2}px"" Title=""{6}"">", this.ThumbImageURL, this.Width, this.Height, this.OriginalImageURL, this.ImageBoxWidth, this.ImageBoxHeight, this.ToolTip));
}
else
{
writer.Write(string.Format(@"<img src=""{0}"" οnclick=""glacier_ImageBox_Show('{3}',{4},{5});"" style=""cursor:pointer;width:{1}px;Height:{2}px"" Title=""{6}"" class=""{7}"">", this.ThumbImageURL, this.Width, this.Height, this.OriginalImageURL, this.ImageBoxWidth, this.ImageBoxHeight, this.ToolTip, this.CssClass));
}
}
}
}
2. JS文件
var glacier_ImageBox_BackCover = null;
var glacier_ImageBox_Content = null;
var glacier_ImageBox_CloseURL = '<%=WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.close.gif")%>';
var glacier_ImageBox_StepIndex = 1;
function glacier_ImageBox_Show(bigImageUrl, width, height) {
glacier_ImageBox_BackCover = document.createElement("div");
glacier_ImageBox_Content = document.createElement("div");
glacier_ImageBox_BackCover.className = "glacier_ImageBox_BackCover";
glacier_ImageBox_Content.className = "glacier_ImageBox_Content";
document.body.appendChild(glacier_ImageBox_BackCover);
document.body.appendChild(glacier_ImageBox_Content);
glacier_ImageBox_Content.innerHTML = glacier_ImageBox_BuildImageTable(bigImageUrl, width, height);
glacier_ImageBox_StepIndex = 0;
glacier_ImageBox_ShowStep();
}
function glacier_ImageBox_BuildImageTable(bigImageUrl, width, height) {
var sb = "<table cellpadding=\"0\" cellspacing=\"0\" class=\"ImageWrapper\"><tr><td style=\"border:solid 5px #CECECE;\">";
sb += "<table cellpadding=\"0\" cellspacing=\"0\" style=\"width:" + (width + 30) + "px;\">";
sb += "<tr><td class=\"ImageWrapperTop\" style=\"height:" + (height + 20) + "px;\">";
sb += "<img src=\"" + bigImageUrl + "\" οnlοad=\"this.style.display='';if(this.offsetWidth>=" + width + "){this.style.width='" + width + "px';};\" style=\"max-Width:" + width + "px;max-height:" + height + "px;display:none;\" />";
sb += "</td></tr>"
sb += "<tr><td class=\"ImageWrapperBottom\" style=\"height:30px;\">";
sb += "<img src=\"" + glacier_ImageBox_CloseURL + "\" style=\"cursor:pointer;\" οnclick=\"glacier_ImageBox_Close();\" />";
sb += "</td></tr></table>"
sb += "</td></tr></table>"
return sb;
}
function glacier_ImageBox_Close() {
glacier_ImageBox_StepIndex = 0;
glacier_ImageBox_CloseStep();
}
function glacier_ImageBox_ShowStep() {
if (glacier_ImageBox_StepIndex >= 5) {
return;
}
glacier_ImageBox_StepIndex+=1;
var backStyle = glacier_ImageBox_BackCover.style;
var contentStyle = glacier_ImageBox_Content.style;
var backOpacity = glacier_ImageBox_StepIndex * 10;
var contentOpacity = backOpacity+50;
backStyle.opacity = (backOpacity / 100);
backStyle.MozOpacity = (backOpacity / 100);
backStyle.KhtmlOpacity = (backOpacity / 100);
backStyle.filter = "alpha(opacity=" + backOpacity + ")";
contentStyle.opacity = (contentOpacity / 100);
contentStyle.MozOpacity = (contentOpacity / 100);
contentStyle.KhtmlOpacity = (contentOpacity / 100);
contentStyle.filter = "alpha(opacity=" + contentOpacity + ")";
window.setTimeout('glacier_ImageBox_ShowStep()', 50);
}
function glacier_ImageBox_CloseStep() {
if (glacier_ImageBox_StepIndex >= 5) {
document.body.removeChild(glacier_ImageBox_Content);
document.body.removeChild(glacier_ImageBox_BackCover);
return;
}
glacier_ImageBox_StepIndex+=1;
var backStyle = glacier_ImageBox_BackCover.style;
var contentStyle = glacier_ImageBox_Content.style;
var backOpacity =50-(glacier_ImageBox_StepIndex * 10);
var contentOpacity = backOpacity + 50;
backStyle.opacity = (backOpacity / 100);
backStyle.MozOpacity = (backOpacity / 100);
backStyle.KhtmlOpacity = (backOpacity / 100);
backStyle.filter = "alpha(opacity=" + backOpacity + ")";
contentStyle.opacity = (contentOpacity / 100);
contentStyle.MozOpacity = (contentOpacity / 100);
contentStyle.KhtmlOpacity = (contentOpacity / 100);
contentStyle.filter = "alpha(opacity=" + contentOpacity + ")";
window.setTimeout('glacier_ImageBox_CloseStep()', 50);
}
3. CSS文件
/*opacity:不透明度,范围是0—100,0表示完全透明,100表示完全不透明。*/
div.glacier_ImageBox_BackCover
{
filter: alpha(opacity=0);
opacity: 0.0;
background: #000;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 101;
color: Red;
}
div.glacier_ImageBox_Content
{
filter: alpha(opacity=50);
opacity: 0.5;
position: fixed;
left: 0px;
top: 100px;
width: 100%;
z-index: 102;
width: 100%;
height: 100%;
}
div.glacier_ImageBox_Content .ImageWrapper
{
margin: auto;
background:white;
text-align:center;
border:solid 1px #CECECE;
}
div.glacier_ImageBox_Content .ImageWrapperTop
{
vertical-align: middle;
text-align: center;
background: white url(<%=WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.downloading.gif")%>) no-repeat center;
}
div.glacier_ImageBox_Content .ImageWrapperBottom
{
vertical-align: middle;
text-align: right;
padding-right:15px;
}
div.glacier_ImageBox_Content > .CloseBox
{
margin: auto;
text-align: center;
background: white;
}
4. AssemblyInfo文件
#region [Resources]
using System.Web.UI;
[assembly: WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.close.gif", "image/gif")]
[assembly: WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.downloading.gif", "image/gif")]
[assembly: WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.ImageThumbViewer.js", "application/x-javascript", PerformSubstitution = true)]
[assembly: WebResource("GlacierCLI.Web.WebControls.ImageThumbViewer.Resources.ImageThumbViewer.css", "text/css", PerformSubstitution = true)]
#endregion