Click here to Skip to main content
15,314,186 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
XML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2
  3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5  <html xmlns="http://www.w3.org/1999/xhtml" >
  6  <head runat="server">
  7      <title>Untitled Page</title>
  8  </head>
  9  <body>
10      <form id="form1" runat="server">
11      <div>
12      <table>
13          <tr>
14              <td align="center">ASP.NET2 Slide Show<hr />
15              </td>
16          </tr>
17          <tr>
18              <td align="center">
19                  <img id="photo" src="" runat="server" border="0" />
20              </td>
21          </tr>
22      </table>
23      </div>
24      </form>
25
 26      <script type="text/javascript">
27          //A timer will be fired in 5 seconds to call getNextImage()
28          var c_interval = 5000;
29          window.setTimeout("getNextImage()", c_interval);
30
 31          function getNextImage()
32          {
33              //Send the request to server with the current image url as the argument
34              CallServer(document.getElementById("photo").src, "");
35          }
36
 37          function ReceiveServerData(rValue)
38          {
39              //Receive server's response of a string rValue, which is prepared in the server's function
40              //GetCallbackResult()
41              var wds = rValue.split(";");
42              //Assign the transition effect
43              document.getElementById("photo").style.filter = wds[1];
44              //Preload the image file from server.  When finishing download, imageLoaded function will be called
45              //with the img object as the argument
 46              var img  = new Image();
47              img.onload = function(){ imageLoaded(this); }
48              img.onerror = function(){ imageError(this); }
49              img.onabort = function(){ imageError(this); }
50              img.src = wds[0];
 51          }
52          function imageError(img)
53          {
54              //If image download errors occur, this function will be called.
55              window.setTimeout("getNextImage()", 1000);
56          }
57          function imageLoaded(img)
58          {
59              var photo = document.getElementById("photo");   //Find the image control object
60              photo.filters[0].apply();                       //Apply the transition effect
61              photo.filters[0].play();                        //Play the effect and display the new image
62              photo.src = img.src;                            //Assign the image to the image control
63
 64              window.setTimeout("getNextImage()", c_interval);//Initiate the next request
65          }
66      </script>
67
 68  </body>
69  </html>

C#
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
 14  {
 15      string m_lastFileName = "none";
 16
 17      protected void Page_Load(object sender, EventArgs e)
 18      {
 19          if (IsPostBack)
 20              return;
 21
 22          photo.Src = GetNextImageUrl();
 23
 24          //Register Ajax client script to client's browsers.  This has to be hard coded.
 25          string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
 26          string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
 27          Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
 28      }
 29
 30      public void RaiseCallbackEvent(string eventArgument)
 31      {
 32          //This is first place to receive the callback from client's browser.  The parameter 'eventArgument'
 33          //is the parameter passed from the Javascript's call 'CallServer()'.  In this example, it is the
 34          //last image url.
 35          m_lastFileName = Path.GetFileName(eventArgument);
 36      }
 37
 38      public string GetCallbackResult()
 39      {
 40          //This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string
 41          //to the client.  Here the returned string is the image url and the transition effect.
 42          return GetNextImageUrl() + ";" + GetNextTransition();
 43      }
 44
 45      private string GetNextImageUrl()
 46      {
 47          //Randomly pick a image file in the server.
 48          string[] files = Directory.GetFiles(AppDomain.CurrentDomain.BaseDirectory + "images", "*.jpg");
 49          if (files.Length == 0)
 50              return string.Empty;
 51
 52          while (true)
 53          {
 54              int n = (int)((files.Length - 1) * (new Random()).NextDouble());
 55              //Do not want to repeat the last image
 56              if (files[n].IndexOf(m_lastFileName) < 0)
 57              {
 58                  return files[n].Replace(AppDomain.CurrentDomain.BaseDirectory, string.Empty);
 59              }
 60          }
 61      }
 62      private string GetNextTransition()
 63      {
 64          //Randomly pick a transition effect.  Note some of the effects only work in IE.
 65          int n = (int)((new Random().NextDouble()) * 5);
 66          switch (n)
 67          {
 68              case 0:
 69              case 1:
 70                  n = (int)((new Random().NextDouble()) * 22);
 71                  return "revealTrans(duration=2,transition=" + n.ToString() + ")";
 72              case 2:
 73              case 3:
 74                  if (Request.Browser.Browser == "IE")
 75                  {
 76                      n = (int)((new Random().NextDouble()) * 8);
 77                      switch (n)
 78                      {
 79                          case 0:
 80                              return "progid:DXImageTransform.Microsoft.RandomDissolve()";
 81                          case 1:
 82                              return "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=20, Duration=2, Enabled=false)";
 83                          case 2:
 84                              return "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')";
 85                          case 3:
 86                              return "progid:DXImageTransform.Microsoft.Wheel(spokes=4)";
 87                          case 4:
 88                              return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='spin')";
 89                          default:
 90                              return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
 91                      }
 92                  }
 93                  else
 94                      return "blendTrans(duration=2)";
 95              default:
 96                  return "blendTrans(duration=2)";
 97          }
 98      }
 99  }
Posted
Updated 26-May-11 4:03am
v2
Comments
R. Giskard Reventlov 26-May-11 8:13am
   
and?
[no name] 26-May-11 10:05am
   
Could you add some more Info, for example what showing in FF or any other browser.
Iam Velu 27-May-11 0:27am
   
In FF it shows nothing..where as in IE it shows the output clearly
Sandeep Mewara 26-May-11 10:44am
   
And are we suppose to look and run and then see what was expected here? :doh:

I think I may have spotted your problem... I'm guessing that none of the case statements in GetNextTransition will run in any browser other than IE as they are MS specific which means they are probably not supported on any other browser. Not entirely certain and you'll have to check it but that would be my guess. Your code actually says: Note some of the effects only work in IE.. So, unless I've utterly missed the point...
   
Comments
Graham Breach 26-May-11 10:14am
   
I agree - it looks like this code will only work in IE.
Iam Velu 27-May-11 0:25am
   
what is the solution to make this effect to visible in firefox?
You are using DirectX Transitions which is supported only by IE, other browsers simply ignore it.
   
Comments
Iam Velu 27-May-11 0:25am
   
what is the solution to make this effect to visible in firefox?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900