Image Manager for Image Gallery

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Many image gallery-type web applications provide features to change image attributes to view image with different attributes; for example, the user can rotate, zoom, change grayscale, or mirror image or increase/decrease opacity, and so forth. I have developed this smart custom control that lets you do all these operations by selecting image attributes from a context menu.

Background

While looking at Silverlite’s controls for animation, this idea came to mind. The control uses Microsoft filters. These filters are IE specific.

Using the Code

The complete code and assemblies are attached. One can download ImageControl.dll and add references to their project. Once you put the control on your page, you can assign various properties to control the attribute set in the context menu. Following are the properties exposed.

• ImageUrl


• ShowRotateLeft


• ShowRotateRight


• ShowGrayScale


• ShowMirror


• ShowOpaccity


• ShowInvert


• ShowZoomIn


• ShowZoomOut


• LeftRotateImage


• RightRotateImage


• ZoomInImage


• ZoomOutImage


• ImageHeight


• ImageWidth


• ContextMenuTableClass


• ContextMenuMouseOverClass


• ContextMenuMouseOutClass

public class ImageManager : WebControl
{
   #region Private members
      private bool _ShowRotateLeft;
      private bool _ShowRotateRight;
      private bool _ShowGrayScale;
      private bool _ShowMirror;
      private bool _ShowInvert;
      private bool _ShowOpaccity;
      private bool _ShowZoomIn;
      private bool _ShowZoomOut;
      private string _ImageUrl    = "~/M4.jpg";
      private int _ImageHeight    ;
      private int _ImageWidth     ;
      private int _BorderWidth = 1;
      private string _LeftRotateImage;
      private string _RightRotateImage;
      private string _ZoomInImage;
      private string _ZoomOutImage;
      private string _ContextmenuDivID ;

      private string _ContextMenuTableClass = "tabContext";
      private string _ContextMenuMouseOverClass = "Mover";
      private string _ContextMenuMouseOutClass  = "MOut";
      private string _ImageClientID;
   #endregion

   #region Properties
   [Category("Data"),
    DefaultValue(true),
    Description("Image Url")]
   public string ImageUrl
   {
      get { return _ImageUrl; }
      set { _ImageUrl = value; }
   }
   //[Category("Data"),
   // DefaultValue(true),
   // Description("Image Border")]
   //public int BorderWidth
   //{
   //   get { return _BorderWidth; }
   //   set { _BorderWidth = value; }
   //}

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show LeftRotate")]
   public bool ShowRotateLeft
   {
      get { return _ShowRotateLeft; }
      set { _ShowRotateLeft = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Rotate Right")]
   public bool ShowRotateRight
   {
      get { return _ShowRotateRight; }
      set { _ShowRotateRight = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show GrayScale")]
   public bool ShowGrayScale
   {
      get { return _ShowGrayScale; }
      set { _ShowGrayScale = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Mirror")]
   public bool ShowMirror
   {
      get { return _ShowMirror; }
      set { _ShowMirror = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Opaccity")]
   public bool ShowOpaccity
   {
      get { return _ShowOpaccity; }
      set { _ShowOpaccity = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Invert")]
   public bool ShowInvert
   {
      get { return _ShowInvert; }
      set { _ShowInvert = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show ZoomIn")]
   public bool ShowZoomIn
   {
      get { return _ShowZoomIn; }
      set { _ShowZoomIn = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show ZoomOut")]
   public bool ShowZoomOut
   {
      get { return _ShowZoomOut; }
      set { _ShowZoomOut = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Left Rotate Image path")]
   public string LeftRotateImage
   {
      get { return _LeftRotateImage; }
      set { _LeftRotateImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Right Rotate Image path")]
   public string RightRotateImage
   {
      get { return _RightRotateImage; }
      set { _RightRotateImage = value; }
}

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ZoomIn Image path")]
   public string ZoomInImage
   {
      get { return _ZoomInImage; }
      set { _ZoomInImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ZoomOut Image path")]
   public string ZoomOutImage
   {
      get { return _ZoomOutImage; }
      set { _ZoomOutImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Image Height")]
   public int ImageHeight
   {
      get { return _ImageHeight; }
      set { _ImageHeight = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Image Width")]
   public int ImageWidth
   {
      get { return _ImageWidth; }
      set { _ImageWidth = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Table Css Class")]
   public string ContextMenuTableClass
   {
      get { return _ContextMenuTableClass; }
      set { _ContextMenuTableClass = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Mouse Over Css Class")]
   public string ContextMenuMouseOverClass
   {
      get { return _ContextMenuMouseOverClass; }
      set { _ContextMenuMouseOverClass = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Mouse Out Css Class")]
   public string ContextMenuMouseOutClass
   {
      get { return _ContextMenuMouseOutClass; }
      set { _ContextMenuMouseOutClass = value; }
   }
   #endregion

   #region On Init
   protected override void OnInit(EventArgs e)
      {
         _ContextmenuDivID = this.UniqueID+"_ContexuMenuDiv";
         base.OnInit(e);
   #endregion

   #region Render Method
   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);
      }
      #endregion

      #region CreateChildControls
      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();
      }
      #endregion

      #region Prerender
      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);
      }
      #endregion
   }

Points of Interest

Microsoft provides many filters and transitions for text as well as for images. But, to use them in an ASPX page, you have to be good at JavaScript and knowledgable of these filters. By using this control, you don’t have to know details about these filters; you just drag & drop the control.