REAL JS dynamic image browsing capabilities

noname-2013

3.31/5 (5 votes)

Dec 4, 2008

CPL

5 min read

45411

331

You will find this extreme useful and easy to use with 4 unique modes

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:

to have installed .Net Framework v3.5., better with SP1
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.
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

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.