REAL JS dynamic image browsing capabilities

• Demo of control (ImageToImage mode)
• Control in article about msaccess & asp.net
• Control source code project - 116.64 KB  
• Demo Webapplication with compiled control and default theme - 599.87 KB

Article revision: 1.3.

---

Intoduction

   Code can be surfed in Internet, but with some disabilities: 

• not a control
• very unusable
• not themed
• very paritial
• 'single' use, on different pages it will be always same in action and view
• JS without dynamic include or exclude
• not valid to XHTML 1.1

   So, here is a try (successfull or not, you decide) to remove this misconfiguration.
In root of project is JQuery^tm library. All Javascript enabled browsers are supported. 

• four modes to get you happy with almost any possible combinations of
  very dynamic popups within one PopupImage control:
  • ImageToImage - you need just to select image you want to popup,
    just insert width or(and) height and control will be autoresized.
  • ImageToPage - click on image will open you a popup page of any web resource,
    cool?
  • TitleToPage - it looks like hyperlink, no image needed, a click leads to a
    page popup
  • TitleToImage <code>- link leads to popup image.
• Photo Album mode (auto) - in popup mode you can simply navigate through
  related images. You will like it.
• StandAlone ScriptManager - just place PopupImageManager on masterpage
  and enjoy of it on every possible page of your site, which even hidden in designview
  to make your project clear from it.. yeap. 

   Popup image is shown centered and fullsized, if possible. If page size is smaller than image,
popup image is dynamically resized.

---

Project Overview

   This control is based on two classes and one enum for modes selection in ykorotia_eu.Web.Controls namespace:

• ykorotia_eu.Web.Controls.PopupImageManager - which role is to register needed JavaScripts

• ykorotia_eu.Web.Controls.PopupImage - which role is to generate a usable control.

   Let's check its properties.

User Properties

• ykorotia_eu.Web.Controls.PopupImageManager

   Its parameters are great by its defaults, but anyway, you can change them,
all them are located in 'Misc' category:

• Enabled - include or not JQuery libs. 'True' by default
• CssLinkControl - consists of two parts divided by '.' (dot).
  Default value: a.ykorotia_PopupImage
• OverlayShow - Overlay show. Default value is 'True'
• ZoomSpeedIn - how fast image transparently grows up from background.
  Default value: 1500 miliseconds
• ZoomSpeedOut - how fast image transparently disapears.
  Default: 600 miliseconds

• ykorotia_eu.Web.Controls.PopupImage

   All new properties are with tooltips and included within 'Custom Category' and 'Custom Options' categories.

Custom Category includes:

• Alternate - text used as alt parameter in image. Don't worry about letting it
  empty, this control is XHTML 1.1. 100% valid on any action you do or not.
• CssClass - used for linking scripts with control. Let it default if you don't
  have any problems on your site.
  Default value: ykorotia_PopupImage
• ImageUrl - image url, as is
• PageUrl - extra value, used when you select one of modes with 'Page'
• RelatedUrls - related space for creating link albums. On one page you can
  make any numbers of them just putting same value for each unique album.
• Title - this value used as link text when selected one of modes with 'Title' and
  is Title for popup window.

Source Code Project Structure

   As you see, control is located in folder PopupImage. Let's take a closer look on its content.

   Firstly, to make it fully workable, you have to place content of folder 'DefaultTheme'
into root of your used Theme of your webapplication.

• Src/JQuery.js - is embeded resource that contains main library of JQuery team
• Src/JQueryFancyBox.js - is embeded resource that contains popup abilities provided by JQuery team
• PopupImage_Control.cs - PopupImage control class and enum of four supported modes
• PopupImage_Control_Properties.cs - VisualStudio demanded properties
  and its attributes for popupImage control
• PopupImage_Manager.cs - scripts manager implementation
• Toolbox.bmp (.ico) - icon for VS toolbox

Implementation

   The hardest part of implementation is:

1. to have installed .Net Framework v3.5., better with SP1
2. to place ASP .NET ScriptManager on the page (pages)
   before PopupImageManager. WARNING! Use it only ONCE in page! If you placed it in Master page, don't place it in .aspx page.<code><code>
3. to place depended images and CSSs into App_Themes/YourTheme
   or your selected place

---

Source Code or how it works

   4 modes are assigned as enum:

public enum PopupImageMode : byte
    {
        ImageToImage,
        ImageToPage,
        TitleToPage,
        TitleToImage
    }

   Main tag for web control we can assign this way:

public PopupImage() : base(HtmlTextWriterTag.A)
{
}

which means that control will generated like <a> ControlContent </a>

AddAttributesToRender(..) function provides an ability to add to main tag some
attributes, like reletated urls for making galleries possible, default css stylesheet for
assignment it with javascipt's logic, title and link or image url, depending which mode is used.

protected override void AddAttributesToRender(HtmlTextWriter writer)
       {
           string Non_url = this.ImageUrl;

           // implemented modes
           #region Modes
           switch (_mode)
           {
               case PopupImageMode.ImageToImage:
                   Non_url = this.ImageUrl;
                   break;
               case PopupImageMode.ImageToPage:
                   Non_url = this.PageUrl;
                   break;
               case PopupImageMode.TitleToImage:
                   Non_url = this.ImageUrl;
                   break;
               case PopupImageMode.TitleToPage:
                   Non_url = this.PageUrl;
                   break;
               default:
                   break;
           }
           #endregion

           writer.AddAttribute(HtmlTextWriterAttribute.Rel, RelatedUrls);
           writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);
           writer.AddAttribute(HtmlTextWriterAttribute.Title, this.Title);
           writer.AddAttribute(HtmlTextWriterAttribute.Href, base.ResolveClientUrl(Non_url));

           base.AddAttributesToRender(writer);
       }

Now, we can render control's content, where depending on mode, we render image or not:

protected override void RenderContents(HtmlTextWriter writer)
       {
           System.Web.UI.WebControls.Image img =
               new System.Web.UI.WebControls.Image();

           img.Width = base.Width;
           img.Height = base.Height;
           if ((this.Alternate == null) || (this.Alternate == ""))
               img.GenerateEmptyAlternateText = true;
           else
               img.AlternateText = this.Alternate;

           img.ImageUrl = base.ResolveClientUrl(this.ImageUrl);

           // implemented modes
           #region Modes
           switch (_mode)
           {
               case PopupImageMode.ImageToImage:
                   img.RenderControl(writer);
                   break;

               case PopupImageMode.ImageToPage:
                   img.RenderControl(writer);
                   break;

               case PopupImageMode.TitleToImage:
                   img.Dispose();
                   writer.WriteLine(this.Title);
                   break;

               case PopupImageMode.TitleToPage:
                   img.Dispose();
                   writer.WriteLine(this.Title);
                   break;

               default:
                   break;
           }
           #endregion

           //just for fun
           base.RenderContents(writer);
       }

As a result, we will have rendered control like: <a class="" href="" rel="" title=""><image src="" alt=""/> [or] text </a>
Default values for properties are:

#region secure_variables
//-------img---------
private string _rel = "ykorotia_Gal";
private string _alt= "";//c
private string _imageUrl = "";//ch
//cssClass is based
//--------link-----
private string _title="";
private string _pageUrl="";
//----------misc------
private string _cssClass = "ykorotia_PopupImage";
private PopupImageMode _mode = PopupImageMode.ImageToImage;
//-----------------
#endregion

Now, it is a time to add some dynamics. For it, we have a PopupImage_Manager class.

// Make available embeded resources by URL request
#region WebResources for PopupImage
[assembly: WebResource(
    "ykorotia_eu.Web.Controls.PopupImage.Src.Toolbox.ico",
    "image/bmp")]
[assembly: System.Web.UI.WebResource(
    "ykorotia_eu.Web.Controls.PopupImage.Src.JQuery.js", 
    "text/javascript", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource(
    "ykorotia_eu.Web.Controls.PopupImage.Src.JQueryFancybox.js", 
    "text/javascript", PerformSubstitution=true)]
#endregion
namespace ykorotia_eu.Web.Controls
{....

Here we register embeded scripts and include some special script include for work with PopupImage control:

protected override void OnPreRender(EventArgs e)
        {
            if (Enabled == false) return;

            Page.ClientScript.RegisterClientScriptResource(this.GetType(), "ykorotia_eu.Web.Controls.PopupImage.Src.JQuery.js");
            Page.ClientScript.RegisterClientScriptResource(this.GetType(), "ykorotia_eu.Web.Controls.PopupImage.Src.JQueryFancybox.js");

            // ADD INIT SCRIPT -->
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            sb.Append("<script type="\"text/javascript\""></script>");

            Page.ClientScript.RegisterClientScriptBlock
                (typeof(Page),
                "ModalImagePopupInitiated",
                sb.ToString());

            base.OnPreRender(e);
        }//func

That's it.

---

References

• Adding Web resources to custom control in .net 2.0
• JQuery team official site

---

History

• 08.12.2008 - article revision 1.3, according to WiseOldMan's comment
• 06.12.2008 - article revision 1.2 
• 05.12.2008 - project was openned for public under CPL.

---