Image Manager for Image Gallery

• Download demo project - 62.2 KB
• Download source - 32.4 KB

Introduction

Many image gallery-type web applications provide features to change image attributes. This permits viewing of the image with various options, e.g. the user can rorate the image, zoom the image, change grayscale, mirror the image or increase/decrease its opacity. I have developed this smart custom control which lets you do all of these operations by selecting image attributes from the context menu.

Background

This idea came to me while looking at Silverlite Telerik controls for anination. The controls use Microsoft filters, which are IE-specific.

Using the code

Complete code and assemblies are attached. You can download the ImageControl.dll and add reference to their project. Once you put the control on your page, you can assign various properties in order to control the attribute set in context menu. Here are the properties exposed:

• ImageUrl
• ShowRotateLeft
• ShowRotateRight
• ShowGrayScale
• ShowMirror
• ShowOpaccity
• ShowInvert
• ShowZoomIn
• ShowZoomOut
• LeftRotateImage
• RighttRotateImage
• ZoomInImage
• ZoomOutImage
• ImageHeight
• ImageWidth
• ContextMenuTableClass
• ContextMenuMouseOverClass
• ContextMenuMouseOutClass

About the code

Step 1:

In order to put the Microsoft transition filters on the image, I overrode the CreateChildControls event and added a DIV/SPAN (HtmlGenericControl) tag, as well as the default filter attributes. Then I added Image Control inside the DIV control, plus an attribute for context menu.

protected override void CreateChildControls() 
{ 
    Controls.Clear(); 
    HtmlGenericControl ogen = new HtmlGenericControl(); 
    ogen.ID =this.ClientID + "_filterDIV"; 
    ogen.Attributes.Add("style", "position:relative; width:" + _ImageWidth 
        + "; height:" + _ImageHeight + "; background:gold; padding:2px; 
        border:1px solid black; 
        filter:progid:DXImageTransform.Microsoft.gradient(
        startColorstr='BLACK, endColorstr='yellowgreen'), 
        progid:DXImageTransform.Microsoft.BasicImage(
        Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0,Opacity=1.00,Mask=0),
        ;"); 
    System.Web.UI.WebControls.Image oImage 
        = new System.Web.UI.WebControls.Image(); 
    oImage.ID = "filterImage"; 
    oImage.AlternateText = ""; 
    if ( Height  !=0) 
        oImage.Height = Height; 
    if (Width != 0) 
        oImage.Width = Width; 
        oImage.ImageUrl = _ImageUrl; 
        _ImageClientID = oImage.ClientID; 
        ogen.Controls.Add(oImage); 
        this.Controls.Add(ogen); 

    string strScripr = "<script type='text/javascript' 
        language="'javascript'"> document.all(
        '" + oImage.ClientID + "').oncontextmenu = function() {
        dopopup(event.x,event.y,'"+_ContextmenuDivID+"');return false; 
        } </script>"; 
    this.Page.ClientScript.RegisterStartupScript(typeof(string),
        "RefisterEvent",strScripr); 
    base.CreateChildControls(); 
} 

Step 2:

The next step is to register the required JS file and CSS file. The common Javascript and default CSS are embeded resources, so on the PreRender of the control I registered them.

 protected override void OnPreRender(EventArgs e)
 {

    /*Add JS */ 
    string scriptUrl = Page.ClientScript.GetWebResourceUrl(
        this.GetType(), "ImageControl.ImgControl.js"); 
     this.Page.ClientScript.RegisterClientScriptInclude(typeof(string), 
        "ImageControlJS", scriptUrl); 

    /*Add CSS */ 
    string includeTemplate 
        = "<link rel='stylesheet' text='text/css' href='{0}' />"; 
    string includeLocation 
        = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), 
        "ImageControl.ImageControl.css"); 
    LiteralControl include 
        = new LiteralControl(String.Format(includeTemplate,includeLocation)); 
    ((System.Web.UI.HtmlControls.HtmlHead)this.Page.Header).Controls.Add(
        include); 

    /*End Add CSS */ 
    base.OnPreRender(e); 
}

Step 3:

I created the Context menu using an HTML table -- default style as hidden -- based on the various properties selected, such as ShowRotateLeft/ShowRotateRight on the Render event. One more thing: since JS changes the transition filters based on attributes selected from the context menu, we have to change the transition filter corresponding to the selected image. That is why we have to give a unique ID to the DIV element. I have given a unique name from the onInit event and generated a unique ID using this.UniqueID+"_ContexuMenuDiv".

protected override void Render(HtmlTextWriter writer)
{
writer.WriteLine(
    "<div style=\"position:absolute;z-index:500; display:'none';\" id='" 
    + _ContextmenuDivID + "' onclick=\"this.style.display='none';\">"); 
            /*start writing Context Menu table */ 
            writer.WriteLine("<table class='"+_ContextMenuTableClass+"'>");    
            if(_ShowRotateLeft) 
                writer.WriteLine(
                    "<TR><TD ONMOUSEOVER
                    =\"this.className='Mover'\" ONMOUSEOUT
                    =\"className='MOut'\" onclick
                    =\"RotateLeft(
                    '"+this.ClientID+"_filterDIV');\">Rotate Left</TD></TR>"); 
            if (_ShowRotateRight) 
                writer.WriteLine(
                    "<TR><TD ONMOUSEOVER
                    =\"this.className='Mover'\" ONMOUSEOUT
                    =\"className='MOut'\" onclick
                    =\"RotateRight(
                    '" + this.ClientID + "_filterDIV');\">
                    Rotate Right</TD></TR>"); 
            if(_ShowGrayScale) 
                writer.WriteLine(
                    "<TR><TD ONMOUSEOVER
                        =\"this.className='Mover'\" ONMOUSEOUT
                        =\"className='MOut'\" onclick
                        =\"ChangeScale('grayscale',
                        '" + this.ClientID + "_filterDIV');\">
                        GrayScale</TD></TR>"); 
            if (_ShowInvert) 
                writer.WriteLine(
                "<TR><TD ONMOUSEOVER
                =\"this.className='Mover'\" ONMOUSEOUT
                =\"className='MOut'\" onclick
                =\"ChangeScale('invert',
                '" + this.ClientID + "_filterDIV');\">Invert</TD></TR>"); 
            if (_ShowMirror) 
                writer.WriteLine(
                "<TR><TD ONMOUSEOVER
                =\"this.className='Mover'\" ONMOUSEOUT
                =\"className='MOut'\" onclick=\"ChangeScale(
                'mirror','" + this.ClientID + "_filterDIV');\">
                Mirror</TD></TR>"); 
            if (_ShowOpaccity) 
            { 
                writer.WriteLine(
                    "<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
                    =\"className='MOut'\" onclick=\"Opac(
                    1,'" + this.ClientID + "_filterDIV');\">
                    Increase Opacity</TD></TR>"); 
                writer.WriteLine(
                "<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
                =\"className='MOut'\" onclick=\"Opac(
                2,'" + this.ClientID + "_filterDIV');\">
                Decrease Opacity</TD></TR>"); 
            } 
            if (_ShowZoomIn) 
                writer.WriteLine(
                   "<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
                   =\"className='MOut'\" onclick=\"ZoomIn(
                   '" + _ImageClientID + "');\">Zoom In</TD></TR>"); 
            if (_ShowZoomOut) 
                writer.WriteLine(
                   "<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
                   =\"className='MOut'\" onclick=\"ZoomOut(
                   '" + _ImageClientID + "');\">Zoom Out</TD></TR>"); 

             writer.WriteLine("</table>");    
            /*End writing Context Menu table */        
            writer.WriteLine("</div>"); 
            base.Render(writer); 
        } 
       protected override void  OnInit(EventArgs e)          { 
           _ContextmenuDivID = this.UniqueID+"_ContexuMenuDiv"; 
           base.OnInit(e); 
}

Points of interest

Microsift provides many filters and transitions for text, as well as images. However, to use them in ASPX page, you have to be good with Javascript and have some knowledge of these filters. By using this control, you don't have to know details about these filters; you just have to drag & drop the control.

History

• 17 May, 2007 - Original version posted