Fish Eye Extender

5/29/2008

The name for this extender, like most of the names I come up with, is a bit misleading but let me explain. The original idea for this extender was to be a nice fish eye, roll over, sort of extender for a list of images. However I'm lazy and didn't really want to add in my own animation. So instead I added in animation from the AJAX Toolkit. I talked about doing this briefly in a previous post, however I didn't give a detailed code example. So consider this your code example...

FishEyeExtender.cs

   1: using System;

   2: using System.Web.UI.WebControls;

   3: using System.Web.UI;

   4: using System.ComponentModel;

   5: using System.ComponentModel.Design;

   6: using AjaxControlToolkit;

7:

   8: [assembly: System.Web.UI.WebResource("AJAXControls.FishEye.FishEyeBehavior.js", "text/javascript")]

9:

  10: namespace AJAXControls.FishEye

  11: {

  12:     [Designer(typeof(FishEyeDesigner))]

  13:     [RequiredScript(typeof(AnimationExtender))]

  14:     [ClientScriptResource("AJAXControls.FishEye.FishEyeBehavior", "AJAXControls.FishEye.FishEyeBehavior.js")]

  15:     [TargetControlType(typeof(Control))]

  16:     public class FishEyeExtender : AnimationExtenderControlBase

  17:     {

  18:         private Animation _OnMouseOver;

19:

  20:         [ExtenderControlProperty]

  21:         [ClientPropertyName("OnMouseOverJson")]

  22:         [Browsable(false)]

  23:         public Animation OnMouseOver

  24:         {

  25:             get

  26:             {

  27:                 return GetAnimation(ref _OnMouseOver, "OnMouseOver");

  28:             }

  29:             set

  30:             {

  31:                 SetAnimation(ref _OnMouseOver, "OnMouseOver", value);

  32:             }

  33:         }

34:

  35:         private Animation _OnMouseOut;

36:

  37:         [ExtenderControlProperty]

  38:         [ClientPropertyName("OnMouseOutJson")]

  39:         [Browsable(false)]

  40:         public Animation OnMouseOut

  41:         {

  42:             get

  43:             {

  44:                 return GetAnimation(ref _OnMouseOut, "OnMouseOut");

  45:             }

  46:             set

  47:             {

  48:                 SetAnimation(ref _OnMouseOut, "OnMouseOut", value);

  49:             }

  50:         }

  51:     }

  52: }

FishEyeBehavior.js

   1: // README

   2: //

   3: // There are two steps to adding a property:

   4: //

   5: // 1. Create a member variable to store your property

   6: // 2. Add the get_ and set_ accessors for your property

   7: //

   8: // Remember that both are case sensitive!

9:

10:

  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />

  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />

  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />

14:

15:

  16: Type.registerNamespace('AJAXControls.FishEye');

17:

  18: AJAXControls.FishEye.FishEyeBehavior = function(element) {

  19:     AJAXControls.FishEye.FishEyeBehavior.initializeBase(this, [element]);

20:

  21:     this._OnMouseOverJson = null;

  22:     this._OnMouseOutJson = null;

23:

  24:     this._OnMouseOverAnim = null;

  25:     this._OnMouseOutAnim = null;

  26: }

  27: AJAXControls.FishEye.FishEyeBehavior.prototype = {

  28:     initialize : function() {

  29:         AJAXControls.FishEye.FishEyeBehavior.callBaseMethod(this, 'initialize');

30:

  31:         // TODO: Add your initalization code here

  32:         var Elements=this.get_element().getElementsByTagName("img");

33:

  34:         this._OnMouseOverAnim=new Array(Elements.length);

  35:         this._OnMouseOutAnim=new Array(Elements.length);

  36:         for(var x=0;x<Elements.length;++x)

  37:         {

  38:             Sys.UI.DomEvent.addHandler(Elements[x], 'mouseover',

  39:                 Function.createDelegate(this, this._onmouseover));

  40:             Sys.UI.DomEvent.addHandler(Elements[x], 'mouseout',

  41:                 Function.createDelegate(this, this._onmouseout));

  42:             if(this._OnMouseOverJson)

  43:             {

  44:                 this._OnMouseOverAnim[x] = $AA.buildAnimation(this._OnMouseOverJson, Elements[x]);

  45:             }

  46:             if(this._OnMouseOutJson)

  47:             {

  48:                 this._OnMouseOutAnim[x] = $AA.buildAnimation(this._OnMouseOutJson, Elements[x]);

  49:             }

  50:         }

  51:     },

52:

  53:     _onmouseover : function(EventElement)

  54:     {

  55:         var Elements=this.get_element().getElementsByTagName("img");

  56:         for(var x=0;x<Elements.length;++x)

  57:         {

  58:             if(Elements[x]==EventElement.target)

  59:             {

  60:                 if(this._OnMouseOutAnim[x])

  61:                 {

  62:                     this._OnMouseOutAnim[x].stop();

  63:                 }

  64:                 if(this._OnMouseOverAnim[x])

  65:                 {

  66:                     this._OnMouseOverAnim[x].play();

  67:                 }

  68:             }

  69:         }

  70:     },

71:

  72:     _onmouseout : function(EventElement)

  73:     {

  74:         var Elements=this.get_element().getElementsByTagName("img");

  75:         for(var x=0;x<Elements.length;++x)

  76:         {

  77:             if(Elements[x]==EventElement.target)

  78:             {

  79:                 if(this._OnMouseOverAnim[x])

  80:                 {

  81:                     this._OnMouseOverAnim[x].stop();

  82:                 }

  83:                 if(this._OnMouseOutAnim[x])

  84:                 {

  85:                     this._OnMouseOutAnim[x].play();

  86:                 }

  87:             }

  88:         }

  89:     },

90:

  91:     dispose : function() {

  92:         // TODO: Add your cleanup code here

93:

  94:         AJAXControls.FishEye.FishEyeBehavior.callBaseMethod(this, 'dispose');

  95:     },

96:

  97:     get_OnMouseOverJson : function()

  98:     {

  99:         return this._OnMouseOverJson;

 100:     },

 101:

 102:     set_OnMouseOverJson : function(value)

 103:     {

 104:         this._OnMouseOverJson = value;

 105:     },

 106:

 107:     get_OnMouseOutJson : function()

 108:     {

 109:         return this._OnMouseOutJson;

 110:     },

 111:

 112:     set_OnMouseOutJson : function(value)

 113:     {

 114:         this._OnMouseOutJson = value;

 115:     }

 116: }

 117: AJAXControls.FishEye.FishEyeBehavior.registerClass('AJAXControls.FishEye.FishEyeBehavior', AjaxControlToolkit.BehaviorBase);

That zip file should contain the C# code as well as the js code. But basically all you need to do is have a set of images within a div (or span, etc). and point the TargetControlID to the div holding them. It then takes all of the images in the div and attaches the animations you feed it for onmouseover and onmouseout to them. So if you have a resize animation set up for onmouseover and onmouseout, it creates a nice fish eye animation. However, you can add any sort of animation you want. So it's more like an animation list extender, for images... And only deals with mouse over and mouse out... But I'm sure you'll be able to find a use for it. Anyway, try out the code, leave feedback, and happy coding.

Comments

Name *

Email (used to grab Gravatar image)

Website

Comment *

Other Posts in AJAX Controls

Fish Eye Extender