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 - 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.
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.

---

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 14 of 14 (Total in Forum: 14) (Refresh) FirstPrevNext

What does this control do? tvj08 9:46 8 Dec '08   Your code looks very sophisticated. But there is not description of what this control does? Can you please explain in brief? Thanks. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: What does this control do? ykorotia 10:48 8 Dec '08   This control gives you ability to make your foto albums view more dynamic and devides into 'galleries', with pure javascript background. But just this is to simple, so with this control you also get ability: - to dynamically popup image from image or textlink - to popup webpage from image or textlink Image is popuped in modal window. Image, if it is possible, popups in full size, if not possible - popups resized. Something like this is in Ajaxtoolkit, but that project is full of extenders and to heavy for use. Something like this control Microsoft uses in its modal video popups, VirtualEarth, etc. Control is custom and was created by need in it. Adding another mode is not a problem for beginner in c#. Sign In·View Thread·PermaLink Online Demo Link WiseOldMan 8:06 8 Dec '08   When I click on the online demo link it goes to an article about MS Access and ASP.Net. Sign In·View Thread·PermaLink Re: Online Demo Link ykorotia 8:32 8 Dec '08   What do you want to be under 'Online Demo' ? Online demo, doesn't it? This demo (article) is with instant show of all control capabilities. p.s. Maybe, there's some untemplated style and words in article, but that's personal website. (you can see 'note' in page header) Sign In·View Thread·PermaLink Re: Online Demo Link WiseOldMan 9:55 8 Dec '08   Yes, I would expect an online demo. It was not obvious that the page was indeed an online demo of your control. I would have expected the title of the article on the page to be something along the lines of "Online Demo of REAL JS dynamic image browsing capabilities" with something on the page that said, "click on the image to see what the control does." Instead it looked like an article on how to do MS Access with ASP.Net. Sign In·View Thread·PermaLink Re: Online Demo Link ykorotia 11:03 8 Dec '08   revision was made. p.s. Internet is full of empty and no-sense pages. Your way to make it like empty demos or to fill with information sense. regards Sign In·View Thread·PermaLink Re: Online Demo Link WiseOldMan 2:47 9 Dec '08   Yurii, I'm sorry that you absolutely don't get my point because changing the title of the link makes even less sense. Yes, the Internet is full of nonsense pages, but they are not passed off as an online demo of a control. Maybe my expectations were too high because you obviously spent a lot of time on the control and your article. However, I wanted to see a good demo before I invested my time in reading the article. I was looking for something very specific and I still don't really know what the control does. I'm obviously not the only person who feels this way because the next comment was "what does this control do?" A good online demo would have told everyone exactly what the control does. Sign In·View Thread·PermaLink Re: Online Demo Link ykorotia 7:43 9 Dec '08   In that 'msaccess&aspnet' article ALL links are generated by PopupImage controls in different modes. ALL currently possible features of control are used in that article. Many articles here are even without such online demonstrations. And, to spend time for creating an empty demo page has no-sense. p.s. If your time is so valuable, you maybe wanted to invest it into commercial controls. p.s.s. First article about this control was deleted by editors, as they said:"it was ad article", 'cause it had such explanation you now asking for. So, as for now, there's only movement in code. Sign In·View Thread·PermaLink i user IE 6,0 davidberlin 3:00 6 Dec '08   i use IE6,0. Sign In·View Thread·PermaLink Re: i user IE 6,0 [modified] ykorotia 5:35 6 Dec '08   it works perfectly on IE6, like on Safari and so on. Problem can be only in disabled javascript. modified on Monday, December 8, 2008 1:33 PM Sign In·View Thread·PermaLink Very nice UI! Raghu Karupakala 6:25 5 Dec '08   Good job! You can never try. You either do it or you don't. Sign In·View Thread·PermaLink try it with IE davidberlin 3:47 5 Dec '08   hello, it works fine with firefox but not with IE Sign In·View Thread·PermaLink Re: try it with IE Raghu Karupakala 6:25 5 Dec '08   Works fine in IE for me... You can never try. You either do it or you don't. Sign In·View Thread·PermaLink what version? ykorotia 12:10 5 Dec '08   what version do you use? Sign In·View Thread·PermaLink

Last Visit: 7:54 20 Mar '10     Last Update: 7:54 20 Mar '10 1